:root {
	
	--black:#212125;
	--darkgrey:#626262;
	--beige:#E5E3DB;
	--sand:#DBD8CD;
	--white:#F8F8F8;
	
	--xxxlarge:5rem;
	--xxlarge:3.5rem;
	--xlarge:3rem;
	--large:2rem;
	--medium:1.5rem;
	--small:1.25rem;
	--xsmall:1rem;
	--xxsmall:.875rem;
	
@media only screen and (max-width: 1279px) {
	--xxxlarge:4rem;
	--xxlarge:3rem;
	--xlarge:2.5rem;
	--large:1.5rem;
	--medium:1.25rem;
	--small:1rem;
	--xsmall:.875rem;
	--xxsmall:.75rem;
	}
}

* { margin: 0; padding: 0; }

body {
	background-color: var(--beige);
	font-family:'Inter', system-ui, Helvetica, Arial, sans-serif;
	color: var(--main-text-color);
	font-size:16px;
	padding:0;
	margin:0;
	letter-spacing:.0125rem;
}

header {
	background-color: var(--black);
}

.subpage {
	background-color: var(--darkgrey);
	width: 100vw;
	margin:0 auto;
	display:flex;
	flex-direction: row;
	padding:4rem 0;
}

nav {
	background: var(--darkgrey);
	padding:2rem 5rem;
}

nav a {
	color: var(--darkgrey);
	font-size: var(--medium);
}

.wrapper {
	display:flex;
	flex-wrap:wrap;
	padding:4rem 1.5rem;
	max-width:100vw;
}

.wrapper-bio {
	padding:4rem 1.5rem;
	max-width:100vw;
}

.portrait {
	width:calc(100vw - 3rem);
}

.hero {
	width:100vw;
}

.hero img {
	width:calc(100vw - 3rem);
}

hr {
	height:3rem;
	background-color: var(--sand);
	border:0;
}

nav {
	width: calc(100vw - 4rem);
	background: var(--sand);
	text-align:center;
	font-size: var(--medium);
	display:flex;
	flex-direction:row;
	padding:2rem;
	justify-content: space-between;
}

.small {
	font-size:var(--small);
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.25rem;
	color:var(--black);
}

footer h1 {
	color: var(--sand);
	font-size: var(--xlarge);
}

.flex {
	width:calc (100% - 3 rem);
	padding:2rem 0 0 0;
	height:auto;
	flex-wrap:wrap;
	display:flex;
	justify-content: space-around;
	flex-direction:column;
}

.item-col-3 {
	flex:1;
	max-width:100%;
	margin:0 0 1rem 0;
	background-color: var(--sand);
	padding:1.5rem;
}

.item-col-5 {
	flex:1;
	max-width:100%;
	margin:0 0 1rem 0;
	background-color: var(--sand);
	padding:1.5rem;
}

.flex p {
	font-size: var(--xsmall);
	padding:0;
}

.item-col-3:first-child, .item-col-5:first-child {
	margin-left:0;
}

.item-col-3:last-child, .item-col-5:last-child {
	margin-right:0;
}

@media only screen and (min-width: 767px) {
	.flex {
		display:flex;
		width:100%;
		padding:2rem 0 0 0;
		height:auto;
		flex-wrap:wrap;
		justify-content: space-around;
		flex-direction:row;
	}
	
	.item-col-3 {
		flex:1;
		width: calc(33% - 4rem);
		margin:0 1rem;
		background-color: var(--sand);
		padding:1.5rem;
	}

	.item-col-5 {
		flex:1;
		width: calc(20% - 3rem);
		margin:0 .5rem;
		background-color: var(--sand);
		padding:2rem 1rem;
	}

	.item-col-3:first-child, .item-col-5:first-child {
		margin-left:0;
	}

	.item-col-3:last-child, .item-col-5:last-child {
		margin-right:0;
	}
}

@media only screen and (min-width: 1279px) {
	header {
		flex-wrap:wrap;
		flex-direction:row;
	}
	
	.wrapper {
		max-width:1280px;
		margin:0 auto;
		justify-content: space-between;
		padding:5rem 0; 
	}
	
	.wrapper-bio {
		max-width:1280px;
		margin:0 auto;
		justify-content: start;
		flex-direction:column;
	}
	
	.wrapper-alt {
		max-width:1280px;
		margin:0 auto;
		justify-content: start;
		flex-direction:row;
		padding:5rem 0; 
	}
	
	.portfolio img {
		width:768px;
	}
	
	.wrapper-sub {
		max-width:1280px;
		margin:0 auto;
		justify-content: space-between;
		padding:0 0 5rem 0;
		flex-wrap:wrap;
	}

	.summary {
		padding:0 0 3rem 0;
		margin:auto 0;
		
	}
	
	.hero {
		max-height:90vh;
		max-width:75%;
		margin:0 auto;
	}
	
	.hero img {
		width: 100%;
		text-align:right;
	}
	
	section img {
		width:100%;
		padding:0 0 2rem 0;
	}
	
	section img.mobile {
		width:35%;
		padding:0;
		border-radius:3.75rem;
		margin-bottom:2em;
	}
	
	.intro, .desc {
		padding:0 26rem 0 0;
	}

	.rebrand {
		height:auto;
		width:30vw;
	}
}


section img {
	max-width:100%;
	padding:0 0 2rem 0;
}

section {
	padding:4rem 0;
}

header h1 {
	color: var(--sand);
	font-size: var(--xxlarge);
	font-weight:600;
	padding:.75rem 0 .125rem 0;
}

@media only screen and (min-width: 1279px) {
	header h1 {
		padding:0 0 .25rem 0;
	}
}

footer {
	background: var(--darkgrey);
}



footer p, header p {
	color: var(--white);
	font-size: var(--large);
}

.text, .summary {
	width: calc(100vw - 3rem);
}

.summary {
	padding:0 0 1rem 0;
}

.image, .image-ns {
	margin:2rem auto;
	width:100%;
}

.image img {
	width:100%;
}

.image-ns img {
	width:100%;
}

h1, h2, h4 {
	font-weight:600;
}

h2 {
	font-size: var(--xlarge);
	color: var(--darkgrey);
}

h3 {
	font-size:var(--xsmall);
	padding:.25rem 0;
	font-weight:400;
}

.sub {
	color:var(--darkgrey);
}

p {
	font-size: var(--medium);
	line-height:1.55;
}

.uppercase {
	text-transform:uppercase;
	font-weight:600;
	letter-spacing:.125rem;
}

a {
	text-decoration:none;
	color: var(--darkgrey);
}

.underline {
	text-decoration:underline;
}

a:hover {
	text-decoration:underline;
}

.light {
	color: var(--white);
}

.svg-icon {
	margin:0 0 1.25rem .25rem;
	display:block;
}

code {
	font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	background: var(--white);
	padding:.25rem .25rem;
	font-weight:300;
	border-radius:4px;
}

.portrait {
	margin-right:4rem;
	margin-bottom:2rem;
	width:12rem;
	max-height:12rem;
}




.round {
	border:.25rem solid var(--sand);
	border-radius:50%;
	width:100%;
}