body {
	font-family: "Inter", sans-serif;
	margin:48px;
	display:grid;
	row-gap:48px;
	color:#303031;
}
h1 {font-size:24px;font-weight:600;margin: 0 0 8px 0;}
p {font-size: 18px;line-height:30px;margin:0;}
p a {text-decoration:none;color:#005DFF;}

#header {display:flex;justify-content:space-between;font-size:24px;}
#header a {text-decoration:none;color:#303031;}
#header a:hover {color:#005DFF}
#header .links a {font-weight:300;font-size:20px;margin-left:24px;}
#footer {display:flex;justify-content:space-between;}
#footer a {display:flex;gap:8px;align-items:center;text-decoration:none;color:#005DFF;font-size:20px;font-weight:300}
#footer.first {justify-content:flex-end}

#bio {display:flex;align-items:center;}
#bio img {width:128px;height:128px;}
#bio div {margin-right:24px; max-width: 655px}

#projects {display:grid;grid-template-columns:1fr 1fr;column-gap:36px;row-gap:48px;align-items:center}
.project img {width:100%;margin-bottom:12px;}

.image {position:relative;}
.overlay {position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;opacity: 0;transition: .3s ease;background-color: rgba(255, 255, 255, 0.7);}
.overlay div {color: #000;font-family: "Poppins", sans-serif;font-size: 40px;font-weight:600;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;
}
.image:hover .overlay {opacity:1;cursor:pointer;}

.title {font-size:18px;font-weight:600;margin-bottom:8px;}
.subtitle {font-size:18px;font-weight:300;color:#666;margin-bottom:8px;line-height:24px}
.caption {font-size:16px;color:#666;font-weight:300;line-height:24px}
.blurb {max-width:650px}

.tabs {display:flex;}
.tab {padding:16px 24px;background:#F8F7F7;cursor:pointer}
.tab.active {background:#EDEAF5;}
.hide {display:none}

@media (max-width:800px){
	body {margin:16px 16px 32px 16px}
	h1 {font-size:18px}
	p, .subtitle {font-size:16px;line-height:26px}
	#bio {align-items:flex-start;}
	#projects {grid-template-columns:1fr}
}