<style type="text/css">

/* mobile-specific ...... mobile first */

ol.past {
    column-count: 1;
    column-gap: 20px;
}

.nameslist {
	width:100vw;
}


.mobile-yes {
	display:inline-block;
}

.mobile-no {
	display:none;
}

.main {
  max-width: 42rem;           /* ~672px ideal reading width */
  margin-left: 0;
  padding: 1rem;              /* 16px on mobile */
   font-size: 26px;
 	border:0;
	line-height:1.6em;

  
}


p {
  margin: 1.2em 0;
}

h1, h2, h3 {
  line-height: 1.25;
  margin-top: 2em;
  margin-bottom: 0.6em;
}

h1 {
  font-size: 1.8rem;
}

h2 {
  font-size: 1.3rem;
  letter-spacing: 0.02em;   /* subtle polish */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5em 0;
}

/* desktop-specific ................. */

@media only screen and (min-width: 1000px) {


ol.past {
    column-count: 4;
    column-gap: 20px;
}

.nameslist {
	width:1000px;
}

.waste {
	color:green;
	}

body {
	background:white;
	color:black;

}

.main {
	width:800px;
	border:0;
	padding:5vw; 
	margin: 5vw;
	max-width:80vw;
		line-height:1.6em;
   font-size: initial;
}

#app {
	width:700px;
	border:5px dashed black;
	padding:20px; 
	margin: 20px;
	margin-top:40px;
	line-height:1.2em;
	}
	
#copybutton {
	border:1px solid black;
	border-radius:3px;
	display:inline-block;
	font-size:.8em;
	padding:4px;
	float:right;
	}

#copybutton:hover {
	cursor:pointer;
}

#copybutton:active {
	background:black;
	color:white;
	}
}
</style>
