@import url(https://fonts.googleapis.com/css?family=Oxygen);
@import url(https://fonts.googleapis.com/css?family=Caveat);
@import url(https://fonts.googleapis.com/css?family=Pompiere);
@import url(https://fonts.googleapis.com/css?family=La+Belle+Aurore);
.caveat_font { font-family: 'Caveat', cursive; }
.pompiere_font { font-family: 'Pompiere', cursive; }
.la_belle_aurore_font { font-family: 'La Belle Aurore', cursive; }

* { margin: 0; padding: 0; }
html, body, header, .logo, .logo img, nav, footer { width: 100%; clear: both; }
html { font-family: 'Verdana', sans-serif; background: #fff; font-size: 100%; width: 99%; }
body { background: #fff; }
nav a { float: left; padding: 0 5px; display: block; color: #000; text-decoration: none; font-size: 2em; }
nav a:hover { background: #000; color: #fff; text-decoration: underline; } 
aside { float: right; }
.centered { text-align: center; }
.title_text { font-size: 4em; }
.subtitle_text { font-size: 3em; }
footer { text-align: right; padding-bottom: 15px; }
p { padding-bottom: 5px; text-align: justify; }

.hideme { display: none; }

@keyframes intro_arrow_anim {
	0%	{ transform: rotate(0deg) translate(-10px,-75px); }
	100%	{ transform: rotate(0deg) translate(-10px,-75px); }
	/*100%	{ transform: rotate(0deg) translate(10px,-75px); }*/
}

.intro_arrow { position: absolute; width: 125px; font-size: 150px; height: 75px; animation-name: intro_arrow_anim; animation-duration: 2.4s; animation-iteration-count: infinite; animation-direction: alternate; }
.intro_arrow_text { position: absolute; left: 140px; top: 15px; width: 65%; font-size: 1.5em }

@media screen and (min-width: 560px) {
	body { width: 99%; margin: 0 auto; position: relative; max-width: 1200px; }
	header { width: 18%; float: left; border-right: 2px solid black; margin: 25px 0 0 1%;}
	nav a { padding: 5px 5px 0px 35px; float: none; }
	.container { width: 68%; float: left; margin-left: 1%; }
	div.container { font-size: 124%; } /* this should be edited when nav is changed; makes sure that footer appears below nav */
	footer.container { width: 100%; }
	.logo img { width: 80%; position: relative; top: -10px; }
}