styles.css

/*jakepasner.com style sheet*/

* {
	margin: 0;
	padding: 0;
}

html { height: 100%; }

/* Generated by Font Squirrel (https://www.fontsquirrel.com) on October 15, 2016 */
@font-face {
    font-family: "Josefin Sans";
    src: url("/font/josefin_sansregular.woff2") format("woff2"),
         url("/font/josefin_sansregular.woff") format("woff");
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: "Josefin Sans Italic";
    src: url("/font/josefin_sansitalic.woff2") format("woff2"),
         url("/font/josefin_sansitalic.woff") format("woff");
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: "Josefin Sans Light";
    src: url("/font/josefin_sanslight.woff2") format("woff2"),
         url("/font/josefin_sanslight.woff") format("woff");
    font-weight: normal;
    font-style: normal;

}

body {
	background-color: #FFFFFF;
	height: 100%;
	color: #000000;
	font-family: "Josefin Sans", "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif;
	overflow-x: hidden;
}

h1 {
	text-align: center;
	font-weight: 300;
}

h2, h3, h4, h5, h6 {
	text-align: left;
	font-weight: 300;
}

p {
	font-size: 1.3em;
	line-height: 1.4em;
	margin: .25em 0 .5em;
}

a {
	text-decoration: none;
	color: #007680;

}

a:hover {
	color: #FFAC26;
}

img {
	width: 100%;
}

.white, .white:hover {
	color: #000000;;
}

ul {
	margin: .25em 0 .5em;
	padding-left: 1.5em;
	list-style: none;
	font-size: 1.3em;
	line-height: 1.3em;
}

li {
	margin: 0 0 .5em;
}

li:before {
  content: "\003E";
}

@media only screen {

	#wrapper {
		height: auto;
		min-height: 100%;
		margin: 0 auto -2em;
	}

	#header {
		position: relative;
		height: 100%;
		display: block;
		width: 100%;
		background-color: #f1f1f1;
		overflow: hidden;
	}

	#nav {
		width: 100%;
		margin: 0 auto;
		padding: .1em .1em;
		text-align: center;
		background-color: #f1f1f1;
		overflow: hidden;
		font-size: 1.1em;
	}

	.fivenav {
		width: 18%;
		height: 1.75em;
		margin: 0 auto;
		padding: .4em 0 0;
		position: relative;
		display: inline-block;
		color: #000000;
	}

	.third, .quarter {
		width: 30%;
		margin: .1em auto;
		position: relative;
		display: inline-block;
		color: #000000;
	}

	.clearfloats {
		clear: both;
	}

	#content {
		padding: 2em 0 4em; /* leaves room for footer */
		width: 90%;
		display: block;
		margin: 0 auto;
		max-width: 42em;
	}

	#placeholder {
		width: 80%;
		display: block;
		margin: 0 auto;
		max-width: 10em;
	}

	.home {
		width: 90%;
		max-width: 17em;
		display: block;
		margin: 0 auto;
	}

	#brain {
		width: 70%;
		display: block;
		margin: 0 auto -.25em;
		max-width: 11em;
	}

	#home {
		color: #000000;
		text-align: center;
		font-size: 3.5em;
	}

	#footer {
		width: 100%;
		margin: -2em auto 0; /* places footer into content */
		height: 1em;
		padding: .5em 0;
		text-align: center;
		color: #999;
		background-color: #f1f1f1;
		overflow: hidden;
	}

}

@media only screen and (min-width: 40em) {

	#header {
		height: 1.75em;
		position: fixed;
	}

	#nav {
		width: 35em;
	}

	.third {
		width: 33%;
		min-width: 5em;
		margin: 0 auto;
		float: left;
	}

	.fivenav {
		width: 20%;
		min-width: 5em;
		margin: 0 auto;
		float: left;
		height: 1.5em;
		padding: 0;
	}

	.quarter {
		width: 25%;
		min-width: 5em;
		float: left;
	}

	#placeholder {
		margin: 5em auto 0;
	}
}