.avatar, .content, main {
	margin: auto
}

.social-link, .social-link:hover, .text, h1 {
	color: #fff
}

.avatar, .links, .social-link, .text, h1 {
	text-align: center
}

body, html {
	background-size: cover!important;
	height: 100%;
	background: url(../../assets/img/kevin-butz-1450763-unsplash.jpg) center fixed #336;
}

main {
	z-index: 100;
	padding-top: 5%;
	position: relative;
}

.content {
	height: 50%;
	width: 50%;
	background-color: #fff;
}

.avatar {
	width: 10%;
	display: block;
	transition: filter 600s;
}

.backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: #000;
	opacity: .5;
}

.avatar:hover {
	filter: invert(100%);
}

.links {
	font-size: 18pt;
	white-space: nowrap;
	margin-left: auto;
	margin-right: auto;
}

.links > table {
	color: #fff;
	display: inline-block;
	text-align: left;
}

/*.social-link>a {
	padding-left: 5px;
}*/

body {
	box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}