main.css

@font-face {
    font-family: 'Alte-Haas-Grotesk';
    src:url('fonts/Alte-Haas-Grotesk.ttf.woff') format('woff'),
        url('fonts/Alte-Haas-Grotesk.ttf.svg#Alte-Haas-Grotesk') format('svg'),
        url('fonts/Alte-Haas-Grotesk.ttf.eot'),
        url('fonts/Alte-Haas-Grotesk.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

body, html {
	font-family: 'Alte-Haas-Grotesk';
	font-size:1.2em;
	letter-spacing: -.02rem;
	line-height: 1.3em;
	color:#333;
	width:90%;
	margin:auto;
	padding-bottom: 100px;
}

a:link, a:visited {
	color:#333;
	text-decoration:none;
}

a:hover {
	color: #ff0000;
	text-decoration:underline;
}

	#header {
		width:100%;
		padding:20px 0px;
		border-bottom: #cccccc 1px solid;
	}
	#name {
		float: left;
	}
	#social {
		text-align: right;
	}

#social img {
	width: 24px;
	height:24px;
}



.clear {
	clear:both;
}
.divider {
	text-align: center;
}
#bio {
	padding: 20px 0px 0px 0px;
/*	border-bottom: #cccccc 1px solid;
*/}

#bio a:link, #bio a:visited {
	font-weight: bold;
}

h1 {
	color:#ff0000;
	font-size:1.1em;
	font-weight: normal;
	padding: 20px 0px;
}

.list {
	list-style: none;
	padding: 0;
	margin: 0;
}

li {
	color:#b3b3b3;
	padding-left: 1rem;
	text-indent: -0.7rem;
	padding-top:10px;
	padding-bottom: 10px;
	border-bottom: #cccccc 1px solid;
}

	li::before {
	content: "\02933   ";
	padding: 0px 10px 0px 0px;
}