html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	background: 0 0;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	outline: none;
}

html{
	background:#34353a;
	width:100%;
	height:100%;
	color:#FFF;
	font-family: Montserrat;
}

.container{
	max-width: 968px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	padding: 0 40px;
	position: relative;
	clear: both;
}

.home{
	width: 100%;
	min-height: 100vh;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.content{
	display: flex;
	align-items: center;
}

.name{
	font-size: 55px;
	font-weight: 800;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.avatar{
	min-width: 300px;
	min-height: 300px;
	position: relative;
	border-radius: 100%;
}

.avatar .image{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	animation: morph 8s ease-in-out infinite 0s;
	background-blend-mode: multiply;
	-webkit-box-shadow: inset 0 0 0 9px rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 0 9px rgba(255,255,255,.3);
	box-shadow: inset 0 0 0 9px rgba(255,255,255,.3);
	background-image: url("https://avatars.githubusercontent.com/u/4430874?v=4");
}

.job{
	font-style: italic;
	font-weight: 500;
	max-width: 450px;
	margin-bottom: 30px;
	color: #bbb;
}

.details{
	margin-left: 80px;
}

.wrap *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

a{
	color: #bbb;
	text-decoration: none;
	border-bottom: 1px solid #bbb;
	border-style: dotted;
}

@keyframes morph {
	0% {
		border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
	}
	50% {
		border-radius: 30% 60% 70% 40%/50% 60% 30% 60%
	}
	100% {
		border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
	}
}

ul{
	list-style:none;
}

li{
	float:left;
	margin-right:20px;
}

li a{
	border-bottom:0px;
	color:#FFF;
	font-size:20px;
}

@media only screen and (max-width: 769px) {
	.content{
		display:inline-block;
		width:100%;
		margin-top: 50px;
		position: absolute;
		overflow-y:none;
	}
	
	.avatar{
		min-width:100%;
		max-width:100%;
		width:100%;
		float:left;
	}
	
	.name{
		font-size:30px;
	}
	
	.details{
		width:100%;
		float:left;
		margin-left:0;
		margin-top: 30px;
	}
}