@font-face {
	font-family: 'Orange Squash';
	src: url('./orange_squash-webfont.woff2');
}

@font-face {
	font-family: 'Nunito Sans';
	src: url('./nunito-sans-var.woff2');
}


@property --g1 {
	syntax: '<color>';
	inherits: false;
	initial-value: oklch(100% 0 0);
}
@property --g2 {
	syntax: '<color>';
	inherits: false;
	initial-value: oklch(100% 0 0);
}
@property --ga {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

:root {
	--font-1: 'Orange Squash', Georgia, 'Times New Roman', Times, serif;
	--font-2: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--border-radius: 10em;
	--border-radius2: 1em;
	--timing: 0.65s;
	--delay: 0.25s;
	--easing: cubic-bezier(0.4, 0, 0.15, 1);
	--accent-blob-tx: 0vw;
	--accent-blob-ty: 0vh;
	--accent-blob-tr: 0deg;
	--blob-aspect-ratio: 1.75;

	/* PRIMITIVES */





	--theme1a: 0.21 0.05 174;
	--theme1b: 0.3975 0.045 194;
	--theme1c: 0.585 0.04 214;
	--theme1d: 0.7725 0.035 234;
	--theme1e: 0.96 0.03 254;
	--theme2a: 0.21 0.09 266;
	--theme2b: 0.3975 0.085 286;
	--theme2c: 0.585 0.08 306;
	--theme2d: 0.7725 0.075 326;
	--theme2e: 0.96 0.07 346;
	--theme3a: 0.21 0.13 1;
	--theme3b: 0.3975 0.125 21;
	--theme3c: 0.585 0.12 41;
	--theme3d: 0.7725 0.115 61;
	--theme3e: 0.96 0.11 81;


	--transformers-c1: 0% 0 0;
	--transformers-c2: 63% 0.25 23;
	--transformers-c3: 27% 0 0;
	--peppapig-c1: 78% 0.10 255;
	--peppapig-c2: 33% 0.15 281;
	--peppapig-c3: 86% 0.07 349;
	--playdoh-c1: 88% 0.2 96;
	--playdoh-c2: 0% 0 0;
	--playdoh-c3: 100% 0 0;
	--wellroundedchild-c1: 83% 0 230;
	--wellroundedchild-c2: 29% 0.1 251;
	--wellroundedchild-c3: 100% 0 0;
	--otherhasbro-c1: 35% 0.09 253;
	--otherhasbro-c2: 100% 0.0 271;
	--otherhasbro-c3: 48% 0.1 216;
	--atk-c1: 96% 0.001 44;
	--atk-c2: 0% 0 0;
	--atk-c3: 100% 0 0;

	/* THEMES */
	--home-bg: var(--theme1a);
	--home-fg: var(--theme3e);
	--home-accent1: var(--theme3d);
	--home-accent2: var(--theme2b);
	--home-accent3: var(--theme1b);
	--home-blob-tx--desktop: -60vw;
	--home-blob-tx--mobile: -60vw;
	--home-blob-ty--desktop: -20vh;
	--home-blob-ty--mobile: -20vh;
	--home-blob-tr: -45deg;
	--home-top-offset: 25vh;

	--work-bg: var(--theme2a);
	--work-fg: var(--theme1e);
	--work-accent1: var(--theme3e);
	--work-accent2: var(--theme1a);
	--work-accent3: var(--theme2b);
	--work-blob-tx--desktop: -160vw;
	--work-blob-tx--mobile: -140vw;
	--work-blob-ty--desktop: -290vh;
	--work-blob-ty--mobile: -150vh;
	--work-blob-tr: -140deg;
	--work-top-offset: 25vh;

	--contact-bg: var(--theme3a);
	--contact-fg: var(--theme2e);
	--contact-accent1: var(--theme1e);
	--contact-accent2: var(--theme2b);
	--contact-accent3: var(--theme3b);
	--contact-blob-tx--desktop: -10vw;
	--contact-blob-tx--mobile: -10vw;
	--contact-blob-ty--desktop: -220vh;
	--contact-blob-ty--mobile: -120vh;
	--contact-blob-tr: 0;
	--contact-top-offset: 25vh;

	--bg: 1 0 0
	--fg: 0 0 0
	--fg-accent: 0 0 0;
	--bg-accent: 0 0 0;
	--size-100: 100vw;
	--size-50: 50vw;
	--size-25: 25vw;
	--size-10: 10vmin;
	--size-5: 5vw;
	--size-1: 1vw;
	--page-padding: var(--size-5);
	--page-width: calc(100vw - (var(--page-padding) * 2));
	--page-width-off: calc(var(--page-width) * -1);
	--page-top-margin: 20vmin;
	--page-top-offset: 0;
	--h1-size-desktop: clamp(3em, 10vw, 10vw);
	--h1-line-height: 1.2;
	--blob-size--desktop: 50vw;
	--blob-size--mobile: 60vw;
	--text-size-desktop: clamp(0.5em, 3vmax, 2em);
	--text-line-height: 2;
	--link-size-desktop: clamp(0.5em, 1vmax, 2em);
	--link-size-mobile: 3vmin;
	--link-padding: 1em 2em;
	--project-padding: var(--size-5);
	--fx-blur: blur(40px);

	--font-2-normal-width: 200;
	--font-2-normal-weight: 500;
	--font-2-normal: 'wght' var(--font-2-normal-weight), 'wdth' var(--font-2-normal-width);
	--font-2-bold-width: 400;
	--font-2-bold-weight: 700;
	--font-2-bold: 'wght' var(--font-2-bold-weight), 'wdth' var(--font-2-bold-width);

	/* Base sizes */
	font-family: var(--font-1);
	font-size: 150%;
	font-weight: 300;
	line-height: 1.4;
}

.font-accent {
	font-family: var(--font-2);
	font-variation-settings: var(--font-2-normal);
	text-transform: uppercase;
}

.font-accent-bold {
	font-family: var(--font-2);
	font-variation-settings: var(--font-2-bold);
	text-transform: uppercase;
}

body, h1, h2, h3, p, ul, blockquote, figure {
	margin: 0;
	padding: 0;
}

svg {
	display: block;
	width: 100%;
}

body {
	background-color: oklch(var(--bg));
	color: oklch(var(--fg));
	width: var(--size-100);
	transition-property: translate, background-color;
}

body.nav-active main {
	translate: 0 5vh;
	filter: brightness(0.75);
}

main {
	background-color: oklch(var(--bg));
}

h1 {
	color: oklch(var(--fg-accent));
	font-size: var(--h1-size-desktop);
	line-height: var(--h1-line-height);
	margin-bottom: var(--size-5);
}

h2, h3 {
	font-size: 200%;
	margin: 0;
	padding: 0;
	line-height: 1.2;
}


p {
	font-size: inherit;
	line-height: 1.5;
}

.lg-text {
	font-size: clamp(1em, 2.5vw, 2em);
	line-height: 1.5;
}

button {
	cursor: pointer;
}

@media screen and (min-width: 900px) {
	p {
		max-width: 70vw;
	}
}

p + p {
	margin-top: var(--size-5);
}


/* Effects */
.fx.grad {
	--ga: 30deg;
	--g1: oklch(var(--fg-accent));
	--g2: oklch(var(--theme1e));
	background-image: linear-gradient(var(--ga) in oklch, var(--g1) 0%, var(--g2) 100%);
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font-style: normal;
}

.fx.blur-in {
	transition-property: filter, opacity;
	transition-delay: 2s;
	opacity: 0;
	filter: var(--fx-blur);
}

.fx.blur-in.active {
	opacity: 1;
	filter: none;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	width: 100vw;
	padding: 1em var(--page-padding);
	box-sizing: border-box;
	z-index: 10;
}

@media screen and (max-width: 1900px) {
	header {
		flex-direction: column;
	}

	.header-container {
		display: flex;
		flex: 1;
		justify-content: space-between;
		width: 100%;
	}
}

#logo {
	aspect-ratio: 6;
	width: 20vw;
}

.btn-nav {
	display: none;
}

.btn-nav svg {
	aspect-ratio: 1;
}

nav ul {
	list-style-type: none;
	gap: 1em;
}

nav li {
	position: relative;
}

nav a, form button {
	border-radius: var(--border-radius);
	position: relative;
	display: block;
	text-decoration: none;
	font-size: var(--link-size-desktop);
	padding: var(--link-padding);
	line-height: 1;
}

nav a span {
	text-wrap: nowrap;
}


@media screen and (max-width: 1900px) {
	#logo {
		width: 100%;
	}

	header nav {
		display: none;
	}

	nav ul {
		gap: 3vmax;
	}

	header nav a {
		font-size: var(--link-size-mobile);
	}

	.btn-nav {
		display: block;
		appearance: none;
		background: none;
		border: none;
		color: var(--fg);
		width: 3em;
		aspect-ratio: 1;
		z-index: 1;
	}

	header nav {
		width: 100%;
		opacity: 0;
		overflow: hidden;
		display: none;
		padding: 5vh 0;
		translate: 0 -120%;
		transition-behavior: allow-discrete;
	}

	header nav ul {
		flex-direction: column;
		align-items: center;
	}

	header nav.active {
		display: block;
		opacity: 1;
		translate: 0 0;
	}

	@starting-style {
		header nav.active {
			opacity: 0;
			translate: 0 -120%;
		}

	}
}

/* Header background blur */
header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	transition-property: height;
	mask-image: linear-gradient(oklch(var(--bg)) 60%, oklch(var(--bg) / 0));
	backdrop-filter: var(--fx-blur);
	z-index: -2;
}

header.is-scroll::before,
header.is-scroll::after,
header:has(#header-nav.active)::before,
header:has(#header-nav.active)::after {
	height: 140%;
}

main {
	width: 100%;
	margin-bottom: 50dvh;
	padding: 0 var(--size-5) var(--size-5);
	position: relative;
	box-sizing: border-box;
	min-height: 100dvh;
}

.bg {
	background-image: linear-gradient(oklch(var(--bg-accent2)), oklch(var(--bg-accent2) / 0));
	mask: url('../images/md-logo-vert.svg');
	position: absolute;
	top: 0;
	left: 0;
	mask-position: var(--accent-blob-tx) var(--accent-blob-ty);
	transition-property: mask-position;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	mask-size: 250vw;
	z-index: 0;
	mix-blend-mode: color-dodge;
}

ul {
	display: flex;
}

p + ul {
	flex-direction: column;
	margin: 1em;
}

a {
	color: inherit;
}

/*
p a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	transition-property: --g1, --g2, --ga;
	transition-duration: calc(var(--timing) / 2);
	transition-timing-function: var(--easing);
}

p a::after {
	--ga: 30deg;
	--g1: oklch(var(--fg-accent));
	--g2: oklch(var(--theme4));
	content: '';
	position: absolute;
	width: 100%;
	height: .1em;
	bottom: .25em;
	left: 0;
	mix-blend-mode: difference;
	background-image: linear-gradient(var(--ga) in oklch, var(--g1) 0%, var(--g2) 100%);
	transition-property: height, --g1, --g2, --ga;
	transition-duration: calc(var(--timing) / 3);
	transition-timing-function: var(--easing);

}

p a:focus,
p a:hover {
	--ga: 210deg;
	--g1: oklch(var(--fg));
	--g2: oklch(var(--fg-accent));
}

p a:focus:after,
p a:hover:after {
	--ga: 210deg;
	--g1: oklch(var(--fg-accent));
	--g2: oklch(var(--theme4));
	height: 1.5em;
}
*/

blockquote {
	font-size: inherit;
}

figcaption {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}
cite {
	/* font-family: var(--font-2); */
	/* text-transform: uppercase; */
	font-size: 1em;
	line-height: 1;
	display: block;
	max-width: 40vw;
	text-align: right;
}

nav a[aria-current=true] {
	pointer-events: none;
}

nav a[aria-current=true] {
	background-color: oklch(var(--fg));
	color: oklch(var(--bg));
}

nav li:has(a[href="/home"]):before {
	rotate: var(--home-blob-tr);
	background-color: oklch(var(--home-accent2));
}

nav li:has(a[href="/work"]):before {
	rotate: var(--work-blob-tr);
	background-color: oklch(var(--work-accent2));
}

nav li:has(a[href="/contact"]):before {
	rotate: var(--contact-blob-tr);
	background-color: oklch(var(--contact-accent2));
}



section {
	position: relative;
}

.content {
	display: flex;
	margin-top: 5vh;
}

@media screen and (max-width: 900px) {
	.content {
		flex-direction: column;
	}
}

footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	min-height: 50dvh;
	background-color: oklch(20% 0 0);
	color: oklch(var(--theme7));
	padding: var(--size-5);
	display: flex;
	gap: var(--size-5);
	z-index: -1;
	box-sizing: border-box;
	flex-wrap: wrap;
}

footer::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 35vh;
	height: 80%;
	background-image: url('../images/pic-bw-cut.png');
	background-position: top right;
	background-size: cover;
	background-repeat: no-repeat;
}

footer .logo {
	fill: currentColor;
	aspect-ratio: 6/10;
	flex: 0 1 300px;
	height: 35vh;
}

footer .footer-blurb {
	flex: 1 0;
	align-self: center;
}

@media screen and (max-width:900px) {
	footer .logo {
		display: none;
	}

	footer .footer-blurb {
		align-self: unset;
	}

	footer::after {
		height: 65%;
	}
}

footer .footer-blurb ul {
	flex-direction: column;
	list-style-type: none;
	margin: 0;
}

form button {
	appearance: none;
	border: none;
	border-radius: var(--border-radius);
	background-color: oklch(var(--fg) / 10%);
	color: inherit;
	display: flex;
	gap: 0;
	font-size: inherit;
	align-items: center;
	justify-content: center;
	transition: gap var(--timing) var(--easing) 150ms,
		scale var(--timing) var(--easing),
		background-color calc(var(--timing) / 2) var(--easing);
}

.page nav {
	margin: var(--size-10) 0;
}

.page-list ul {
	display: flex;
	flex-direction: row;
	gap: var(--size-5);
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.page-list ul a {
	border-radius: var(--border-radius);
	background-color: oklch(var(--fg) / 10%);
	display: flex;
	gap: 0;
	font-size: inherit;
	align-items: center;
	justify-content: center;
	transition: gap var(--timing) var(--easing) 150ms,
		scale var(--timing) var(--easing),
		background-color calc(var(--timing) / 2) var(--easing);
}

.page-list ul a[aria-current="true"] {
	display: none;
}

.page-list ul a:focus,
.page-list ul a:hover {
	gap: 1em;
	background-color: oklch(var(--fg));
	color: oklch(var(--bg));
	scale: 1.1;
}

.arrow {
	width: 0;
	aspect-ratio: 9;
	stroke-dasharray: 0 200;
	stroke-dashoffset: 1;
	display: none;
	stroke: oklch(var(--bg-accent2));
	transition: display var(--timing) var(--easing) 0s allow-discrete,
		width var(--timing) var(--easing) 150ms,
		stroke-dasharray var(--timing) var(--easing) 0ms;
}

a:focus .arrow,
a:hover .arrow {
	display: block;
	width: 150px;
	stroke-dasharray: 100 100;
	transition: display var(--timing) var(--easing) 0s allow-discrete,
		width var(--timing) var(--easing) 0ms,
		stroke-dasharray var(--timing) var(--easing) 150ms;
	/* transition-property: stroke-dasharray, width; */
	/* transition-delay: 250ms, 0s; */
}

@starting-style {
	.btn-nav[aria-expanded=true] + nav {
		translate: 0 -120%;
	}

	a:hover .arrow,
	a:hover .arrow {
		width: 0;
		stroke-dasharray: 0 200;
	}
}


.squiggle {
	position: relative;
	left: -0.25em;
	width: 100%;
	aspect-ratio: 7;
	stroke: oklch(var(--bg-accent2));
	stroke-dasharray: 0 200;
	stroke-dashoffset: 10 200;
	/* transition: all var(--timing) var(--easing) var(--timing); */
	z-index: -1;
}

.squiggle.active {
	stroke-dasharray: 120 200;
}


.page {
	display: none;
	position: absolute;
	top: 0;
	width: 100%;
	opacity: 0;
}

/* NOTE: Did not work when integrated with .t */
@media screen and (prefers-reduced-motion: no-preference) {
	.page {
		transition: display var(--timing) var(--easing) allow-discrete,
		opacity var(--timing) var(--easing),
		position var(--timing) var(--easing) allow-discrete,
		translate var(--timing) var(--easing);
	}
}

#home { padding-top: var(--home-top-offset); }
#work { padding-top: var(--work-top-offset); }
#contact { padding-top: var(--contact-top-offset); }

body.home #home,
body.work #work,
body.contact #contact {
	display: block;
	position: relative;
	opacity: 1;
	translate: 0 0;
}

#home {
	translate: var(--page-width-off) 0;
}

body.contact #work {
	translate: var(--page-width-off) 0;
}

body.home #work {
	translate: var(--page-width) 0;
}

#contact {
	translate: var(--page-width) 0;
}

@starting-style {
	body.home #home {
		opacity: 0;
		position: absolute;
		translate: var(--page-width-off) 0;
	}
	body.work #work {
		opacity: 0;
		position: absolute;
		translate: var(--page-width) 0;
	}
	body.contact #contact {
		opacity: 0;
		position: absolute;
		translate: var(--page-width) 0;
	}
}


/* PROJECTS */
#work .hero {
	min-height: 120vh;
}

.project-list ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25vmax, 1fr));
	row-gap: 2vh;
	column-gap: 2vw;
	margin-bottom: 50vh;
}

.project-list img {
	object-fit: contain;
	width: 100%;
	height: 100%;
}

.project-list a {
	border: .5em solid;
	border-radius: var(--border-radius2);
	box-sizing: border-box;
	position: relative;
	height: 15vh;
	padding: 2vmax;
}

.project-list a[href="#transformers"] {
	background-color: oklch(var(--transformers-c1));
	border-color: oklch(var(--transformers-c2));
}
.project-list a[href="#peppapig"] {
	background-color: oklch(var(--peppapig-c1));
	border-color: oklch(var(--peppapig-c2));
}
.project-list a[href="#playdoh"] {
	background-color: oklch(var(--playdoh-c1));
	border-color: oklch(var(--playdoh-c2));
}
.project-list a[href="#wellroundedchild"] {
	background-color: oklch(var(--wellroundedchild-c1));
	border-color: oklch(var(--wellroundedchild-c2));
}
.project-list a[href="#otherhasbro"] {
	background-color: oklch(var(--otherhasbro-c1));
	border-color: oklch(var(--otherhasbro-c2));
}
.project-list a[href="#atk"] {
	background-color: oklch(var(--atk-c1));
	border-color: oklch(var(--atk-c2));
}



.project {
	padding-top: 20vh;
}

.project .logo {
	margin: 0 auto;
	max-width: 15rem;
	display: block;
}

@media screen and (max-width: 900px) {
	.project .logo {
		max-width: 65%;
	}
}

.project section {
	display: grid;
	gap: var(--size-5);
	margin-bottom: var(--size-5);
	background-color: oklch(var(--bg-accent));
	border-radius: var(--border-radius2);
	padding: var(--project-padding);
	transition: all var(--timing) var(--easing);
}


.project section img {
	display: block;
	grid-row: 1;
	object-fit: contain;
	border: 1vw solid;
	border-color: oklch(var(--fg));
	width: 100%;
	box-sizing: border-box;
}

@media screen and (min-width: 900px) {
	.project section {
		margin-bottom: var(--size-1);
		grid-template-rows: min-content 1fr;
		grid-template-columns: 1fr 1fr;
	}

	.project section img {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

.project .in-action {
	grid-template-columns: 1fr;
}

.project .in-action ul {
	display: flex;
	flex-direction: column;
	margin-left: 0.75em;
	grid-column: 1 / span 2;
}

.project .blurb {
	margin: 2em auto;
}

@media screen and (min-width: 900px) {
	.project .blurb {
		max-width: 50vw;
	}
	.project .in-action ul {
		display: block;
		column-count: 2;
	}
}

.project .books {
	max-width: unset;
	width: auto;
	margin: 5vh 0;
}

.project .books ul {
	display: flex;
	list-style-type: none;
	gap: 3vw;
	flex-wrap: wrap;
}

.project .books ul li {
	position: relative;
}

.project .books ul li a img {
	border-width: 0;
	position: static;
	width: 20vw;
}

.project .books .book-blurb {
	position: absolute;
	bottom: -2em;
	right: -10%;
	border-radius: var(--border-radius2);
	font-size: 80%;
	padding: 1em 2em;
	width: 50%;
	z-index: 1;
	background-color: oklch(var(--fg));
	color: oklch(var(--bg-accent));
	border: .25em solid oklch(var(--bg-accent));
}

.sr-only {
	position: absolute;
	top: 1px;
	left: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: none;
}

.btt {
	position: fixed;
	bottom: 3vh;
	border-radius: var(--border-radius);
	border: none;
	right: 3vw;
	/* font-family: var(--font-2); */
	/* font-variation-settings: 'wght' var(--font-2-weight), 'wdth' var(--font-2-width); */
	/* text-transform: uppercase; */
	font-size: var(--link-size-desktop);
	background-color: oklch(var(--fg));
	color: oklch(var(--bg-accent));
	padding: 1em 3em;
	transition-behavior: allow-discrete;
	translate: 0 10vh;
	display: none;
	opacity: 0;
	text-transform: uppercase;
	transition-property: translate, opacity, display;
	z-index: 1;
}

body.work:has(section.active) .btt {
	display: block;
	opacity: 1;
	translate: 0 0;
}

@starting-style {
	body.work:has(section.active) .btt {
		translate: 0 10vh;
		opacity: 0;
	}
}



.input-container {
	margin-bottom: 1em;
	max-width: 70vw;
}

label {
	display: block;
	font-size: 75%;
}

input, textarea {
	appearance: none;
	border: none;
	background-color: oklch(0% 0 0 / .5);
	color: inherit;
	margin: 0;
	padding: .5em;
	display: block;
	box-sizing: border-box;
	width: 100%;
	font: inherit;
	font-size: 75%;
}

input:focus {
	outline: none;
}

.copyright {
	margin-top: 3em;
	display: flex;
	font-size: 50%;
	width:100%;
	justify-content: space-between;
}


.g50 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
	gap: var(--size-5);
}

/* ANIMATIONS AND TRANSITIONS */

@media screen and (prefers-reduced-motion: no-preference) {
	.t, .t::before, .t::after {
		transition-duration: var(--timing);
		transition-timing-function: var(--easing);
	}

	.t-xslow, .t-xslow::before, .t-xslow::after {
		transition-delay: var(--delay);
		transition-duration: calc(var(--timing) * 9);
		transition-timing-function: var(--easing);
	}

	.t-slow, .t-slow::before, .t-slow::after {
		transition-duration: calc(var(--timing) * 2);
		transition-timing-function: var(--easing);
	}

	.t-fast, .t-fast::before, .t-fast::after {
		transition-duration: calc(var(--timing) / 2);
		transition-timing-function: var(--easing);
	}
}






/* VARIABLES */

body.home {
	--bg: var(--home-bg);
	--fg: var(--home-fg);
	--fg-accent: var(--home-accent1);
	--bg-accent: var(--home-accent2);
	--bg-accent2: var(--home-accent3);
	--accent-blob-tx: var(--home-blob-tx--desktop);
	--accent-blob-ty: var(--home-blob-ty--desktop);
	--accent-blob-tr: var(--home-blob-tr);
	--page-top-offset: var(--home-top-offset);
}

@media screen and (max-width: 900px) {
	body.home {
		--accent-blob-tx: var(--home-blob-tx--mobile);
		--accent-blob-ty: var(--home-blob-ty--mobile);
	}
}

body.work {
	--bg: var(--work-bg);
	--fg: var(--work-fg);
	--fg-accent: var(--work-accent1);
	--bg-accent: var(--work-accent2);
	--bg-accent2: var(--work-accent3);
	--accent-blob-tx: var(--work-blob-tx--desktop);
	--accent-blob-ty: var(--work-blob-ty--desktop);
	--accent-blob-tr: var(--work-blob-tr);
	--page-top-offset: var(--work-top-offset);
}
@media screen and (max-width: 900px) {
	body.work {
		--accent-blob-tx: var(--work-blob-tx--mobile);
		--accent-blob-ty: var(--work-blob-ty--mobile);
	}
}

body.contact {
	--bg: var(--contact-bg);
	--fg: var(--contact-fg);
	--fg-accent: var(--contact-accent1);
	--bg-accent: var(--contact-accent2);
	--bg-accent2: var(--contact-accent3);
	--accent-blob-tx: var(--contact-blob-tx--desktop);
	--accent-blob-ty: var(--contact-blob-ty--desktop);
	--accent-blob-tr: var(--contact-blob-tr);
	--page-top-offset: var(--contact-top-offset);
}
@media screen and (max-width: 900px) {
	body.contact {
		--accent-blob-tx: var(--contact-blob-tx--mobile);
		--accent-blob-ty: var(--contact-blob-ty--mobile);
	}
}



body.work:has(#transformers .active) {
	--bg: var(--transformers-c1);
	--fg: var(--transformers-c2);
	--bg-accent: var(--transformers-c3);
}

body.work:has(#peppapig .active) {
	--bg: var(--peppapig-c1);
	--fg: var(--peppapig-c2);
	--bg-accent: var(--peppapig-c3);
}

body.work:has(#playdoh .active) {
	--bg: var(--playdoh-c1);
	--fg: var(--playdoh-c2);
	--bg-accent: var(--playdoh-c3);
}

body.work:has(#wellroundedchild .active) {
	--bg: var(--wellroundedchild-c1);
	--fg: var(--wellroundedchild-c2);
	--bg-accent: var(--wellroundedchild-c3);
}

body.work:has(#otherhasbro .active) {
	--bg: var(--otherhasbro-c1);
	--fg: var(--otherhasbro-c2);
	--bg-accent: var(--otherhasbro-c3);
}

body.work:has(#atk .active) {
	--bg: var(--atk-c1);
	--fg: var(--atk-c2);
	--bg-accent: var(--atk-c3);
}