main.css

/* Base styles that apply to all screen sizes */
body {
font-family: 'Open Sans', sans-serif;
font-size: 15.5px;
line-height: 1.5;
color: #1e1e1e;
}

h1, h2 {
font-family: 'Lato', sans-serif;
font-weight: normal;
margin-top: 4px;
margin-bottom: 4px;
text-align: left;
color: #8C1515; /* Stanford cardinal red */
}

h1 {
font-size: 34px;
}

h2 {
font-size: 26px;
}

div#container {
	margin:50px;
	position: relative;
}
hr {
	margin-top:25px;
}
p {
	margin-top:25px;
}
html {
	background-color: white;
}
div#center h2 {
	margin-top: 20px;
	margin-bottom: 20px;
}
div.text {
		font-family: 'Open Sans', serif;
		margin-top: 0px;
		padding-top: 0px;
		font-size: 15.5px;
		color: #1e1e1e;
}
div.buttonbar{
color:#565656;
}

.button {
	background-color: #f2f2f2;
	border: none;
	color: #303030;
	padding: 3px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
	border-radius: 4px;
	text-decoration: none;
	display: inline-block;
	font-size: 15.5px;
	font-family: 'Open Sans', serif;
	cursor: pointer; 
	transition-duration: 0.2s;
	text-decoration: none;
	margin-bottom: 5px;
}
a {
	text-decoration: none;
	color: #009bee;
	/*color: blue;*/
}
a:visited {
	text-decoration: none;
	color: darkblue;
	/*color: blue;*/
}
a:hover {
	text-decoration: underline;
}
.button:hover {
	background-color:#d1d1d1;
	text-decoration: none;
}
.button:visited {
	color: #303030;
	text-decoration: none;
}


/* Large screens */
@media screen and (min-width: 1001px) {
div#center {
	margin-left: max(1%, 50% - 460px);
	margin-right: max(1%, 50% - 460px);
	width: min(920px);
}

div#contact {
	height: 289px;
}
div.popup {
	margin-top:0px;
	text-align:justify;
}
img {
	float: left;
	margin-top: 20px;
	margin-right: 30px;
	margin-bottom: 20px;
}
}

/* Small screens */
@media screen and (max-width: 1000px) { 
div#center {
	margin-left:0px;
	margin-top:50px;
	clear:left;
}
div#contact {
	margin-top: 30px;
	text-align: left;
}
div.popup {
	margin-top:20px;
}
img {
	margin-bottom: 20px;
	max-width: 100%;
	height: auto;
}
}