html, body {
	font-family: sans-serif;
	font-size: calc(8pt + 1vw);
	color: #666;
	background: #ddd;
	text-align: center;
	margin: 0 0;
}

h1 {
	margin: 4vw 0 0 0;
}

.introduction, .resume {
	width: 69vw;
	margin: 2vw auto;
}


.introduction::after {
	content: "";
	display: block;
	clear: both;
	height: 1px;
}

.introduction img {
	width: 16vw;
	height: auto;
	margin: auto 4vw auto 4vw;
	float: left;
	border-radius: 8vw;
}

.introduction p {
	margin: 0 4vw;
}

ul.social-links {
	list-style-type: none;
	text-align: center;
	margin: 2vw auto;
	padding: 0;
	width: fit-content;
	height: 10vw;
}

ul.social-links > li {
	float: left;
	padding: 0;
	margin: 0 7vw;
}

ul.social-links a {
	background-position: top left;
	background-size: 100% 100%;
	width: 9vw;
	height: 9vw;
	display: inline-block;
	color: rgba(0, 0, 0, 0);
	opacity: 50%;
	-webkit-opacity: 0.5;
}

ul.social-links a:hover {
	opacity: 100%;
	-webkit-opacity: 1;
}

ul.social-links a[href*="github.com"] {
	background-image: url("../images/github.png");
}

ul.social-links a[href*="linkedin.com"] {
	background-image: url("../images/linkedin.png");
}

ul.social-links a[href*="twitter.com"] {
	background-image: url("../images/twitter.png");
}

.resume a {
	text-decoration: none;
}

@media (min-aspect-ratio: 9/12) {

	.introduction {
		display: table;
		margin-bottom: 4vw;
		margin-top: 4vw;
	}

	.introduction p {
		display: table-cell;
		height: 16vm;
		vertical-align: middle;
	}

}

@media (max-aspect-ratio: 9/12) {

	body {
		font-size: calc(8pt + 2vw);
	}

	.introduction img {
		width: 3in;
		height: auto;
		margin: 4vw 0 8vw 0;
		border-radius: 1.5in;
		float: none;
	}

	.introduction {
		margin-bottom: 8vw;
	}
}