/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 2. Remove default margin */
* {
	margin: 0;
	padding: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
	html {
		interpolate-size: allow-keywords;
	}
}

body {
	/* 4. Add accessible line-height */
	/* line-height: 1.5; */
	/* 5. Improve text rendering */
	-webkit-font-smoothing: antialiased;
	background-color: var(--bg-main);
	font-family: "GT America", sans-serif;
	font-weight: 400;
	transition: background-color 500ms ease-out;
}

.body-wrapper {
	max-width: 104rem;
	padding-left: var(--body-margin-sm);
	padding-right: var(--body-margin-sm);
	margin-inline: auto;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
	font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
	/* text-wrap: pretty; */
}
h1,
h2,
h3,
h4,
h5,
h6 {
	/* text-wrap: balance; */
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
	isolation: isolate;
}

:root {
	color-scheme: light dark;
}

:root {
	/* Variables */

	--bg-main: hsl(24, 11%, 91%);
	--bg-overlay: hsla(0deg, 0%, 0%, 60%);

	--bg-card-hover: linear-gradient(
		0deg,
		hsl(81deg 0% 96%) 40%,
		hsl(81deg 100% 80%)
	);
	/* --bg-card-darkgreen: hsl(82 56 9); */
	--bg-card-dark: hsl(82 24 8);
	--bg-footer: hsl(81 3 8);
	--logo-footer: hsl(60deg, 2%, 4%);
	--logo-nav-home: hsla(31, 32%, 87%, 1);

	/* Hero */
	--color-hero-title: hsl(233, 16%, 10%);
	--color-hero-subtitle: hsl(233, 16%, 10%);
	--cta-color-secondary: hsl(235, 22%, 10%);
	--cta-border-secondary: hsl(235, 22%, 10%);
	--color-tag: hsl(233, 16%, 10%);
	--profile-border: hsla(81deg 22% 10 / 1);
	--profile-bg: hsl(31, 1%, 100%);
	--chat-bubble-bg: hsl(228, 5%, 18%);
	--hero-border-color: hsla(224, 34%, 61%, 0.5);

	/* Plus icon */
	--svg-base64: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9InBhdGgtMS1vdXRzaWRlLTFfNzEyXzIxNzYiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgZmlsbD0iYmxhY2siPgo8cmVjdCBmaWxsPSJ3aGl0ZSIgd2lkdGg9IjIzIiBoZWlnaHQ9IjIzIi8+CjxwYXRoIGQ9Ik0xNi45MTQgMTAuMjM3VjEyLjYyOUgxMi43NzRWMTYuOTk5SDEwLjEyOVYxMi42MjlINi4wMTJWMTAuMjM3SDEwLjEyOVY2LjEySDEyLjc3NFYxMC4yMzdIMTYuOTE0WiIvPgo8L21hc2s+CjxwYXRoIGQ9Ik0xNi45MTQgMTAuMjM3VjEyLjYyOUgxMi43NzRWMTYuOTk5SDEwLjEyOVYxMi42MjlINi4wMTJWMTAuMjM3SDEwLjEyOVY2LjEySDEyLjc3NFYxMC4yMzdIMTYuOTE0WiIgZmlsbD0iIzFCMUYxNCIgc3R5bGU9ImZpbGw6IzFCMUYxNDtmaWxsOmNvbG9yKGRpc3BsYXktcDMgMC4xMDY1IDAuMTIxNiAwLjA3ODQpO2ZpbGwtb3BhY2l0eToxOyIvPgo8cGF0aCBkPSJNMTYuOTE0IDEwLjIzN0gyMi45MTRWNC4yMzdIMTYuOTE0VjEwLjIzN1pNMTYuOTE0IDEyLjYyOVYxOC42MjlIMjIuOTE0VjEyLjYyOUgxNi45MTRaTTEyLjc3NCAxMi42MjlWNi42MjlINi43NzRWMTIuNjI5SDEyLjc3NFpNMTIuNzc0IDE2Ljk5OVYyMi45OTlIMTguNzc0VjE2Ljk5OUgxMi43NzRaTTEwLjEyOSAxNi45OTlINC4xMjlWMjIuOTk5SDEwLjEyOVYxNi45OTlaTTEwLjEyOSAxMi42MjlIMTYuMTI5VjYuNjI5SDEwLjEyOVYxMi42MjlaTTYuMDEyIDEyLjYyOUgwLjAxMjAwMDFWMTguNjI5SDYuMDEyVjEyLjYyOVpNNi4wMTIgMTAuMjM3VjQuMjM3SDAuMDEyMDAwMVYxMC4yMzdINi4wMTJaTTEwLjEyOSAxMC4yMzdWMTYuMjM3SDE2LjEyOVYxMC4yMzdIMTAuMTI5Wk0xMC4xMjkgNi4xMlYwLjEySDQuMTI5VjYuMTJIMTAuMTI5Wk0xMi43NzQgNi4xMkgxOC43NzRWMC4xMkgxMi43NzRWNi4xMlpNMTIuNzc0IDEwLjIzN0g2Ljc3NFYxNi4yMzdIMTIuNzc0VjEwLjIzN1pNMTYuOTE0IDEwLjIzN0gxMC45MTRWMTIuNjI5SDE2LjkxNEgyMi45MTRWMTAuMjM3SDE2LjkxNFpNMTYuOTE0IDEyLjYyOVY2LjYyOUgxMi43NzRWMTIuNjI5VjE4LjYyOUgxNi45MTRWMTIuNjI5Wk0xMi43NzQgMTIuNjI5SDYuNzc0VjE2Ljk5OUgxMi43NzRIMTguNzc0VjEyLjYyOUgxMi43NzRaTTEyLjc3NCAxNi45OTlWMTAuOTk5SDEwLjEyOVYxNi45OTlWMjIuOTk5SDEyLjc3NFYxNi45OTlaTTEwLjEyOSAxNi45OTlIMTYuMTI5VjEyLjYyOUgxMC4xMjlINC4xMjlWMTYuOTk5SDEwLjEyOVpNMTAuMTI5IDEyLjYyOVY2LjYyOUg2LjAxMlYxMi42MjlWMTguNjI5SDEwLjEyOVYxMi42MjlaTTYuMDEyIDEyLjYyOUgxMi4wMTJWMTAuMjM3SDYuMDEySDAuMDEyMDAwMVYxMi42MjlINi4wMTJaTTYuMDEyIDEwLjIzN1YxNi4yMzdIMTAuMTI5VjEwLjIzN1Y0LjIzN0g2LjAxMlYxMC4yMzdaTTEwLjEyOSAxMC4yMzdIMTYuMTI5VjYuMTJIMTAuMTI5SDQuMTI5VjEwLjIzN0gxMC4xMjlaTTEwLjEyOSA2LjEyVjEyLjEySDEyLjc3NFY2LjEyVjAuMTJIMTAuMTI5VjYuMTJaTTEyLjc3NCA2LjEySDYuNzc0VjEwLjIzN0gxMi43NzRIMTguNzc0VjYuMTJIMTIuNzc0Wk0xMi43NzQgMTAuMjM3VjE2LjIzN0gxNi45MTRWMTAuMjM3VjQuMjM3SDEyLjc3NFYxMC4yMzdaIiBmaWxsPSIjRUJFOEU2IiBzdHlsZT0iZmlsbDojRUJFOEU2O2ZpbGw6Y29sb3IoZGlzcGxheS1wMyAwLjkyMTYgMC45MDk4IDAuOTAyMCk7ZmlsbC1vcGFjaXR5OjE7IiBtYXNrPSJ1cmwoI3BhdGgtMS1vdXRzaWRlLTFfNzEyXzIxNzYpIi8+Cjwvc3ZnPgo=");
	/* Navigation bar */
	--menu-active: hsla(82, 20%, 18%, 1);
	--nav-link--active: hsla(233, 16%, 10%, 1);
	--nav-link--inactive: hsl(240, 1%, 40%);
	--mobile-nav-link--active: hsl(82, 2%, 100%);
	--mobile-nav-link--inactive: hsl(240, 3%, 83%);
	--nav-link--hover: var(--nav-link--active);

	--menu-bg: hsla(24, 11%, 91%, 0.7);
	--menu-link--active: hsla(81deg, 100%, 78%, 1);

	--menu-inactive: hsl(82, 2%, 100%);

	--menu-button-inactive: hsla(81deg, 35%, 12%, 1);
	--theme-label: hsl(233, 18%, 10%);
	--theme-label--overlay: hsl(240, 7%, 100%);

	/* Main section */
	--main-links: hsl(223, 99%, 62%);
	--highlight-color: hsla(60, 92%, 85%, 0.6);
	--fade-start: hsla(24 11% 91% / 1);
	--fade-end: hsla(24 11% 91% / 0);
	--text-main: hsl(30deg, 35%, 12%);
	--text-main--blog: hsl(27, 15%, 12%);
	--text-secondary: hsl(30 2 49);
	--text-underline: hsl(81 100 78);
	--text-headlines: hsl(81 22 10);
	--pill-bg: hsl(30, 100%, 99%);
	--pill-border: hsl(30, 5%, 62%);
	--details-bg: hsl(80deg 100% 91%);
	--details-bg--hover: hsla(30 9% 86% / 1);
	--details-color: hsl(81, 1%, 33%);
	--details-color--open: hsl(81, 1%, 33%);
	--details-location-color: hsl(81, 1%, 25%);
	--details-location-color--open: hsl(60, 1%, 19%);
	--experience-details-color: hsl(81 35 12);
	--experience-border-color: hsl(0, 0%, 70%);
	--card-border-color: hsla(30 15% 25% / 0.5);
	--card-title: hsl(81deg, 5%, 15%);

	--text-status: hsl(220, 20%, 97%);
	--text-gray-on-white: hsl(81 0 30);
	--text-image-caption: hsl(30deg, 2%, 40%);
	--text-white-on-black: hsl(81 28 93);
	--text-project-link: hsl(81, 8%, 24%);
	--text-project-type: hsl(30deg, 2%, 49%);
	--text-tags: hsl(30, 1%, 29%);
	--blog-post-excerpt: hsl(30, 1%, 38%);
	--blog-link: hsl(235deg 99% 46%);

	--contact-title: hsl(212deg, 8%, 52%);
	--title-highlight: hsl(233deg, 16%, 10%);
	/* --title-highlight: hsl(235, 93%, 51%); */
	--contact-title--highlight: hsl(235deg 99% 46%);
	/* --icon-status: hsl(77 100 75); */
	--cta-primary: hsla(82 100% 79% / 1);
	--cta-hero-primary: hsl(235, 84%, 51%);
	--cta-hero-text: hsl(240, 100%, 99%);
	/* --cta-secondary: hsl(0, 0%, 58%); */
	--cta-fill-dark: hsl(81, 37%, 16%);
	--cta-text-light: hsla(81 100 98 / 1);
	--cta-text-dark: var(--text-headlines);
	--cta-border-dark: hsl(81deg 22 10 / 1);
	--border-mid: hsl(30 9% 74% / 1);
	--input-bg: hsl(30, 2%, 100%);
	--thumbnail-brightness: 88%;
	--text-other-projects: hsla(30 6% 32% / 1);
	/* Spacing */
	--body-margin-lg: 4.5rem;
	--body-margin-sm: 1rem;

	--visited-link: hsl(269, 90%, 45%);

	/* SVG */

	/* Nav > Logo */

	--logo-nav-bg: hsla(82, 20%, 18%, 1);

	/* Theme-toggle */
	--svg-toggle-fill: hsl(77, 100%, 51%);
	--svg-switch-fill: hsl(31, 18%, 10%);
	--svg-stroke-fill: hsl(233, 16%, 10%);
	--toggle-on: translateX(0);
	--toggle-off: translateX(-9px);
}

/* Dark mode */
:root.dark {
	--logo-nav-bg: hsl(240, 100%, 99%);
	--bg-main: hsl(233, 23%, 8%);
	--menu-bg: hsla(233, 23%, 8%, 0.65);
	--menu-button-inactive: var(--logo-nav-bg);
	--theme-label: hsl(228, 16%, 94%);
	--theme-label--overlay: hsl(240, 7%, 76%);
	--toggle-on: translateX(-9px);
	--toggle-off: translateX(0px);
	--svg-toggle-fill: hsl(240, 2%, 84%);
	--nav-link--active: hsl(240, 100%, 99%);
	--nav-link--inactive: hsla(235, 2%, 70%, 1);
	--mobile-nav-link--active: hsl(240, 100%, 99%);
	--mobile-nav-link--inactive: hsl(240, 3%, 74%);
	--nav-link--hover: var(--nav-link--active);
	--color-hero-title: hsl(228, 16%, 94%);
	--color-hero-subtitle: hsl(228, 16%, 94%);
	--color-tag: hsl(220, 2%, 69%);
	--profile-border: hsla(235deg 1% 100 / 1);
	--profile-bg: hsl(228, 9%, 89%);
	--chat-bubble-bg: hsl(237, 11%, 31%);
	--cta-color-secondary: hsl(228, 16%, 94%);
	--cta-border-secondary: hsl(228, 16%, 94%);
	--hero-border-color: hsl(228, 8%, 23%);
	--text-main: hsl(228, 16%, 94%);
	--text-headlines: hsl(228, 16%, 94%);
	--text-main--blog: hsl(228, 16%, 94%);
	--contact-title: hsl(212, 8%, 54%);
	--contact-title--highlight: hsl(215deg, 100%, 77%);
	--title-highlight: hsl(235, 52%, 96%);

	--highlight-color: hsla(218, 53%, 57%, 0.3);
	--fade-start: hsla(233, 23%, 8%, 1);
	--fade-end: hsla(233, 23%, 8%, 0);
	--pill-bg: hsl(236, 9%, 36%);
	--pill-border: hsl(231, 14%, 70%);
	--details-bg: hsl(228, 46%, 89%);
	--details-bg--hover: hsla(228deg, 22%, 21%, 1);
	--details-color: hsl(240, 2%, 63%);
	--details-color--open: hsl(240, 22%, 29%);
	--details-location-color: hsl(235deg 10% 84%);
	--details-location-color--open: hsl(235deg 38% 20%);
	--experience-details-color: hsl(240, 22%, 29%);
	--experience-border-color: hsla(233 4% 25% / 1);
	--bg-card-dark: hsl(235 15% 15% / 1);
	--bg-card-hover: linear-gradient(
		0deg,
		hsl(235deg 100% 96%) 40%,
		hsl(225deg 100% 80%)
	);
	--card-title: hsl(225deg, 5%, 20%);

	--visited-link: hsl(269, 87%, 69%);

	--blog-post-excerpt: hsl(235, 5%, 53%);
	--blog-link: hsl(215deg, 100%, 77%);
	--card-border-color: hsla(235 15% 25% / 0);
	--bg-footer: hsl(233deg 23% 6%);
	--logo-footer: hsl(233deg 23% 3%);
	--text-white-on-black: hsl(225deg 28 83);
	--text-project-link: hsl(235 2% 90% / 1);
	--text-project-type: hsl(240, 8%, 45%);
	--text-image-caption: hsl(235deg, 7%, 70%);
	--text-other-projects: hsl(227, 12%, 70%);
	--input-bg: hsl(233 12% 44% / 1);
	--text-tags: hsl(235deg 10% 60%);
	--thumbnail-brightness: 85%;
	--svg-base64: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9InBhdGgtMS1vdXRzaWRlLTFfNjkwXzEzNTgiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgZmlsbD0iYmxhY2siPgo8cmVjdCBmaWxsPSJ3aGl0ZSIgd2lkdGg9IjIzIiBoZWlnaHQ9IjIzIi8+CjxwYXRoIGQ9Ik0xNi45MzcgMTAuNDIxVjEyLjQyMkgxMi42MzZWMTYuOTUzSDEwLjM1OVYxMi40MjJINi4wODFWMTAuNDIxSDEwLjM1OVY2LjE2NkgxMi42MzZWMTAuNDIxSDE2LjkzN1oiLz4KPC9tYXNrPgo8cGF0aCBkPSJNMTYuOTM3IDEwLjQyMVYxMi40MjJIMTIuNjM2VjE2Ljk1M0gxMC4zNTlWMTIuNDIySDYuMDgxVjEwLjQyMUgxMC4zNTlWNi4xNjZIMTIuNjM2VjEwLjQyMUgxNi45MzdaIiBmaWxsPSIjRURFRUYyIiBzdHlsZT0iZmlsbDojRURFRUYyO2ZpbGw6Y29sb3IoZGlzcGxheS1wMyAwLjkyOTQgMC45MzMzIDAuOTQ5MCk7ZmlsbC1vcGFjaXR5OjE7Ii8+CjxwYXRoIGQ9Ik0xNi45MzcgMTAuNDIxSDIyLjkzN1Y0LjQyMUgxNi45MzdWMTAuNDIxWk0xNi45MzcgMTIuNDIyVjE4LjQyMkgyMi45MzdWMTIuNDIySDE2LjkzN1pNMTIuNjM2IDEyLjQyMlY2LjQyMkg2LjYzNlYxMi40MjJIMTIuNjM2Wk0xMi42MzYgMTYuOTUzVjIyLjk1M0gxOC42MzZWMTYuOTUzSDEyLjYzNlpNMTAuMzU5IDE2Ljk1M0g0LjM1OVYyMi45NTNIMTAuMzU5VjE2Ljk1M1pNMTAuMzU5IDEyLjQyMkgxNi4zNTlWNi40MjJIMTAuMzU5VjEyLjQyMlpNNi4wODEgMTIuNDIySDAuMDgwOTk5OVYxOC40MjJINi4wODFWMTIuNDIyWk02LjA4MSAxMC40MjFWNC40MjFIMC4wODA5OTk5VjEwLjQyMUg2LjA4MVpNMTAuMzU5IDEwLjQyMVYxNi40MjFIMTYuMzU5VjEwLjQyMUgxMC4zNTlaTTEwLjM1OSA2LjE2NlYwLjE2NTk5OUg0LjM1OVY2LjE2NkgxMC4zNTlaTTEyLjYzNiA2LjE2NkgxOC42MzZWMC4xNjU5OTlIMTIuNjM2VjYuMTY2Wk0xMi42MzYgMTAuNDIxSDYuNjM2VjE2LjQyMUgxMi42MzZWMTAuNDIxWk0xNi45MzcgMTAuNDIxSDEwLjkzN1YxMi40MjJIMTYuOTM3SDIyLjkzN1YxMC40MjFIMTYuOTM3Wk0xNi45MzcgMTIuNDIyVjYuNDIySDEyLjYzNlYxMi40MjJWMTguNDIySDE2LjkzN1YxMi40MjJaTTEyLjYzNiAxMi40MjJINi42MzZWMTYuOTUzSDEyLjYzNkgxOC42MzZWMTIuNDIySDEyLjYzNlpNMTIuNjM2IDE2Ljk1M1YxMC45NTNIMTAuMzU5VjE2Ljk1M1YyMi45NTNIMTIuNjM2VjE2Ljk1M1pNMTAuMzU5IDE2Ljk1M0gxNi4zNTlWMTIuNDIySDEwLjM1OUg0LjM1OVYxNi45NTNIMTAuMzU5Wk0xMC4zNTkgMTIuNDIyVjYuNDIySDYuMDgxVjEyLjQyMlYxOC40MjJIMTAuMzU5VjEyLjQyMlpNNi4wODEgMTIuNDIySDEyLjA4MVYxMC40MjFINi4wODFIMC4wODA5OTk5VjEyLjQyMkg2LjA4MVpNNi4wODEgMTAuNDIxVjE2LjQyMUgxMC4zNTlWMTAuNDIxVjQuNDIxSDYuMDgxVjEwLjQyMVpNMTAuMzU5IDEwLjQyMUgxNi4zNTlWNi4xNjZIMTAuMzU5SDQuMzU5VjEwLjQyMUgxMC4zNTlaTTEwLjM1OSA2LjE2NlYxMi4xNjZIMTIuNjM2VjYuMTY2VjAuMTY1OTk5SDEwLjM1OVY2LjE2NlpNMTIuNjM2IDYuMTY2SDYuNjM2VjEwLjQyMUgxMi42MzZIMTguNjM2VjYuMTY2SDEyLjYzNlpNMTIuNjM2IDEwLjQyMVYxNi40MjFIMTYuOTM3VjEwLjQyMVY0LjQyMUgxMi42MzZWMTAuNDIxWiIgZmlsbD0iIzBGMTAxOCIgc3R5bGU9ImZpbGw6IzBGMTAxODtmaWxsOmNvbG9yKGRpc3BsYXktcDMgMC4wNTg4IDAuMDYyNyAwLjA5NDEpO2ZpbGwtb3BhY2l0eToxOyIgbWFzaz0idXJsKCNwYXRoLTEtb3V0c2lkZS0xXzY5MF8xMzU4KSIvPgo8L3N2Zz4K");
}

/* @media (prefers-color-scheme: dark) {
	:root {
		--toggle-on: translateX(-9px);
		--toggle-off: translateX(0px);
		--bg-main: hsl(233, 23%, 8%);
	}

	.svg__switch {
		transform: var(--toggle-on);
	}
} */

/* Utility classes */

.center-h {
	margin-inline: auto;
}

.overflow-hidden {
	overflow: hidden;
}

.highlight {
	font-weight: inherit;
	background-color: var(--highlight-color);
	transition: background-color 500ms ease-out;
}
/* GT America */

@font-face {
	font-family: "GT America";
	src: url("../fonts/GTAmerica/GTAmerica-Thin.woff2") format("woff2");
	font-weight: 100;
	font-display: fallback;
}

@font-face {
	font-family: "GT America";
	src: url("../fonts/GTAmerica/GTAmerica-Light.woff2") format("woff2");
	font-weight: 300;
	font-display: fallback;
}

@font-face {
	font-family: "GT America";
	src: url("../fonts/GTAmerica/GTAmerica-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: fallback;
}

@font-face {
	font-family: "GT America";
	src: url("../fonts/GTAmerica/GTAmerica-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: fallback;
}

@font-face {
	font-family: "GT America";
	src: url("../fonts/GTAmerica/GTAmerica-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: fallback;
}

/* GT America Mono */

@font-face {
	font-family: "GT America Mono";
	src: url("../fonts/GTAmericaMono/GTAmericaMono-Light.woff2") format("woff2");
	font-weight: 300;
	font-display: fallback;
}

@font-face {
	font-family: "GT America Mono";
	src: url("../fonts/GTAmericaMono/GTAmericaMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: fallback;
}

@font-face {
	font-family: "GT America Mono";
	src: url("../fonts/GTAmericaMono/GTAmericaMono-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: fallback;
}

/* Nib Pro */

@font-face {
	font-family: "Nib Pro";
	src: url("../fonts/NibPro/NibPro-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: fallback;
}

@font-face {
	font-family: "Nib Pro";
	src: url("../fonts/NibPro/NibPro-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: fallback;
}

body.work {
	background-color: var(--bg-main);
}

.nav--lg {
	display: none;
	justify-content: center;
	align-items: center;
	flex: 1;
	/* margin-left: var(--body-margin-lg);
	margin-right: var(--body-margin-lg); */
	/* margin-top: 2.25rem; */
	/* color: var(--menu-inactive); */
	/* border-bottom: 1px solid hsl(0, 0%, 20%); */
	/* padding-bottom: 2.25rem; */
}

nav a {
	color: inherit;
}

.logo {
	height: 31px;
	width: 28px;
	transition: filter 300ms ease;
	will-change: auto;
	fill: var(--menu-active);
}

.nav--sm .logo {
	transition: transform 200ms ease, fill 300ms ease-out;
	fill: var(--menu-button-inactive);
}

.nav--sm .logo:hover {
	transform: scale(1.1);
}

.nav--lg .logo {
	fill: var(--logo-nav-bg);
	margin-bottom: 1px;
	width: 31px;
	height: 28px;
	transition: fill 300ms ease-out;
}

/* .nav--lg svg.logo path {
	fill: var(--menu-inactive);
}

.nav--lg svg.logo:hover path {
	fill: var(--menu-active);
} */

.nav--lg .menu {
	margin-left: 2.5rem;
	margin-right: auto;
	/* padding-left: 145px; */
	display: flex;
	list-style: none;
	gap: 1.75rem;
	font-weight: 500;
	letter-spacing: 0.6px;
}

.nav--lg .menu__link {
	/* letter-spacing: 0.8px; */
}

.menu__link {
	font-size: 1rem;
	text-transform: capitalize;
	text-decoration: none;
	color: var(--nav-link--inactive);
	font-family: "GT America", sans-serif;
	font-weight: 400;
	transition: background-color 200ms ease-out;
}

.menu__link.active {
	color: var(--nav-link--active);
	font-weight: 500;
}

.nav--lg .menu__list-item:not(.active) .menu__link {
	position: relative;
}

.nav--lg .menu__list-item:not(.active) .menu__link:hover {
	position: relative;
	color: var(--nav-link--hover);
}

/* Underline effect */
.nav--lg .menu__list-item:not(.active) .menu__link::after {
	content: "";
	position: absolute;
	left: 0;
	transform: translateX(0);
	bottom: -2.5px; /* space below the text */
	width: 0%;
	height: 1.5px;
	opacity: 1;
	background-color: var(--nav-link--active); /* your highlight color */
	transition: width 200ms ease;
}

/* Animate on hover */
.nav--lg .menu__list-item:not(.active) .menu__link:hover::after {
	width: 100%;
}

.date {
	font-family: "GT America Mono";
	font-size: 0.875rem;
	font-weight: 400;
	/* letter-spacing: -0.8px; */
}

/* Default (no blur) */
.menu__link {
	transition: filter 0.5s ease, color 300ms ease-out;
}

/* When hovering over the logo link, blur all menu links */
.nav--lg > a:hover ~ .menu .menu__link {
	filter: blur(1.5px);
}

/* But if you hover over a menu link itself, remove the blur */
.nav--lg .menu__link:hover {
	filter: none !important;
}

.nav--sm {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
	/* margin-left: var(--body-margin-sm);
	margin-right: var(--body-margin-sm); */
	margin-top: 1rem;
	color: var(--menu-inactive);
}

.nav--sm a {
	-webkit-tap-highlight-color: transparent;
}

.menu-button--mobile {
	height: 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	border: none;
	width: auto;
	background-color: transparent;
	cursor: pointer;
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;
	transition: transform 200ms ease;
	-webkit-tap-highlight-color: transparent;
}

.menu-button--mobile:hover {
	transform: scale(1.1);
}

.menu-button--mobile.active {
	position: fixed;
}

.menu-button__icon {
	/* left: 0px; */
	width: 24px;
	height: 2px;
	background-color: var(--menu-button-inactive);
	border-radius: 1px;
	transition: transform 300ms ease;
}

.menu-button--mobile.active .menu-button__icon {
	background-color: var(--menu-inactive);
}

.menu-button--mobile.active .bottom-bar {
	transform: translateY(-8px) rotate(45deg);
}

.menu-button--mobile.active .top-bar {
	transform: translateY(7px) rotate(-45deg);
}

.menu-button--mobile.active .middle-bar {
	visibility: hidden;
}

#overlay {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	width: 270px;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	visibility: hidden;
	padding-left: 2rem;
	padding-right: var(--body-margin-sm);
	background-color: var(--bg-overlay);
	backdrop-filter: blur(25px);
	transform: translateX(0.25rem);
	transition: transform 300ms ease, visibility 300ms ease allow-discrete,
		opacity 300ms ease allow-discrete;
	z-index: 2;
}

#overlay a {
	-webkit-tap-highlight-color: transparent;
}

#overlay.active {
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
	transition: transform 300ms ease, visibility 300ms ease allow-discrete,
		opacity 300ms ease allow-discrete;
	filter: drop-shadow(3px 0px 4px hsl(0deg 0% 20% / 0.3));
}

#overlay .menu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
	gap: 1rem;
	list-style-type: none;
}

#overlay .menu__link {
	font-size: 2.25rem;
	text-decoration: none;
	text-transform: capitalize;
	color: var(--mobile-nav-link--inactive);
	font-family: "GT America", sans-serif;
	font-weight: 200;
}

#overlay .active .menu__link {
	color: var(--menu-inactive);
	text-decoration: none;
	text-decoration-thickness: 10%;
	text-decoration-color: var(--menu-link--active);
	text-underline-offset: 10%;
	font-weight: 400;
}

#overlay .menu__list-item:not(.active) .menu__link {
	position: relative;
}

#overlay .menu__list-item:not(.active) .menu__link:hover {
	position: relative;
	color: var(--mobile-nav-link--active);
	opacity: 1;
}

/* Underline effect */
#overlay .menu__list-item:not(.active) .menu__link::after {
	content: "";
	position: absolute;
	left: 0;
	transform: translateX(0);
	bottom: -3px; /* space below the text */
	width: 0%;
	height: 1.75px;
	opacity: 1;
	background-color: var(--mobile-nav-link--active); /* your highlight color */
	transition: width 200ms ease;
}

/* Animate on hover */
#overlay .menu__list-item:not(.active) .menu__link:hover::after {
	width: 100%;
}

/* Filler in mobile menu flex container */
.filler {
	padding-top: 1.3rem;
	flex: 1;
}

.theme-toggle {
	display: flex;
	gap: 0.75rem;
	align-items: end;
	border: none;
	background: none;
	cursor: pointer;
	font-weight: 300;
	color: hsl(233, 16%, 10%);
	-webkit-tap-highlight-color: transparent;
}

.theme-toggle__label {
	font-size: 0.875rem;
	color: var(--theme-label);
	transition: color 200ms ease-out;
	display: inline-block;
	min-width: 7ch; /* enough to fit "Lights off" */
	text-align: left; /* or center */
}

#overlay .theme-toggle {
	flex-direction: row-reverse;
	align-items: end;
	gap: 1.25rem;
}

#overlay .theme-toggle__label {
	align-self: end;
	color: var(--theme-label--overlay);
}

#overlay .theme-toggle__svg {
	transform: scale(1.3);
}

.theme-toggle:hover .theme-toggle__label {
	text-decoration: underline;
	text-underline-offset: 30%;
	text-decoration-style: dotted;
	text-decoration-thickness: 8%;
}
.svg__toggle {
	fill: var(--svg-toggle-fill);
	stroke: var(--svg-stroke-fill);
}

.svg__switch {
	fill: var(--svg-switch-fill);
}

.svg__toggle,
.svg__switch {
	transition: transform 300ms ease-out, fill 300ms ease-out;
}

.svg__switch {
	/* transform-origin: top; */
	transform: var(--toggle-on);
}

.footer--menu {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 1;
	padding-bottom: 1rem;
	row-gap: 0.25rem;
}

.footer--menu .socials {
	font-size: 1rem;
	font-family: "GT America", sans-serif;
	font-weight: 400;
	list-style-type: none;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.socials__link {
	color: var(--menu-inactive);
	text-decoration: none;
	flex-basis: 40%;
	flex-grow: 1;
	flex-shrink: 1;
	letter-spacing: 0.5px;

	&:hover {
		opacity: 0.8;
	}
}

.copyE__footer {
	background: none;
	border: none;
	text-align: left;
}

.copyE__footer:hover {
	text-decoration: inherit;
	cursor: pointer;
}

#modal {
	display: none;
	position: fixed;
	bottom: 1.5rem;
	left: 1.5rem;
	background: var(--cta-hero-primary);
	color: #fff;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 1rem;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 10;
}

.hero-outline {
	position: relative;
	width: 100%;
	margin-top: 8.25rem;
	padding-block: 6rem;

	/* acts as spacing for the border-image */
	border: 1px solid var(--hero-border-color);
	display: contents;
	transition: border 500ms ease-out;
}

.hero-outline::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-image-slice: 23;
	border-image-width: 20px;
	border-image-outset: 10.5px;
	border-image-repeat: stretch;
	border-image-source: var(--svg-base64);
	transition: border 500ms ease-out;

	/* sits above content */
	z-index: 1;
	display: none;
}

.tags--top {
	position: absolute;
	top: -1.125rem;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.tags--bottom {
	position: absolute;
	bottom: -1.125rem;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.tags--left {
	position: absolute;
	left: -1.125rem;
	top: 0;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	writing-mode: sideways-lr;
	direction: rtl;
}

.tags--right {
	position: absolute;
	top: 0;
	right: -1.125rem;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	writing-mode: vertical-lr;
}

.tag {
	font-family: "GT America Mono";
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--color-tag);
	background: var(--bg-main);
	padding-inline: 1.125rem;
	padding-block: 0.5rem;
	border: 1px solid var(--hero-border-color);
	display: none;
	transition: background-color 500ms ease-out, border 500ms ease-out,
		500ms ease-out;
}

.hero-section {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: start;
	min-height: 18.5625px;
	margin-top: 7rem;
	margin-bottom: 8rem;
	gap: 1.25rem;
}

.hero-section__wrapper {
	position: relative;
	transform-origin: left;
	transform: scale(1);
}

.hero-section__profile {
	width: 5.25rem;
	height: 5.25rem;
	border-radius: 50%;
	border: 2px solid var(--profile-border);
	background-color: var(--profile-bg);
	transition: border 550ms ease-out, background-color 550ms ease-out;
	/* margin-bottom: 1rem; */
}

.hero-section__title {
	font-family: "Nib Pro";
	font-weight: 400;
	font-size: 2.25rem;
	line-height: 2.5rem;
	color: var(--color-hero-title);
	text-decoration: none;
	text-decoration-color: var(--text-underline);
	text-decoration-thickness: 5%;
	text-underline-offset: 10%;
	transition: font-size 200ms ease-out, line-height 200ms ease-out,
		color 200ms ease-out;
}

.hero-section__title span {
	font-family: "Nib Pro";
	font-style: italic;
	font-weight: 400;
}

.hero-section__subtitle {
	font-family: "GT America";
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.5rem;
	color: var(--color-hero-subtitle);
	margin-top: -0.75rem;
	margin-bottom: 1rem;
	transition: font-size 200ms ease-out, line-height 200ms ease-out,
		color 200ms ease-out;
}

.hero-section__cta-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 1rem;
}

.cta-buttons__button {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 1;
	min-width: 142px;
	/* flex-basis: 162px; */
	max-height: 49px;
	text-transform: uppercase;
	font-family: "GT America Mono";
	font-weight: 500;
	font-size: 0.875rem;
	border-radius: 40px;
	text-align: center;
	text-decoration: none;
	padding: 0.75rem 1.575rem;
	-webkit-tap-highlight-color: transparent;
}

.button {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 1;
	max-height: 49px;
	text-transform: uppercase;
	font-family: "GT America Mono";
	font-weight: 500;
	font-size: 0.875rem;
	border-radius: 11px;
	text-align: center;
	text-decoration: none;
	padding: 1.25rem 1.8125rem;
}

.button--outlined {
	max-width: 174px;
	background-color: transparent;
	color: var(--cta-color-secondary);
	border: 2px solid var(--cta-border-secondary);
}

.button--filled {
	background-color: var(--cta-fill-dark);
	color: var(--cta-text-light);
}

.cta-buttons__button.filled {
	background-color: var(--cta-hero-primary);
	color: var(--cta-hero-text);
	/* border: 1.5px solid var(--cta-border-dark); */

	&:hover {
		background-color: var(--cta-hero-text);
		color: var(--cta-hero-primary);
	}
}

.cta-buttons__button.outlined {
	background-color: transparent;
	color: var(--cta-color-secondary);
	border: 1.5px solid var(--cta-border-secondary);
	transition: border 200ms ease-out, color 200ms ease-out;

	&:hover {
		background-color: var(--cta-hero-text);
		color: var(--cta-hero-primary);
	}
}

.chat-bubble {
	position: absolute;
	top: 0rem;
	left: 4.3rem;
	color: var(--text-status);
	font-family: "GT America";
	font-weight: 500;
	font-size: 0.8125rem;
	max-width: none;
}

.chat-bubble-path {
	transition: fill 500ms ease-out;
}

.status-bubble__light {
	margin-top: 1px;
	margin-left: 1px;
}

.status-bubble__text {
	position: absolute;
	top: 0.9rem;
	left: 6rem;
	font-size: 0.8125rem;
	font-weight: 500;
	/* margin-left: 0.5rem; */
	color: var(--text-status);
	white-space: nowrap;
}

main .content {
	line-height: 1.5rem;
	font-weight: 300;
}

.content p {
	/* margin-bottom: 1.5rem; */
}

main .content h5 {
	font-weight: 400;
	font-size: 1rem;
}

.about-me__deck {
	color: var(--text-main);
	transition: color 200ms ease-out;
	font-weight: 300;
}

.introduction {
	color: var(--text-main);
	transition: color 200ms ease-out;
	break-inside: avoid-column;
	/* text-indent: 3rem; */
	/* initial-letter: 2; */
	/* font-size: inherit; */
}

.introduction:first-letter {
	font-size: 5rem;
	float: left;
	line-height: 5.5rem;
	margin-right: 0.6rem;
	margin-bottom: -1.25rem;
	font-family: "Nib Pro";
	font-weight: 400;
}

.experience {
	/* background-color: #c4c4c4; */
	border-bottom: 1px solid var(--experience-border-color);
	border-radius: 0;
	margin-bottom: 1rem;
	padding: 0.25rem;
	transition: 200ms background-color ease-out, border 500ms ease-out;
	/* background: hsl(81, 1%, 80%); */
	-webkit-tap-highlight-color: transparent;
	max-width: 60ch;
}

.experience:hover {
	background-color: var(--details-bg--hover);
}

.experience[open] .experience__summary {
	color: var(--details-color--open);
	transition: color 200ms ease-out;
}

.experience[open] .experience__location {
	color: var(--details-location-color--open);
	transition: color 200ms ease-out;
}

.experience[open] {
	background-color: var(--details-bg);
	border-radius: 12px;
	/* border: 1px solid var(--experience-border-color); */
	transition: background-color 200ms ease-out;
}

.experience p {
	margin-inline: 1rem;
	margin-bottom: 1rem;
}

.experience__location {
	font-weight: 400;
	color: var(--details-location-color);
	transition: color 200ms ease-out;
}

.experience__summary {
	list-style-position: outside;
	margin-left: 2rem;
	font-weight: 400;
	font-size: 1rem;
	padding: 0.75rem;
	color: var(--details-color);
	cursor: pointer;
	transition: color 200ms ease-out;
}

.experience__summary::marker {
	color: var(--details-color);
	transition: color 200ms ease-out;
}

.experience[open] .experience__summary::marker {
	color: var(--details-color--open);
}

.experience__details {
	color: var(--experience-details-color);
}

main .content a {
	text-decoration-color: var(--main-links);
	text-underline-offset: 17%;
	text-decoration-thickness: 5%;
	/* text-decoration-color: var(--blog-link); */
	color: inherit;
	/* background-color: var(--text-underline); */
	transition: color 300ms ease-out;
}

main .content a:hover {
	opacity: 0.7;
}

main h4 {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.75rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
	color: var(--text-headlines);
	transition: color 200ms ease-out;
}

.grid-container {
	display: grid;
	grid-template-columns: 1fr 3fr;
	/* overflow-wrap: anywhere; */
	row-gap: 2.75rem;
	margin-bottom: 10rem;
}

section h3 {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 500;
	color: var(--text-headlines);
	transition: color 200ms ease-out;
}

.svg__icon-arrow {
	display: inline;
	margin-right: 0.75rem;
}

.icon-arrow {
	fill: var(--text-headlines);
	transition: fill 200ms ease;
}

/* Grid layout for laptop */
.grid-container section {
	grid-column: 1 / -1;
}

.grid-container .content {
	grid-column: 1 / -1;
}

/* ———————————————————————————————— */

.about-me__skills {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	list-style-type: none;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

/* 
.about-me__skills li {
	flex-basis: auto;
	flex-shrink: 0;
} */

.skills-wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
	contain: inline-size;
	margin-top: 3.5rem;
}

.marquee {
	display: flex;
	will-change: transform;
}

.about-me__skills {
	display: flex;
	flex-wrap: nowrap;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	padding-right: 2rem;
	/* margin-right: 1rem; */
}

.about-me__skills li {
	flex: 0 0 auto;
	white-space: nowrap;
	background-color: var(--pill-bg);
	color: var(--text-main);
	padding-block: 0.25rem;
	padding-inline: 1.5rem;
	border-radius: 20px;
	transition: background-color 500ms ease-out, border 500ms ease-out,
		color 500ms ease-out;
	border: 0.5px solid var(--pill-border);
}

.fade-one {
	position: absolute;
	width: 7rem;
	height: 100%;
	background: linear-gradient(90deg, var(--fade-start), var(--fade-end));
	left: 0;
	top: 0;
	transition: background 200ms ease-out;
}

.fade-two {
	position: absolute;
	width: 5rem;
	height: 100%;
	background: linear-gradient(90deg, var(--fade-end), var(--fade-start));
	right: 0;
	top: 0;
	transition: background 200ms ease-out;
}

section.get-in-touch {
	margin-top: 4rem;
}

.card-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.25rem;
}
.card {
	position: relative;
	overflow: hidden; /* ensure the pseudo-element doesn’t leak out */
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	justify-content: space-between;
	/* flex-basis: auto; */
	aspect-ratio: 0.7;
	max-height: 30rem;
	max-width: 100%;
	/* flex-basis: 100%; */
	/* min-height: 20.375rem; */
	padding-inline: 1.75rem;
	padding-block: 2rem;
	border-radius: 10px;
	background-color: var(--bg-card-dark);
	transition: transform 300ms ease;
}

.card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bg-card-hover); /* your gradient */
	opacity: 0;
	transition: opacity 300ms ease, transform 300ms ease;
	z-index: 0; /* keep it behind the content */
}

.card:hover::before {
	opacity: 1;
}

.card > * {
	position: relative;
	z-index: 1; /* ensure text/images stay above gradient */
}

.card:hover,
.card:hover .card::before {
	transform: translateY(-0.25rem);
	color: var(--text-gray-on-white);
	/* background: var(--bg-card-hover); */
}

main .content .card__title {
	font-family: "Nib Pro", serif;
	font-weight: 400;
	font-size: 2rem;
	line-height: 2.5rem;
	color: var(--text-white-on-black);
	transition: color 200ms ease-out;
}

.card:hover .card__title {
	font-weight: 400;
	font-size: 2rem;
	line-height: 2.5rem;
	color: var(--card-title);
}

main .card__description {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--text-white-on-black);
	margin: 0;
	transition: color 200ms ease-out;
}

.card:hover .card__description {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--text-gray-on-white);
	margin: 0;
}

.hero-section__sunglasses {
	position: absolute;
	top: 1.6562rem;
	left: 1.375rem;
	width: 54%;
	height: auto;
	opacity: 1;
	transition: transform 480ms cubic-bezier(0, 0.66, 0.43, 1) 500ms,
		opacity 480ms cubic-bezier(0, 0.66, 0.43, 1) 500ms;
}

html.dark .hero-section__sunglasses {
	transform: translateY(-300%) rotate(-65deg);
	/* transform: translateY(-125%) translateX(-10%) rotate(-10deg); */
	opacity: 0;
	transition: transform 500ms cubic-bezier(1, -0.2, 0.43, 1) 500ms,
		opacity 500ms cubic-bezier(1, -0.2, 0.43, 1) 500ms;
}

/* .button-backtotop {
	opacity: 0;
	transform: translateX(100%);
	width: 107px;
	height: 52px;
	background-color: hsl(81, 17%, 97%);
	border-radius: 11px 0 0 11px;
	position: fixed;
	right: 0;
	bottom: 100px;
	padding-left: 13.6px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.875rem;
	font-family: "GT America";
	font-weight: 400;
	text-decoration: none;
	color: hsl(81 35 12);
	pointer-events: none; prevent interaction when hidden
	transition: opacity 300ms ease-out, transform 300ms ease-out;
	-webkit-tap-highlight-color: transparent;
	z-index: 1;
} */

/* Animated visible state */
.button-backtotop.visible {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
	&:hover {
		background-color: hsl(81, 17%, 100%);
	}
}

.button-backtotop svg {
	max-height: 32.67px;
	max-width: 24.67px;
}

.footer {
	position: relative;
	padding-bottom: var(--body-margin-sm);
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--bg-footer);
	z-index: 0;
	min-height: 39rem;
	transition: background-color 1000ms ease-out;
}

.footer__wrapper {
	display: flex;
	flex-direction: column;
	max-width: 104rem;
	margin-inline: auto;
	padding-inline: var(--body-margin-sm);
}

.footer__link-wrapper {
	display: flex;
	flex-direction: row;
	gap: 7rem;
	margin-bottom: 3rem;
}

.footer__link-wrapper ul {
	list-style-type: none;
}

.footer svg {
	margin-bottom: 3.5rem;
	max-width: revert;
	z-index: -1;
	transition: fill 500ms ease-out;
	fill: var(--logo-footer);
	transition: fill 1000ms ease-out;
}

.single-post .footer svg {
	fill: var(--logo-footer);
}

.footer h6 {
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.5rem;
	margin-bottom: 1.5rem;
	color: var(--text-white-on-black);
	transition: color 1000ms ease-out;
}

.addy {
	unicode-bidi: bidi-override;
	direction: rtl;
}

.footer a.menu__link,
.footer a.socials__link,
.footer .copyE__footer {
	font-family: "GT America";
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--text-white-on-black);
	text-transform: none;
	-webkit-tap-highlight-color: transparent;
	transition: 1000ms ease-out;

	&:hover {
		text-decoration: underline;
		opacity: 0.8;
	}
}

.footer__disclaimer {
	color: var(--text-white-on-black);
	line-height: 1.5rem;
	transition: color 1000ms ease-out;
}

/* Work page */

.work-title {
	font-family: "Nib Pro";
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 2rem;
	margin-top: 5rem;
	margin-bottom: 3rem;
	color: var(--contact-title);
	transition: color 500ms ease-out;
}

.work-title__highlight {
	color: var(--title-highlight);
	transition: color 500ms ease-out;
}

.project-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin-bottom: 5rem;
}

.project__thumbnail {
	aspect-ratio: 16 / 9;
	max-height: 100%;
	object-fit: cover;
	width: auto;
	height: auto;
	margin-bottom: 0.75rem;
	border-radius: 4px;
	transition: transform 800ms ease-in-out, filter 800ms ease-in-out;
	filter: brightness(var(--thumbnail-brightness));
}
.project:hover .project__thumbnail {
	transform: scale(1.01);
	filter: brightness(100%);
	transition: transform 400ms ease, filter 400ms ease;
	/* filter: drop-shadow(6px 6px 0 #fff); */
}

.project__title {
	margin-bottom: 0.6rem;
}

.project__link {
	font-weight: 500;
	color: var(--text-project-link);
	font-size: 1rem;
	line-height: 1rem;
	text-decoration: none;
	transition: color 700ms ease-out;
}

.project__link:hover {
	text-decoration: underline;
	/* text-underline-offset: 5%; */
}

.project__type {
	font-family: "GT America Mono";
	color: var(--text-project-type);
	font-size: 1rem;
	line-height: 1rem;
	text-transform: uppercase;
	transition: color 700ms ease-out;
	letter-spacing: 0.25px;
}

.pagination {
	margin-bottom: 15rem;
	text-align: center;
	font-size: 1rem;
}

.page-numbers:not(.current) {
	color: var(--text-underline);
}

.page-numbers {
	color: var(--text-white-on-black);
}

.work .footer svg {
	fill: var(--logo-footer);
}

/* Project page */

body.single-post {
	background-color: var(--bg-main);
}

/* body.single-post .nav--lg .menu__list-item:not(.active) .menu__link::after {
	background-color: var(--menu-link--active);
} */

.project-single {
	margin-top: 6rem;
}

.project-single__title {
	font-family: "Nib Pro";
	font-size: 1.8125rem;
	font-weight: 400;
	line-height: 2.25rem;
	color: var(--text-headlines);
	margin-bottom: 0.5rem;
	transition: color 200ms ease-out;
}

hr {
	border: none;
	background-color: hsla(224, 34%, 61%, 0.5);
	height: 1px;
	margin-bottom: 2rem;
}

.project-single__tags {
	font-family: "GT America Mono";
	font-size: 1rem;
	line-height: 1.375rem;
	color: var(--text-tags);
	text-transform: uppercase;
	margin-bottom: 3.75rem;
	transition: color 200ms ease-out;
	letter-spacing: 0.5px;
}

.project-single__description {
	font-size: 1.25rem;
	color: var(--text-main);
	line-height: 1.75rem;
	max-width: 650px;
	margin-bottom: 2rem;
	transition: color 200ms ease-out;
}

.project-single__content p {
	font-size: 1.125rem;
	margin-bottom: 2rem;
	line-height: 1.5rem;
	color: var(--text-main);
	transition: color 500ms ease-out;
}

.project-single__content h3 {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 400;
	color: var(--text-main);
	margin-bottom: 1.5rem;
	transition: color 500ms ease-out;
}

.project-single__content h4 {
	font-size: 1.375rem;
	line-height: 1.75rem;
	font-weight: 400;
	color: var(--text-main);
	margin-bottom: 1rem;
	transition: color 500ms ease-out;
}

.project-single__content h5,
.project-single__content h6 {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 400;
	color: var(--text-main);
	margin-bottom: 1rem;
	transition: color 500ms ease-out;
}

.project-single .wp-element-caption {
	font-size: 1rem;
	line-height: 1.5rem;
	max-width: 42rem;
	margin-bottom: 2.5rem;
	color: var(--text-image-caption);
	transition: color 500ms ease-out;
}

.single-post .wp-block-image img {
	display: block;
	margin-bottom: 1rem;
}

.project-featured-image {
	height: auto;
	margin-bottom: 1rem;
	margin-inline: auto;
}

.project-featured-image img {
	margin-bottom: 1rem;
}

.post-password-form {
	margin-block: 4rem;
	transition: color 200ms ease-out;
}

.post-password-form p:last-child {
	display: flex;
	flex-direction: column;
	flex: 1;
	max-width: 31.25rem;
}

label {
	width: 100%;
	display: inline-block !important;
}

#pwbox-411 {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 3.125rem;
	margin-bottom: 1.25rem;
	margin-top: 1.25rem;
	padding-inline: 1.25rem;
	font-size: 1.75rem;
	color: var(--text-main);
	border-radius: 30px;
	background-color: var(--input-bg);
	border: none;
	transition: background-color 500ms ease-out;
}

input[type="submit"] {
	height: 3.125rem;
	border: none;
	background-color: var(--cta-hero-primary);
	border-radius: 30px;
	font-family: "GT America Mono", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--cta-hero-text);
}

input[type="submit"]:hover {
	background-color: var(--cta-hero-text);
	color: var(--cta-hero-primary);
}

.post-password-form-invalid-password {
	text-align: center;
}

/* input[type="password"] {
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	border: 2px solid #e6e6e6;
	box-sizing: border-box;
	border-radius: 60px;
	padding: 15px;
	margin-bottom: 14px;
	font-size: 24px;
	font-family: "GT America", sans-serif;
}

input[value="Enter"] {
	height: 50px;
	width: 100%;
	background-color: #2e2e2e;
	color: #fff;
	border-radius: 60px;
	border-width: 0;
	font-family: "GT America", sans-serif;
} */

.other-projects {
	margin-top: 5rem;
	margin-bottom: 8rem;
	display: flex;
	justify-content: space-between;
}

.other-projects div:last-child {
	text-align: right;
}

.other-projects a {
	font-family: "GT America";
	font-weight: 500;
	color: var(--text-main);
	font-size: 1rem;
	line-height: 1.25rem;
	margin-bottom: 4rem;
	text-decoration: none;
	transition: color 200ms ease-out;
}

.other-projects a:hover {
	text-decoration: underline;
	text-decoration-thickness: 8%;
	text-underline-offset: 5%;
}

.other-projects__title {
	margin-top: 0.3rem;
	font-weight: 300;
	color: var(--text-other-projects);
	transition: color 200ms ease-out;
}

/* Blog page */

body.page-id-836 {
	/* background: #fff4ea; */
	background: var(--bg-main);
}

/* body.page-id-836 .nav--lg .menu__list-item:not(.active) .menu__link::after {
	background-color: var(--text-underline);
}

body.page-id-836 .nav--lg .menu__link {
	color: var(--menu-inactive);
}

body.page-id-836 .nav--lg .active .menu__link {
	color: var(--menu-active);
} */

body.page-id-836 .footer {
	background: var(--bg-footer);
	color: var(--text-white-on-black);
}

body.page-id-836 .footer .menu__link,
body.page-id-836 .footer .socials__link {
	color: var(--text-white-on-black);
}

.blog-grid {
	/* display: grid;
	grid-template-columns: repeat(3, 1fr); */
	gap: 1.25rem;
	margin-top: 5rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 2rem;
	text-align: center;
	row-gap: 4rem;
}

.blog-post .nav--lg {
	border-color: hsl(0 0 81);
}

.blog-post__thumbnail {
	height: auto;
	object-fit: cover;
	aspect-ratio: 16 / 9;
	margin-bottom: 1.25rem;
	transition: filter 300ms ease;
	border-radius: 6px;
}

.blog-post__title {
	text-wrap-style: balance;
}

.blog-post__link {
	font-family: "GT America";
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.75rem;
	color: var(--text-main);
	text-decoration: none;
	transition: color 500ms ease-out;
}

.blog-post:hover .blog-post__link {
	text-decoration: underline;
	text-decoration: underline solid var(--text-main);
	text-underline-offset: 7%;
	text-decoration-thickness: 7%;
}

.blog-post:hover .blog-post__thumbnail {
	filter: brightness(80%);
}

.blog-post__excerpt-link {
	text-decoration: inherit;
	color: inherit;
}

.blog-post__excerpt {
	font-family: "GT America";
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
	margin-top: 1rem;
	color: var(--blog-post-excerpt);
	transition: color 500ms ease-out;
}

/* Blog single */

.blog-single {
	margin-inline: auto;
	color: var(--text-main--blog);
}

.blog-single__header {
	margin-top: 5rem;
	color: var(--text-main--blog);
	margin-bottom: 3.5rem;
}

.blog-single__title {
	font-family: "GT America";
	font-weight: 400;
	font-size: 2rem;
	line-height: 2.5rem;
	margin-bottom: 2.5rem;
	text-wrap-style: balance;
}

.blog-single__excerpt {
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.75rem;
	margin-bottom: 2.25rem;
}

.blog-single__meta {
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5rem;
}

.blog-single__author {
	font-family: "GT America Mono";
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.blog-single__main-image {
	height: auto;
	margin-bottom: 4rem;
}

.blog-single__content {
	font-weight: 300;
	max-width: 43.75rem;
}

.blog-single__content a {
	color: var(--blog-link);
	text-underline-offset: 12%;
	text-decoration-thickness: 6%;
	/* transition: opacity 100ms ease-out; */
}

.blog-single__content a:hover {
	opacity: 0.7;
}

.blog-single__content p {
	font-size: 1.125rem;
	margin-bottom: 2rem;
	line-height: 1.5rem;
	transition: color 500ms ease-out;
}

.blog-single__content h3 {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 400;
	color: var(--text-main);
	margin-bottom: 1.5rem;
}

.blog-single__content h4 {
	font-size: 1.375rem;
	line-height: 1.75rem;
	font-weight: 400;
	color: var(--text-main);
	margin-bottom: 1rem;
}

.blog-single__content h5,
.blog-single__content h6 {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 400;
	color: var(--text-main);
	margin-bottom: 1rem;
}

.blog-single * {
	transition: color 500ms ease-out;
}

/* Contact page */

.page-template-page-contact {
	background-color: var(--bg-main);
}

.page-template-page-contact .footer {
	background: var(--bg-footer);
	color: var(--text-white-on-black);
}

.page-template-page-contact .footer a {
	color: var(--text-white-on-black);
}

.contact-content {
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.5rem;
	color: var(--text-main);
	margin-top: 5rem;
	transition: color 300ms ease-out;
}

.contact-content__title {
	font-family: "Nib Pro", sans-serif;
	font-weight: 400;
	font-size: 2.25rem;
	line-height: 2.375rem;
	color: var(--contact-title);
	text-wrap-style: balance;
	margin-bottom: 5rem;
}

.contact-content__highlight {
	color: var(--contact-title--highlight);
	font-style: italic;
	transition: color 300ms ease-out;
}

.contact-content__subtitle {
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.5rem;
	margin-bottom: 2.25rem;
	/* max-width: 55rem; */
	text-wrap-style: balance;
}

.contact-content__address {
	font-style: normal;
	margin-bottom: 6rem;
}

.contact-content__address * {
	transition: color 300ms ease-out;
}

.contact-content__address div {
	margin-bottom: 1.625rem;
}

.contact-content__address a {
	color: var(--blog-link);
	text-decoration: none;
}

.contact-content__address a:hover {
	text-decoration: underline;
	text-underline-offset: 10%;
	text-decoration-thickness: 5%;
}

main .content a:visited,
.contact-content a:visited {
	color: var(--visited-link);
	text-decoration-color: var(--visited-link);
}

#copyE {
	background: none;
	border: none;
	font-family: "GT America", sans-serif;
	color: var(--blog-link);
	cursor: pointer;
}

#copyE:hover {
	text-decoration: underline;
	text-underline-offset: 10%;
	text-decoration-thickness: 5%;
}

/* Breakpoints */

/* Card adjustments */

@media (min-width: 370px) {
	/* .card-wrapper {
		flex-wrap: nowrap;
		max-width: fit-content;
		justify-content: space-between;
		gap: 1.25rem;
		overflow: scroll;
	} */
	.card {
		min-width: 320px;
		/* flex-basis: 33%; */
		flex: 1;
		max-height: 350px;
		aspect-ratio: 0.75;
	}
}

/* md */
@media (min-width: 500px) {
	.hero-section {
		align-items: center;
		text-align: center;
		gap: 1.5rem;
	}

	.hero-section__wrapper {
		transition: transform 200ms ease-out;
		transform: scale(0.9);
	}

	.hero-section__title {
		font-size: 3.125rem;
		line-height: 3.375rem;
		/* transition: font-size 100ms ease; */
	}

	.hero-section__subtitle {
		font-size: 1.25rem;
	}

	.hero-section__cta-buttons {
		display: flex;
		flex-direction: row;
		gap: 1.1875rem;
		width: fit-content;
		justify-content: space-between;
		margin-top: 1rem;
		max-height: 2.75rem;
	}

	.cta-buttons__button {
		max-height: 2.75rem;
		min-width: 12.25rem;
	}

	.footer {
		min-height: 16rem;
	}

	.footer svg {
		position: absolute;
		max-height: 100%;
		left: 0;
		right: 0;
		top: 0;
		margin-left: auto;
		margin-right: auto;
	}

	.footer__wrapper {
		flex-direction: row;
		align-items: end;
		min-height: 16rem;
		padding-bottom: 1rem;
		justify-content: space-between;
	}

	.footer__disclaimer {
		text-align: right;
	}

	.footer__link-wrapper {
		gap: max(4rem, 12vw);
		margin-bottom: 0rem;
	}

	.blog-single__header {
		margin-top: 10rem;
		margin-bottom: 5rem;
		text-align: center;
	}

	.blog-single__title {
		font-weight: 400;
		font-size: 2.8125rem;
		line-height: 3.25rem;
		margin-bottom: 2.5rem;
	}
	.blog-single__excerpt {
		text-wrap-style: balance;
	}

	.blog-single__main-image {
		height: auto;
		margin-bottom: 7.8rem;
	}

	.blog-single__content p {
		font-size: 1.25rem;
		line-height: 1.75rem;
		margin-bottom: 1.5rem;
	}

	.blog-single__content h3 {
		font-size: 1.75rem;
		line-height: 2.25rem;
		margin-bottom: 1.5rem;
	}

	.blog-single__content h4 {
		font-size: 1.5rem;
		line-height: 1.875rem;
		margin-bottom: 1rem;
	}

	.blog-single__content h5,
	h6 {
		font-size: 1.375rem;
		line-height: 1.75rem;
		margin-bottom: 1rem;
	}

	.post-password-form {
		margin-block: 8rem;
	}

	.project-single__content p {
		font-size: 1.25rem;
		line-height: 1.75rem;
		margin-bottom: 1.5rem;
		max-width: 42rem;
	}

	.project-single__content h3 {
		font-size: 1.75rem;
		line-height: 2.25rem;
		margin-bottom: 1.5rem;
	}

	.project-single .wp-element-caption {
		font-size: 1.125rem;
		line-height: 1.625rem;
		max-width: 42rem;
		margin-bottom: 3.5rem;
	}
	.post-password-form p:nth-last-child(2) {
		max-width: 60rem;
		margin-inline: auto;
		text-align: center;
	}

	.post-password-form p:last-child {
		margin-inline: auto;
	}

	/* input[type="password"] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		width: 252px;
		height: 50px;
		background-color: #ffffff;
		border: 2px solid #e6e6e6;
		box-sizing: border-box;
		border-radius: 60px;
		padding: 15px;
		font-size: 24px;
		font-family: "Mercury_display_semibold";
	}

	input[value="Enter"] {
		height: 50px;
		width: 102px;
		background-color: #2e2e2e;
		color: #fff;
		border-radius: 60px;
		border-width: 0;
	} */
}

/* Grid adjustments */

.blog-grid {
	row-gap: 3rem;
}

@media (min-width: 600px) {
	.hero-section__wrapper {
		transform: initial;
	}
}

/* Adjustments */
@media (min-width: 710px) {
	.hero-section__title {
		font-size: 3.5rem;
		line-height: 3.75rem;
	}

	.hero-section__subtitle {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}

	.hero-section__cta-buttons {
		margin-top: 0.75rem;
	}

	main p {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	.about-me__deck {
		font-weight: 200;
		font-size: 1.5rem;
		line-height: 2rem;
	}

	.introduction:first-letter {
		font-size: 6rem;
		line-height: 6.25rem;
		margin-right: 0.5rem;
		margin-bottom: -1.25rem;
	}

	main h3,
	main .content h4,
	main .content h5 {
		font-size: 1.125rem;
	}

	main .content .experience__summary {
		font-weight: 300;
		font-size: 1.125rem;
	}

	.about-me__skills {
		font-size: 1rem;
	}

	.work-title {
		margin-top: 10rem;
		font-size: 2.5rem;
		line-height: 3rem;
		margin-bottom: 5.5rem;
	}

	.project-grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 1rem;
	}

	.project-single__title {
		font-size: 2.875rem;
		line-height: 3.5rem;
	}

	.post-password-form p:last-child {
		max-width: 22rem;
	}
	.blog-single {
		max-width: 58rem;
	}

	.blog-single__content {
		margin-inline: auto;
		max-width: 43.25rem;
	}
}

/* lg */
@media (min-width: 800px) {
	.body-wrapper {
		padding-left: var(--body-margin-lg);
		padding-right: var(--body-margin-lg);
	}

	.nav--sm {
		display: none;
	}
	.nav-wrapper {
		top: 0;
		left: 0;
		right: 0;
		position: fixed;
		/* max-width: 104rem; */
		/* margin-inline: auto; */
		z-index: 3;
		background: var(--menu-bg);
		backdrop-filter: blur(25px);
		transition: background-color 500ms ease-out;
	}

	.nav--lg {
		display: flex;
		padding-block: 0.75rem;
		padding-inline: var(--body-margin-lg);
		/* padding-inline: var(--body-margin-sm); */
		/* background: var(--menu-bg); */
		height: 5rem;
		margin-inline: auto;
		max-width: 104rem;
		/* box-shadow: 0 1px 8px hsla(81deg, 40%, 40%, 0.1); */
		transition: background-color 500ms ease-out;
	}

	.logo {
		width: initial;
		height: initial;
	}

	.date {
		display: block;
	}

	.menu-button--mobile {
		display: none;
	}

	#overlay {
		display: none;
	}

	.hero-section {
		margin-top: 14.3rem;
	}

	.grid-container {
		grid-template-columns: 1fr 3fr;
		row-gap: 5rem;
	}

	.grid-container section {
		grid-column: 1 / -1;
	}

	.grid-container .content {
		grid-column: 2 / -1;
	}

	.about-me__deck {
		font-weight: 200;
		font-size: 2.25rem;
		line-height: 2.75rem;
	}

	main .content a {
		font: inherit;
	}

	.work-title {
		margin-top: 20rem;
		margin-bottom: 4rem;
	}

	.project-grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5rem;
	}

	.project-single {
		margin-top: 19rem;
	}

	.other-projects a {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}
	.blog-grid {
		margin-top: 14rem;
	}

	.blog-single__header {
		margin-top: 14rem;
	}

	.blog-single__title {
		font-weight: 400;
		font-size: 3.5625rem;
		line-height: 4rem;
		margin-bottom: 2rem;
	}

	.blog-single__excerpt {
		font-size: 1.5625rem;
		line-height: 2.125rem;
		margin-bottom: 2.75rem;
	}

	.blog-single__meta {
		font-size: 1.125rem;
		font-weight: 300;
		line-height: 1.75rem;
	}

	.blog-single__author {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	.blog-single__main-image {
		height: auto;
		margin-bottom: 7rem;
	}

	.blog-single__content {
		font-weight: 300;
	}

	.blog-single__content p {
		font-size: 1.25rem;
		line-height: 1.875rem;
		margin-bottom: 2rem;
	}

	.blog-single__content h3 {
		font-size: 1.75rem;
		line-height: 2.25rem;
	}

	.blog-single__content h4 {
		font-size: 1.5rem;
		line-height: 2.125rem;
	}

	.blog-single__content h5,
	h6 {
		font-size: 1.375rem;
		line-height: 2.125rem;
	}

	.contact-content {
		margin-top: 15rem;
		font-size: 1.125rem;
		line-height: 1.5rem;
	}

	.contact-content__title {
		font-size: 2.875rem;
		line-height: 3rem;
	}

	.contact-content__subtitle {
		margin-bottom: 1.625rem;
		font-size: 1.25rem;
		line-height: 1.625rem;
	}

	.footer__wrapper {
		padding-inline: var(--body-margin-lg);
	}
}

@media (min-width: 827px) {
	.hero-outline {
		display: block;
		margin-bottom: 14rem;
	}

	.hero-outline::after {
		display: block;
	}

	.tag {
		display: block;
	}

	.hero-section {
		margin-top: 0rem;
		margin-bottom: 0;
		gap: 1.5rem;
	}

	.hero-section__cta-buttons {
		margin-top: 1.5rem;
	}
}

@media (min-width: 1250px) {
	.hero-section {
		margin-top: 0rem;
		margin-bottom: 0;
		gap: 2.25rem;
	}
	.hero-section__title {
		font-size: 4rem;
		line-height: 4.5rem;
		margin-top: -0.25rem;
		/* text-wrap: balance; */
	}

	.hero-section__subtitle {
		font-size: 1.4375rem;
		line-height: 2rem;
		margin-top: -1.875rem;
	}

	.hero-section__cta-buttons {
		margin-top: 0;
	}

	.cta-buttons__button {
		min-width: 12.5rem;
		/* padding: 1.25rem 1.875rem; */
	}

	.about-me__deck {
		font-weight: 200;
		font-size: 2.25rem;
		line-height: 2.75rem;
	}

	main .introduction {
		columns: 2;
		column-gap: 2rem;
	}

	.card {
		min-width: 400px;
	}

	.work-title {
		margin-top: 22rem;
		font-size: 3.5625rem;
		line-height: 4.25rem;
	}
	.project-grid {
		column-gap: 2rem;
	}

	.project-single__title {
		font-size: 6rem;
		line-height: 6.5rem;
	}

	.project-single__description {
		font-size: 1.4375rem;
		line-height: 2rem;
		margin-bottom: 2rem;
	}

	.project-single__tags {
		margin-bottom: 5rem;
	}

	.blog-post__link {
		/* font-size: 1.25rem;
		line-height: 1.75rem; */
	}
}

/* XL */
@media (min-width: 1400px) {
	/* Keep cards in two columns on big screens */
	.card {
		min-width: 405px;
	}
}

.wp-block-embed iframe,
.wp-block-embed__wrapper iframe {
	width: 100%;
	max-width: 100%;
	height: auto; /* height scales proportionally */
}

.wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
}

.wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (min-width: 1664px) {
	.body-wrapper {
		/* padding-inline: 0; */
	}
}