*{
	padding:0;
	margin:0;

	box-sizing: border-box;

	font-family: Inclusive Sans;
	font-size: 18px;
	color: #c77a00;
}

@font-face{
	font-family:National Park;
	src:url('fonts/NationalPark_Variable.woff2') format('woff2') tech(variations);
	font-display:swap;
	font-weight: 100 900;
	/*size-adjust:128%*/
}

@font-face{
	font-family:Inclusive Sans;
	src:url('fonts/InclusiveSans_Variable.woff2') format('woff2') tech(variations);
	font-display:swap;
	font-weight: 100 900;
	/*size-adjust:128%*/
}

h1,h2,h3{
	font-family: National Park;
	font-weight: 500;
}

body {
	min-height: 100vh;
	background: url("gaussian_noise.webp"), linear-gradient(#ffe6d8,#fff,#fff,#fff,#ffe6d8);
    background-size: auto, auto;
	background-blend-mode: color-burn;
	image-rendering: pixelated;
	background-size: 400px;
}

header {
	padding: 28px;
}

header a {
	padding: 8px 16px;

	&:hover{
		text-decoration: 2px underline;
	}
}

main {
	padding: 21px 18px;
}

.landing {
	display: flex;
	flex-flow: row wrap;
	height: 80dvh;
	align-items: center;
	justify-content: space-around;
}

.landing div{
	font-family: National Park;
	height: fit-content;
	max-width: 560px;
}

.landing img {
	max-height: 54vh;
}

h1 {
	margin-bottom: 1rlh;
}

h2 {
	font-size: 2.5rem;
	color: #e18a00;
	margin: 0 0 4vh 2.5vw;
}

h3 {
	font-size: 1.4rem;
	color: #c77a00;
	line-height: 1;
}

img {
	image-rendering: optimizequality;
	max-width: 100%;
}

.name {
	font-size: 4rem;
	color: #ec9100;
	margin-bottom: .2rlh;
}

.subheader {
	font-size: 1.75rem;
	color: #dd8700;
	font-weight: 400;
}

#work {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-auto-rows: 56dvh;
	gap: 56px;
	padding: 20px 28px;
}

#work a {
	display: flex;
	width: 100%;
	flex-flow: column nowrap;
	gap: 8px;
	text-decoration: none;
}

#work a img{
	height: 100%;
	min-height: 0;
	width: 100%;
  	object-fit: cover;
  	filter: grayscale(100%) contrast(120%);
  	mix-blend-mode: screen;
}

#work image-container:hover {
	
	background: #000;

	img {
		filter: none;
	}
}

image-container {
	display: block;
	height: 100%;
	min-height: 0;
	width: 100%;
	background: #dd8700;
	border-radius: 5px;
	overflow: hidden;
}

#work a div {
	display: flex;
	justify-content: space-between;
	font-size: 1.05rem;
}

#work span {
	font-size: 1.1rem;
	color: #c77a00;
	line-height: 1.5;
	font-weight: 350;
	opacity: 0.75;
}


#skills {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	gap: 2rem;
	padding: 20px 28px;
}

#skills div {
	padding: 24px 28px 32px;
	/*background: #fce8d6aa;*/
	border: 1px solid;
	border-radius: 12px;
}

#skills h3, #skills li {
	color: #824d00;
}

hr {
	border: 0;
	background: #e7c8b6;
  	height: 1px;
  	margin-block: 18px;
	max-width: 280px;
}

section {
	margin-bottom: 16vh;
}

ul {
	list-style: none;
	line-height: 1.7;
}

a {
	display: block;
	font-size: 1.2rem;
	text-decoration: none;
	width: fit-content;
}

#contact {
	display: flex;
	flex-flow: row wrap-reverse;
	min-height: 70dvh;
	align-items: center;
	justify-content: space-evenly;
	row-gap: 10vh;
}

.headshot {
	width: 480px;
	border-radius: 8px;
	rotate: 2deg;
	max-width: 85%;
}

.headshot:hover {
	content: url(images/Headshot_02.webp);
	rotate: -1deg;
}

.button {
	background: #c77a00;
	color: white;
	padding: 14px 22px;
	border-radius: 24px;
	margin-left: auto;
	width: fit-content;

	&:hover {
		background: color-mix(in oklab, #c77a00 100%, #fff 18%);
		
		&:active {
		background: color-mix(in oklab, #c77a00 100%, #000 18%);
	}

	}
}

#contact h2 {
	margin-bottom: 6vh;
}

footer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

	background: url("gaussian_noise.webp") 0 / 400px, linear-gradient(80deg, #945a00, #7a4800);
	background-blend-mode: soft-light;

	padding: 32px 48px 28px;
  	border-radius: 8px;
  	margin: 7px;
  	gap: 56px;
}

footer * {
	color: #ffe9dc;

}

footer h2 {
	font-size: 2.25rem;
  	margin: 0 0 32px;
}

footer p {
	color: #fff;
	max-width: 400px;
}

footer a img, .button img {
	height: .9rem;
  	margin-bottom: -1px;
  	opacity: .8;
  	margin-left: 6px;
}

footer a {
	color: #fff;
  	padding-inline: 8px;
  	margin-inline: -8px;

	&:hover{
		text-decoration: 2px underline #fffa;
	}
}

.ai_notice img {
	width: 80px;
  	margin-bottom: 32px;
}

footer > p {
  	margin-block: auto 8px;
  	color: #ffe9dc;
}

.page_title {
	height: 50vh;
  	display: flex;
  	flex-flow: column;
}

.page_title h1 {
	font-size: 2.4rem;
	color: #dd8700;
	line-height: 1;
}

.page_title span {
	font-size: 2rem;
	opacity: .5;
}

.page_title img {
	height: 100%;
	object-fit: cover;
	border-radius: 14px;	
}

article {
	display: grid;
  	grid: 1fr / 1fr 1fr;
  	gap: 2em;
  	padding: 36px 18px;
}

article p {
  	line-height: 1.2;
 	margin-bottom: 1lh;
}

article img {
	border-radius: 6px;
}

article figure {
	margin-bottom: 1lh;
}




@media (width <= 480px) {

	* {
		font-size: 16px;
	}

	.name {
		font-size: 3.5rem;
	}

	.landing img {
		width: 85vw;
	}

	#work {
		grid-auto-rows: 275px;
    	grid-template-columns: 1fr;
    	padding-inline: unset;
	}

	#work a {
		grid-column: auto !important;
		grid-row: auto !important;
	}

	#skills {
		grid-template-columns: 1fr;
		padding-inline: 8px;
    	row-gap: 3vh;
	}

	#contact * {
	  	margin-inline: auto;
	}

	footer {
		padding-inline: 28px;
	}

}