@font-face {
	font-family: 'sf-mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/SF-Mono-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'sf-mono';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/SF-Mono-Bold.woff2') format('woff2');
}

@view-transition {
	navigation: auto;
}

@layer root, theme, resets, global, content, transitions;

@layer root {
	:root {
		/* Colors */
		--color-black: hsl(0deg 0% 0%);
		--color-gray-90: hsl(0deg 0% 90%);
		--color-gray-95: hsl(0deg 0% 95%);
		--color-muted-gray: hsl(200deg 12% 40%);
		--color-blue-gray: hsl(200deg 12% 60%);
		--color-dark-gray: hsl(204deg 10% 16%);
		--color-charcoal-gray: hsl(210deg 10% 12%);
		--color-midnight-gray: hsl(220deg 5% 11%);
		--color-magenta: hsl(0deg 48% 48%);
		--color-cyan: hsl(195deg, 40%, 50%);
		--color-teal: hsl(180deg 13% 19%);
		--color-cyan-teal: hsl(183deg 100% 31%);
		--color-muted-teal: hsl(178deg 30% 59%);
		--color-deep-teal: hsl(194deg 64% 43%);
		--color-beige: hsl(30deg 76% 59%);
		--color-sand: hsl(43deg 7% 60%);
		--color-green: hsl(99deg 28% 60%);
		--color-lime-green: hsl(85deg 69% 66%);
		--color-blue-green: hsl(178deg 98% 20%);
		--color-red: hsl(348deg 100% 50%);
		--link-color: light-dark(var(--color-black), var(--color-gray-95));
		--text-color: light-dark(var(--color-teal), var(--color-sand));

		/* Fonts */
		--body-font-family: 'sf-mono';
		--fallback-fonts: sans-serif, system-ui;

		/* Rem sizes */
		--size-10: 0.625rem;
		--size-12: 0.75rem;
		--size-13: 0.8125rem;
		--size-14: 0.875rem;
		--size-16: 1rem;
		--size-17: 1.0625rem;
		--size-18: 1.125rem;
		--size-20: 1.25rem;
		--size-24: 1.5rem;
		--size-28: 1.75rem;
		--size-30: 1.875rem;
		--size-32: 2rem;
		--size-42: 2.625rem;
		--size-43: 2.6875rem;
		--size-60: 3.75rem;
		--size-62: 3.875rem;
		--size-63: 3.9375rem;
		--size-84: 5.25rem;
		--size-90: 5.625rem;
		--size-151: 9.4375rem;

		/* body sizes */
		--body-font-size-l: var(--size-18);
		--body-font-size-m: var(--size-13);
		--body-font-size-s: var(--size-12);
	
		/* heading sizes */
		--heading-font-size-l: var(--size-63);
		--heading-font-size-m:  var(--size-42);
		--heading-font-size-s: var(--size-28);

		@media (width >= 62em) {
			--body-font-size-l: var(--size-24);
			--body-font-size-m: var(--size-17);
			--body-font-size-s: var(--size-16);
			--heading-font-size-l: var(--size-84);
			--heading-font-size-m:  var(--size-62);
		}

		/* Transition Time */
		--transition-fastest: 200ms;
		--transition-fast: 250ms;
		--transition-time: 300ms;
		--transition-slow: 400ms;
		--transition-slowest: 500ms;

		@media (prefers-reduced-motion: reduce) {
			--transition-fastest: 0ms;
			--transition-fast: 0ms;
			--transition-time: 0ms;
			--transition-slow: 0ms;
			--transition-slowest: 0ms;
		}

		/* Breakpoints used across stylesheets
		* 36em (576px)
		* 48em (768px)
		* 62em (992px)
		* 75em (1200px)
		*/

		interpolate-size: allow-keywords;
		color-scheme: light dark;
	}
}

@layer resets {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		color: var(--text-color);
		font-family: var(--body-font-family), var(--fallback-fonts);
		line-height: 1.5;
		text-size-adjust: none;
		-webkit-tap-highlight-color: transparent;
	}

	.light-mode {
		color-scheme: light;
	}

	.dark-mode {
		color-scheme: dark;
	}

	body {
		background-color: light-dark(var(--color-gray-95), var(--color-midnight-gray));
		font-size: var(--body-font-size-s);
		margin: 0;
	}

	.lock-scroll {
		margin-inline-end: var(--scroll-width);

		& body {
			overflow: hidden;
		}
	}

	:where(input, textarea, select, button, cite, label) {
		font: inherit;
	}


	:where(button, input, label) {
		line-height: 1;
	}

	:where(input[type='text'], textarea) {
		inline-size: 100%;
	}

	input[type='checkbox'] {
		margin: 0;
	}

	:where(h1, h2, h3, h4, h5, h6) {
		font-size: var(--title-font-size, inherit);
		font-weight: var(--title-font-weight, 400);
		line-height: 1.1;
		margin-block: 0;
		text-wrap: balance;
	}

	h1 {
		text-transform: uppercase;
	}

	p {
		margin-block: 0;
		text-wrap: pretty;
	
		& + p {
			margin-block-start: 21px;
		}

		& a {
			--link-color: light-dark(var(--color-cyan-teal), var(--color-cyan));
			--underline-alpha: 1;
		}
	}

	a:not(.button) {
		color: var(--link-color);
		text-decoration-color: hsl(from var(--color-underline, var(--link-color)) h s l / var(--underline-alpha, 0));
		text-decoration-skip-ink: auto;
		transition:
			color var(--transition-time) ease-in-out,
			background-color var(--transition-time) ease-in-out,
			text-decoration-color var(--transition-time) ease-in-out,
			border-color var(--transition-time) ease-in-out;
		
		&:focus-visible {
			outline: 2px solid light-dark(var(--color-cyan-teal), var(--color-cyan));
		}

		&:hover:not(.logo),
		&[aria-current='page']:not(.logo) {
			--link-color: light-dark(
				var(--link-hover-color, var(--color-cyan-teal)),
				var(--link-dark-hover-color, var(--color-cyan))
			);
			--underline-alpha: 1;
		}

		&[aria-current='page'] {
			pointer-events: none;
		}
	}

	:target {
		scroll-margin-block: 5ex;
	}

	textarea {
		resize: vertical;
	}

	button {
		border: none;
		background: none;
		color: inherit;
		cursor: pointer;
		padding: 0;

		&[disabled] {
			cursor: none;
			pointer-events: none;
		}

		&:focus-visible {
			outline: 2px solid var(--color-cyan-teal);
		}
	}

	img {
		block-size: auto;
		font-style: italic;
		max-inline-size: 100%;
		vertical-align: middle;

		.image-full-width & {
			inline-size: 100%;
		}
	}

	iframe {
		aspect-ratio: 16/9;
		block-size: 100%;
		inline-size: 100%;
	}

	ul[role='list'],
	ol[role='list'] {
		list-style-type: none;
		margin-block: 0;
		padding-inline-start: 0;
	}

	svg {
		block-size: auto;
		inline-size: 100%;
	}

	:where(blockquote, figure) {
		margin: 0;
	}

	legend {
		padding-inline: 0;
	}
}

@layer global {
	main {
		padding-block-start: 95px;

		&[aria-hidden='true'] {
			display: none;
		}
	}

	/* Icons */
	.icon {
		block-size: var(--icon-block-size, 24px);
		display: inline-block;
		inline-size: var(--icon-inline-size, 24px);

		& path {
			stroke: var(--icon-color, currentColor);
			transition: stroke var(--transition-time) ease-in-out;
		}
	}

	/* Buttons */
	.button-container {
		display: flex;
		gap: 15px;
		flex-wrap: wrap;
		justify-content: var(--button-justify, start);

		& :where(strong, em) {
			display: contents;
		}

		& em {
			font-style: normal;
		}
	}

	.button {
		align-items: center;
		color: light-dark(var(--color-gray-95), var(--color-black));
		background-color: var(--button-background, light-dark(var(--color-dark-gray), var(--color-gray-95)));
		border: 1px solid var(--button-border-color);
		display: flex;
		gap: 10px;
		justify-content: center;
		line-height: 1;
		padding: 1.07em 2.14em;
		text-align: center;
		text-decoration: underline;
		text-decoration-color: hsl(from light-dark(var(--color-gray-95), var(--color-black)) h s l / var(--underline-alpha, 0));
		text-transform: uppercase;
		transition:
		color var(--transition-time) ease-in-out,
		background-color var(--transition-time) ease-in-out,
		border-color var(--transition-time) ease-in-out,
		text-decoration-color var(--transition-time) ease-in-out;

		&:hover {
			--underline-alpha: 1;
			--button-background: light-dark(var(--color-cyan-teal), var(--color-cyan));
		}

		&:focus-visible {
			outline: 2px solid light-dark(var(--color-cyan-teal), var(--color-cyan));
			outline-offset: 2px;
		}
	}

	.section {
		margin-block: var(--section-block-spacing, 40px);

		@media (width >= 75em) {
			--section-block-spacing: 80px;
		}
	}

	/* Center Content */
	.center-content {
		--section-gutter: 30px;
		--content-max-width: 42rem;
		--breakout-max-width: 75rem;
		--breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

		display: grid;
		grid-template-columns:
		[full-width-start full-offset-left-start] minmax(var(--section-gutter), 1fr)
		[breakout-start breakout-left-start] minmax(0, var(--breakout-size))
		[content-start breakout-right-start]
			min(100% - var(--section-gutter)* 2, var(--content-max-width))
		[content-end breakout-left-end]
		minmax(0, var(--breakout-size))[breakout-end breakout-right-end full-offset-left-end]
		minmax(var(--section-gutter), 1fr) [full-width-end];
		row-gap: 40px;

		& > * {
			grid-column: content;
		}

		& .breakout {
			grid-column: breakout;
		}

		& .breakout-left {
			grid-column: breakout-left;
		}

		& .breakout-right {
			grid-column: breakout-right;
		}

		& .full-width {
			grid-column: full-width;
		}

		& .full-offset-left {
			grid-column: full-offset-left;
		}
	}

	.light-text {
		color: var(--color-gray-95);
	}

	.dark-text {
		color: var(--color-black);
	}

	.title-large {
		--title-font-size: var(--heading-font-size-l);
	}

	.title-medium {
		--title-font-size: var(--heading-font-size-m);
	}

	.title-small {
		--title-font-size: var(--heading-font-size-s);
	}

	.title-bold {
		--title-font-weight: 700;
	}

	.copy-small {
		font-size: var(--body-font-size-s);
	}

	.copy-medium {
		font-size: var(--body-font-size-m);
	}

	.copy-large {
		font-size: var(--body-font-size-l);
	}

	.text-center {
		text-align: center;
	}

	@media (width >= 48em) {
		.text-right {
			text-align: end;
		}
	}

	.code-text {
		color: light-dark(var(--color-deep-teal), var(--color-green));
		font-size: var(--body-font-size-l);

		& span {
			color: light-dark(var(--color-magenta), var(--color-beige));
		}
	}
}

@layer content {
	.header {
		background-color: hsl(from light-dark(var(--color-gray-95), var(--color-midnight-gray)) h s l / 90%);
		inset: 0 0 auto;
		padding-block: 30px;
		position: fixed;
		view-transition-name: header;
		z-index: 1;
	}

	.header-content {
		align-items: center;
		display: flex;
	}

	.header-links {
		margin-inline-start: auto;

		& ul {
			display: flex;
			gap: 40px;

			@media (width >= 75em) {
				gap: 80px;
			}
		}

		& a {
			text-underline-offset: .5em;
			text-decoration-thickness: .14em;
			text-transform: uppercase;
		}
	}

	.toggle-color {
		font-size: var(--size-10);
	}

	.hero,
	.hero-image {
		grid-row: 1;
	}

	.hero {
		display: grid;
		gap: 40px;
		
		&.v-align-center {
			align-items: center;
		}
		
		@media (width >= 48em) {
			&.two-column {
				grid-template-columns: repeat(2, 1fr);
			}

			&.two-column-auto {
				grid-template-columns: 1fr 1.5fr;
			}
		}
	}

	.logos {
		display: flex;
		flex-wrap: wrap;
		gap: 40px;
		justify-content: center;

		& li {
			display: grid;
			flex-grow: 1;
			flex-shrink: 1;
			flex-basis: calc((100% - calc(40px * 3)) / 4);
			min-inline-size: 200px;
			max-inline-size: 300px;
			place-content: center;
		}

		& svg {
			fill: light-dark(var(--color-midnight-gray), var(--color-gray-95));
		}
	}

	.skills {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
	}

	.contact-links {
		align-items: center;
		display: flex;
		gap: 20px;
		margin-block-start: 40px;

		& a {
			align-items: center;
			display: flex;
			gap: 10px;
		}
	}

	.project-details {
		display: grid;
		gap: 40px;

		@media (width >= 48em) {
			grid-template-columns: repeat(2, 1fr);
		}

		&[aria-hidden='true'] {
			display: none;
		}
	}

	.project-list {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));

		& img {
			block-size: 100%;
			object-fit: cover;
		}

		&[aria-hidden='true'] {
			display: none;
		}
	}

	.project-card {
		align-items: start;
		display: grid;

		&:hover {
			--project-name-size: auto;
		}

		& img {
			grid-column: 1;
			grid-row: 1;
			scale: var(--project-image-scale, 1);
			transition: scale var(--transition-time) ease-in-out;
		}
	}

	.project-card-badge {
		align-items: center;
		background-color: light-dark(var(--color-cyan-teal), var(--color-cyan));
		display: flex;
		gap: 5px;
		grid-column: 1;
		grid-row: 1;
		inline-size: max-content;
		padding: 5px 10px;
		z-index: 1;

		@media (hover: hover) {
			opacity: var(--project-icon-opacity, 1);
			translate: var(--project-icon-translate, 0 0);
			transition:
			opacity var(--transition-time) ease-in-out,
			translate var(--transition-time) ease-in-out;
		}
	}

	.project-card-name {
		overflow: hidden;
		text-wrap: nowrap;

		@media (hover: hover) {
			inline-size: var(--project-name-size, 0);
			transition:
			opacity var(--transition-time) ease-in-out,
			inline-size var(--transition-time) ease-in-out;
		}
	}

	.project-card-icon {
		inline-size: 52px;
	}

	.project-details-image {
		align-items: start;
		display: grid;
		overflow: hidden;

		& img,
		& button {
			grid-column: 1;
			grid-row: 1;
		}
	}

	.project-information {
		display: none;

		.project-details-information & {
			display: block;
		}
	}

	.project-details-back {
		background-color: light-dark(var(--color-cyan-teal), var(--color-cyan));
		padding: 5px 10px;
		inline-size: 52px;
	}

	.form {
		display: grid;
		gap: 12px;
	}

	.form-group {
		align-items: center;
		display: grid;
		grid-template-columns: 50px 1fr;

		&:focus-within label {
			opacity: .8;
		}

		& label,
		& .form-field {
			grid-row: 1;
		}

		& label {
			grid-column: 1;
			z-index: 1;
			margin-inline-start: 10px;
		}

		& .form-field {
			grid-column: 1 / -1;
		}

		&.form-details {
			align-items: start;

			& label {
				margin-block-start: 10px;
			}
		}

		& :where(input, textarea) {
			background-color: light-dark(var(--color-gray-90), var(--color-muted-gray));
			border: none;
			
			&:focus {
				outline: 1px auto Highlight;
				outline: 1px auto -webkit-focus-ring-color;
			}

			&:not(:placeholder-shown):invalid,
			&[aria-invalid='true'] {
				outline: 1px auto var(--color-red);
			}
		}
		
		& input {
			padding: 10px 10px 10px 60px;
		}

		& textarea {
			min-block-size: 100px;
			padding: 30px 10px 10px;
		}
	}

	.form-thanks[aria-hidden='true'] {
		display: none;
	}

	.grid-layout {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 2;
		pointer-events: none;
	}

	.grid-layout-content {
		background-color: hsl(from light-dark(var(--color-cyan-teal), var(--color-muted-teal)) h s l / 20%);
		border: 1px solid light-dark(var(--color-blue-green), var(--color-lime-green));
		display: grid;
		grid-template-columns: subgrid;
		mix-blend-mode: multiply;

		& .breakout {
			border-inline-start: 1px dashed light-dark(var(--color-blue-green), var(--color-lime-green));
			border-inline-end: 1px dashed light-dark(var(--color-blue-green), var(--color-lime-green));
			grid-column: breakout;
			grid-row: 1;
		}

		& .content {
			border-inline-start: 1px dashed light-dark(var(--color-blue-green), var(--color-lime-green));
			border-inline-end: 1px dashed light-dark(var(--color-blue-green), var(--color-lime-green));
			grid-column: content;
			grid-row: 1;
		}
	}
}