body{
	margin:0;
	padding:0;
	font-family: 'GoldPanda', helvetica;
	font-size: 1.5rem;
	color:#f8f8f8;
	background:rgba(129,0,3,0.9);
	background-image: url(images/fg2.png);
	animation: animatedBackground2 10s linear infinite;
}

h1{font-size:4.736rem;}
h2{font-size:3.553rem;}
h3{font-size:2.665rem;}
h4{font-size:1.99rem;}
p{font-size:1.5rem;font-family:'MostlyMono';}

@font-face {
  font-family: 'GoldPanda';
  src: url('fonts/GoldPanda.ttf');
}
@font-face {
  font-family: 'MostlyMono';
  src: url('fonts/MostlyMono.ttf');
}
#wrapper{
	margin:0 auto;
	margin-top:12px;
	margin-bottom:12px;
	padding:0;
	width:80%;
	background:#333;
	background-image:url('images/chalkboard.png');
	border-radius:20px;
	-webkit-box-shadow: 4px 4px 3px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: 4px 4px 3px 1px rgba(0,0,0,0.75);
	box-shadow: 4px 4px 3px 1px rgba(0,0,0,0.75);
}

#header{
	padding:12px;
	border-radius:50px 50px 0 0;
	text-align:center;
}		
		#juggleMicrobes{
			margin:0 auto;
			width:40%;
		}
		
#canvasHolder{
	z-index:1;
	margin:0 auto;
	
	width:300px;
	height:600px;
	border-radius:20px;
	background:#810003;
	background-image: url(images/bg4.png);
	background-position: 0px;
	background-repeat: repeat-y;
	animation: animatedBackground 5s linear infinite;
}
	
		@keyframes animatedBackground2 {
			from { background-position: 50% -200%; }
			to { background-position: 0 0; }
		}
		
		@keyframes animatedBackground {
			from { background-position: 50% 200%; }
			to { background-position: 0 0; }
		}	
		

#canvas {
	margin: 0 auto;
	border-radius:20px;
}

#info{
	margin:0 auto;
	padding-top:20%;
	text-align: center;
}

#juggleMicrobes{
	margin-top:10%;
}

.wobble{
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;

	-webkit-animation-name:wobble;
	animation-name:wobble;
	-webkit-animation-duration:2s;
	animation-duration:2s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
		@-webkit-keyframes wobble{
		  16.65% {-webkit-transform: skew(-12deg);transform: skew(-12deg);}
		  33.3% {-webkit-transform: skew(10deg);transform: skew(10deg);}
		  49.95% {-webkit-transform: skew(-6deg);transform: skew(-6deg);}
		  66.6% {-webkit-transform: skew(4deg);transform: skew(4deg);}
		  83.25% {-webkit-transform: skew(-2deg);transform: skew(-2deg);}
		  100% {-webkit-transform: skew(0);transform: skew(0);}
		}

		@keyframes wobble{
		  16.65% {-webkit-transform: skew(-12deg);transform: skew(-12deg);}
		  33.3% {-webkit-transform: skew(10deg);transform: skew(10deg);}
		  49.95% {-webkit-transform: skew(-6deg);transform: skew(-6deg);}
		  66.6% {-webkit-transform: skew(4deg);transform: skew(4deg);}
		  83.25% {-webkit-transform: skew(-2deg);transform: skew(-2deg);}
		  100% {-webkit-transform: skew(0);transform: skew(0);}
		}
		
		#gameImageHolder img{padding-top:16px;vertical-align:-20px;}

.rotate {
	text-align:center;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}
		.rotate:hover, .rotate:focus, .rotate:active {
			-webkit-transform: scale(1.1) rotate(4deg);
			transform: scale(1.1) rotate(4deg);
		}
.pulse{
	text-align:center;
	-webkit-transform:translateZ(0);
	transform:translateZ(0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-moz-osx-font-smoothing:grayscale;
	-webkit-animation-name:pulse;
	animation-name:pulse;
	-webkit-animation-duration:0.5s;
	animation-duration:0.5s;
	-webkit-animation-timing-function:linear;
	animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	animation-direction:alternate;
}
		@-webkit-keyframes pulse{
		  to{-webkit-transform: scale(1.1);transform: scale(1.1); }
		}
		@keyframes pulse{
		  to{-webkit-transform: scale(1.1);transform: scale(1.1);}
		}
.spin{
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-moz-osx-font-smoothing:grayscale;
	-webkit-animation-name:spin;
	animation-name:spin;
	-webkit-animation-duration:3s;
	animation-duration:3s;
	-webkit-animation-timing-function:linear;
	animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
}
		@-webkit-keyframes spin{
			from{-webkit-transform: rotate(0deg);}
			to{-webkit-transform: rotate(360deg);}
		}
		@keyframes spin{
			from{transform: rotate(0deg);}
			to{transform: rotate(360deg);}
		}

.colWrap{
	clear:both;
	padding:0px;
	margin-top:48px;
}
		.col{
			display:block;
			float:left;
			margin:12px;
			padding:10px;
		}

		.group:before,
		.group:after{content:""; display:table;}
		.group:after{clear:both;}
		.group{zoom:1; /* For IE 6/7 */}

		.width3{width:95%;}
		.width2{width:42%;min-width:300px;}
		.width1{width:30%;}

				@media only screen and (max-width:480px){
					.col{margin:12px;}
					.width3, .width2, .width1{width:90%;}
					#wrapper{width:100%;}
				}

.toggle1{
	margin:0 auto;
	margin-top:3%;
	width:70%;
	display:none;
}

.game, .toggle2{display:none;}

.highlight{
	font-size:130%;
	color:#B1100D;
}

#rules{
	margin:48px;
	font-family:'MostlyMono';
	text-indent:5px;
}
		#rules li{padding:12px 0 0 0;}