html{
	min-height: 100%;
	background-color: #CC58DC;

	-webkit-transition: background-color 3s linear;  /* Safari 3.2+, Chrome */
	-moz-transition: background-color 3s linear;  /* Firefox 4-15 */
	-o-transition: background-color 3s linear;  /* Opera 10.5–12.00 */
	transition: background-color 3s linear;  /* Firefox 16+, Opera 12.50+ */
	
	font-family: 'Dosis', sans-serif;
}
html,
body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: none;
  box-sizing: border-box;
}
article{
  padding: 2em;
  position: relative;
  left: 0;
  top: 0;
  z-index: 2;
}
h1,ol{
	background-color: #000;
	text-shadow: 1px 1px 5px #000;
}
h1{
	font-family: 'Rancho', cursive;
	font-size: 3em;
	color: #FFF;
	padding: 10px 20px;
	background-color: rgba(0,0,0,0.6);
	text-align: center;
}
h1 span{
	white-space: nowrap;
}
ol{
	font-size: 0.875em;
	font-weight: 500;
	list-style-type: decimal;
	color: #AAA;
	font-style: italic;
	background-color: #000;
	background-color: rgba(0,0,0,0.5);
	padding: 10px 20px 20px 40px;
}
a:link,
a:visited{
	font-size: 1.5em;
	color: #DDD;
	text-decoration: none;
	font-style: normal;
	display: block;
	padding: 8px;
}
a:hover,
a:active{
	color: #FFF;
	background-color: #000;
	background-color: rgba(0,0,0,0.1);
}
a small{
	color: #AAA;
	font-size: 0.66em;
	font-style: italic;
	white-space: nowrap;
}
a:hover small,
a:active small{
	color: #CCC;
}
#myCanvas{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
@media all and (max-width: 480px){
  article{
    padding: 1em;
  }
	h1{
		font-size: 2.8em;
	}
	a small{
		display: block;
		padding: 8px 0 0;
		white-space: normal;
	}
}
@media all and (max-width: 320px){
	h1{
		text-align: left;
	}
	h1 small{
		font-size: 0.9em;
	}
	a:link,
	a:visited{
		padding: 6px 10px;
	}
}