/* http://meyerweb.com/eric/tools/css/reset/ 
			   v2.0 | 20110126
			   License: none (public domain)
			*/

			html, body, div, span, applet, object, iframe,
			h1, h2, h3, h4, h5, h6, p, blockquote, pre,
			a, abbr, acronym, address, big, cite, code,
			del, dfn, em, img, ins, kbd, q, s, samp,
			small, strike, strong, sub, sup, tt, var,
			b, u, i, center,
			dl, dt, dd, ol, ul, li,
			fieldset, form, label, legend,
			table, caption, tbody, tfoot, thead, tr, th, td,
			article, aside, canvas, details, embed, 
			figure, figcaption, footer, header, hgroup, 
			menu, nav, output, ruby, section, summary,
			time, mark, audio, video {
				margin: 0;
				padding: 0;
				border: 0;
				font-size: 100%;
				font: inherit;
				vertical-align: baseline;
			}
			/* HTML5 display-role reset for older browsers */
			article, aside, details, figcaption, figure, 
			footer, header, hgroup, menu, nav, section {
				display: block;
			}
			body {
				line-height: 1;
			}
			ol, ul {
				list-style: none;
			}
			blockquote, q {
				quotes: none;
			}
			blockquote:before, blockquote:after,
			q:before, q:after {
				content: '';
				content: none;
			}
			table {
				border-collapse: collapse;
				border-spacing: 0;
			}

			/* Default Styles Below*/			

	/* end reset*/















/* default styles (all device widths, but designed for mobile phone)*/


	#text {
    animation: fadein 1.5s;
    -moz-animation: fadein 1.5s; /* Firefox */
    -webkit-animation: fadein 1.5s; /* Safari and Chrome */
    -o-animation: fadein 1.5s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}













	#text h1 {
    animation: fadein 3.5s;
    -moz-animation: fadein 3.5s; /* Firefox */
    -webkit-animation: fadein 3.5s; /* Safari and Chrome */
    -o-animation: fadein 3.5s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}






















	#pepe img {
    animation: fadein 8.5s;
    -moz-animation: fadein 8.5s; /* Firefox */
    -webkit-animation: fadein 8.5s; /* Safari and Chrome */
    -o-animation: fadein 8.5s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}





	#end {
    animation: fadein 8.5s;
    -moz-animation: fadein 8.5s; /* Firefox */
    -webkit-animation: fadein 8.5s; /* Safari and Chrome */
    -o-animation: fadein 8.5s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}







	img {
		padding: 7%;
		width: 70%;
		max-width: 70%
	}

	h1 {
		font-size: 1.8em;
	}

	h2 {
		font-size: 4.5em;
	}

	h3 {
		font-size: 1.6em;
	}


	body {
		background-color: black;
		padding: 12%;
		line-height: 1.7;
	}

	#text {
		text-align: left;
		margin-left: 15%;
		margin-right: 15%;		
		color: white;
		font-family: 'Rokkitt', serif;
	}

	#choice {
		text-align: right;	
		margin-top: 10%;
		margin-right: 5%;
	}

	#timepassed {
		text-align: center;
	}

	
	a:link {
		color: aqua;
		text-decoration: none;
		}

	a:visited {
		color: aqua;
		text-decoration: none;
		}

	a:hover {
		color: aqua;
		text-decoration: none;
		}

	a:active {
		color: aqua;
		text-decoration: none;
		}





	/* desktop styles */
	@media only screen and (min-width: 701px) {


	}





	/* tablet styles */
	@media only screen and (min-width: 500px) and (max-width: 700px) {
	

	}





	/* mobile styles */
	@media only screen and (max-width: 700px) {
	
	body {
		margin-top: 3%;
		padding: 0%;
		line-height: 1.7;
	}


		#text {
		text-align: left;
		margin-top: 20%;
		margin-left: 8%;
		margin-right: 8%;		
		color: white;
		font-family: 'Rokkitt', serif;
	}

	#choice {
		text-align: right;	
		margin-top: 10%;
		margin-right: 5%;
	}

	}