html, body{
	margin: 0;
	font-family: 'Roboto', sans-serif;
	width:100%;
	display: flex;
	background-color: #fafafa;
}
nav{
	box-shadow: 5px 0px 20px 0 rgba(0, 0, 0, 0.1);
	position:fixed;
	height:100%;
	top:0;
	left:0;
	text-align: center;
}
ul{
	text-align: left;
	margin-right: 40px;
}

ul span{
	color:#c8c8c8;
}
nav li{
	color: black;
	list-style-type: none;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 10pt;
}
nav li:hover{
	list-style-type: circle;
}
section{
	display: none;
	flex: 1;
	right:0px;
	font-weight: lighter;
	padding-left: 10px;
	padding-right:10px;
}
hgroup{
	text-align: right;
}
hgroup a{
	font-weight: bold;
}
h1{
	font-size: 28pt;
	text-align: center;
	font-weight: bold;
	margin: 50px 0 50px 0px;
}
article{
	margin:auto;
	max-width: 1000px;
	font-size: 12pt;
}
article p:first-of-type {
	text-indent: 3em;
}
article a{
	color:red;
}
.button{
	font-weight: normal;
	text-decoration: none;
	padding: 6px;
	border-radius: 6px;
	line-height: 45px;
	background-color: red;
	color:white;
	margin-left: 5px;
}
article img{
	max-width:100%;
	display: block;
}
p{
	max-width: 600px;
	margin: 30px auto;
}
section hr{
	border-color: #e5e5e5;
	width:200px;
	margin-top:120px;
}
#profile-pic{
	max-width: 200px;
	float: left;
	overflow: hidden;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}
#logo{
	-webkit-animation: drawLogo 2s forwards;
	animation: drawLogo 2s forwards;
	transform-origin: 50% 50%;
}
#logo-forth{
	-webkit-animation: drawForthLogo 1s forwards;
	animation: drawForthLogo 1s forwards;
	transform-origin: 50% 50%;
}
#logo-reverse{
	-webkit-animation: drawBackLogo 1s forwards;
	animation: drawBackLogo 1s forwards;
	transform-origin: 50% 50%;
}
@keyframes drawLogo {
	15%{ stroke:white;
		stroke-dashoffset: 310;
		transform: rotate(-180deg);
	}
	40%{  stroke:red;
		stroke-dashoffset: 235;
		transform: rotate(-180deg);
	}
	45%{  stroke:red;
		stroke-dashoffset: 235;
		transform: rotate(-180deg);
	}
	100%{ stroke:black;
		stroke-dashoffset: 0;
		transform: rotate(-20deg);
	}
}
@keyframes drawBackLogo {
	0%{ stroke:black;
		stroke-dashoffset: 0;
		transform: rotate(-20deg);
	}
	45%{  stroke:red;
		stroke-dashoffset: 235;
		transform: rotate(-180deg);
	}
	55%{  stroke:red;
		stroke-dashoffset: 235;
		transform: rotate(-180deg);
	}
	100%{ stroke:red;
		stroke-dashoffset: 290;
		transform: rotate(-180deg);
	}
}
@keyframes drawForthLogo {
	100%{ stroke:black;
		stroke-dashoffset: 0;
		transform: rotate(-20deg);
	}
	55%{  stroke:red;
		stroke-dashoffset: 235;
		transform: rotate(-180deg);
	}
	45%{  stroke:red;
		stroke-dashoffset: 235;
		transform: rotate(-180deg);
	}
	0%{ stroke:red;
		stroke-dashoffset: 290;
		transform: rotate(-180deg);
	}
}

table{
	padding-top: 40px;
}
table td:last-child{
	padding-left: 30px;
}


@media screen and (max-width: 800px) {
  article{
		width: 100%;
   	font-size: 12pt;
  }
  nav{
	  display: none;
  }
  #wrapper{
	  width:0;
	  display: none;
	  position: absolute;
  }
}