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

@font-face {
	font-family: 'Kinetica';
	src: url('./kinetica-bold-webfont.woff2');
	font-weight: 600;
}


@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: 'Kinetica', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	--border-radius: 10em;
	--border-radius2: 3vw;
	--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;

	--page-width: 90vw;
	--page-width-off: -90vw;

	/* PRIMITIVES */
	--theme1: 28.476% 0.04546 175;
	--theme2: 62.774% 0.08477 199;
	--theme3: 81.196% 0.08792 207;
	--theme4: 93.019% 0.0438 188;
	--theme5: 26.51% 0.10144 348;
	--theme6: 57.511% 0.15193 32;
	--theme7: 79.672% 0.13511 61;
	--theme8: 95.586% 0.02617 62;


	--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(--theme1);
	--home-fg: var(--theme8);
	--home-accent1: var(--theme7);
	--home-accent2: var(--theme6);
	--home-accent3: var(--theme2);
	--home-blob-tx: -5vw;
	--home-blob-ty: 18vh;
	--home-blob-tr: -45deg;
	--home-hero-clip-path: xywh(0% 0% 100% 100% round 40em);

	--work-bg: var(--theme7);
	--work-fg: var(--theme1);
	--work-accent1: var(--theme5);
	--work-accent2: var(--theme2);
	--work-accent3: var(--theme6);
	--work-blob-tx: 30vw;
	--work-blob-ty: -16vh;
	--work-blob-tr: -140deg;

	--contact-bg: var(--theme5);
	--contact-fg: var(--theme8);
	--contact-accent1: var(--theme8);
	--contact-accent2: var(--theme7);
	--contact-accent3: var(--theme6);
	--contact-blob-tx: 45vw;
	--contact-blob-ty: 0vh;
	--contact-blob-tr: 0;

	--bg: 1 0 0
	--fg: 0 0 0
	--fg-accent: 0 0 0;
	--bg-accent: 0 0 0;


	--size-100: 100vw;
	--size-50: 50vw;

	--h1-size-desktop: 6.5vw;
	--h1-size-mobile: 10vw;
	--h1-line-height: 1.5;

	--text-size-desktop: clamp(0.5em, 3vmax, 2em);
	--text-line-height: 2;

	--link-size-desktop: clamp(0.5em, 1vmax, 2em);
	--link-size-mobile: 3vmin;

	--fx-blur: blur(40px);

	font-family: var(--font-1);
	font-size: 150%;
	font-weight: 300;
	line-height: 2;
}

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

svg {
	display: block;
}

body {
	background-color: oklch(var(--bg));
	color: oklch(var(--fg));
	width: 100vw;
	transition: all;
	transition-duration: var(--timing);
	transition-timing-function: var(--easing);
}

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

h1 {
	color: oklch(var(--fg-accent));
	font-size: var(--h1-size-desktop);
	line-height: var(--h1-line-height);
}
@media screen and (max-width: 900px) {
	h1 {
		font-size: 10vw;
	}
}

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


/* Text Effects */
.text-grad {
	--ga: 30deg;
	--g1: oklch(var(--fg-accent));
	--g2: oklch(var(--theme4));
	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;
}


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

@media screen and (max-width: 900px) {
	header {
		flex-wrap: wrap;
	}

	#logo .logo-sub,.logo-line {
		display: none;
	}
}

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

.btn-nav {
	display: none;
}

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

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

nav li {
	position: relative;
}

nav a {
	position: relative;
	display: block;
	text-decoration: none;
	font-family: var(--font-2);
	text-transform: uppercase;
	font-size: var(--link-size-desktop);
	line-height: 1;
}

nav a span {
	text-wrap: nowrap;
}


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

	header nav {
		display: none;
	}

	nav ul {
		gap: 3vmax;
	}

	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: display var(--timing) var(--easing) 0s allow-discrete, opacity var(--timing) var(--easing) 0s, translate var(--timing) var(--easing);
		/* transition-behavior: allow-discrete;
		transition-property: all;
		transition-duration: var(--timing);
		transition-timing-function: var(--easing); */
	}

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

	.btn-nav[aria-expanded=true] + nav {
		display: block;
		opacity: 1;
		translate: 0 0;
	}
}


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

header::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-image: linear-gradient(oklch(var(--bg) / 60%) 60%, oklch(var(--bg) / 0));
	backdrop-filter: opacity(0.4);
	z-index: -1;
}


@media screen and (prefers-reduced-motion: no-preference) {
	header #logo,
	header nav li {
		will-change: transform;
		animation: var(--timing) var(--easing) forwards float-in;
		transform: translateY(-10em);
	}

	header #logo { animation-delay: 0s }
	header nav li:nth-child(1) { animation-delay: 0.1s }
	header nav li:nth-child(2) { animation-delay: 0.3s }
	header nav li:nth-child(3) { animation-delay: 0.5s }

	main::before {
		transition: transform var(--timing) var(--easing);
	}

	@keyframes float-in {
		0% { transform: translateY(-10em); opacity: 0; }
		100% { transform: translateY(0); opacity: 1; }
	}

	@keyframes home-hero-enter {
		0% { height: 0 }
		100% {height: 75% }
	}

	@keyframes home-hero-enter-img {
		0% { object-position: 0 600px}
		100% {object-position: 0 0}
	}
}

main {
	max-width: 90vw;
	margin: 20vmin auto 4em;
	position: relative;
}

@media screen and (max-width: 900px) {
	main {
		margin: 0 auto 4em;
	}
}

main::before {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	transform: translateX(var(--accent-blob-tx)) translateY(var(--accent-blob-ty)) rotate(var(--accent-blob-tr));
	width: 50vmin;
	aspect-ratio: 1.75;
	background-color: oklch(var(--bg-accent));
	border-radius: 50em;
	z-index: -1;
}

@media screen and (max-width: 900px) {
	main::before {
		width: 20vmin;
	}
}


ul {
	display: flex;
}

a {
	color: inherit;
	position: relative;
	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: -.125em;
	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;
}

header nav a span {
	display: block;
	position: relative;
	padding: 1em 2em;
	border-radius: var(--border-radius);
	border-width: 2px;
	border-color: inherit;
	border-style: solid;
	will-change: transform;
	transform: translate(0, 0);
	transition: transform 0.25s ease-out;
}

nav li:before {
	content: '';
	display: block;
	width: 120%;
	max-width: 20vw;
	aspect-ratio: 1.75;
	/* background-color: oklch(var(--bg-accent)); */
	border-radius: var(--border-radius);
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	scale: 0;
	rotate: 0;
	transition: all calc(var(--timing) / 2) var(--easing);
	z-index: -1;
}

nav li:has(a:hover):before {
	scale: 1;
}

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

nav a[aria-current=true] span {
	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;
	}
}

.g-33 {
	flex: 0 1 33%
}

.g-66 {
	flex: 0 2 66%;
}


footer nav ul {
	display: flex;
	flex-direction: column;
	font-size: 150%;
	align-items: center;
	margin: 10vh;
}

footer nav ul a {
	border-radius: var(--border-radius);
	background-color: oklch(var(--fg) / 10%);
	display: flex;
	gap: 0;
	padding: 1em 2em;
	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);
}

footer nav ul a:focus,
footer nav 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;
}

footer a:focus .arrow,
footer 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%;
	}

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


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

.squiggle.active {
	stroke-dasharray: 100 100;
}



p {
	font-size: clamp(1rem, 3vw, 2em);
	line-height: 2;
}



#home section.hero {
	display: flex;
	gap: 6vw;
	align-items: flex-start;
}

#home .img-container {
	position: relative;
	top: -10vmin;
}

@media screen and (max-width: 900px) {
	#home section.hero {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
	#home .img-container {
		max-width: 50vw;
		top: 0;
	}
}


#home .img-container img {
	display: block;
	position: relative;
	top: 0;
	max-width: 100%;
	object-fit: cover;
	clip-path: var(--home-hero-clip-path);
	object-position: 0 600px;
	transition: object-position var(--timing) var(--easing) calc(var(--timing) / 2);
}

#home .img-container.active img {
	object-position: 0 60px;
}

#home .img-container:before {
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 0;
	clip-path: var(--home-hero-clip-path);
	background-image: radial-gradient(ellipse at center, white, #878787);
	transition: height var(--timing) var(--easing);
}

#home .img-container.active:before {
	height: 80%;
}

#home .home-highlight::before {
	content: '';
	position: absolute;
	z-index: -1;
	background-color: oklch(var(--theme2) / 25%);
	aspect-ratio: 1.75;
	rotate: var(--home-blob-tr);
	width: 50vw;
	aspect-ratio: 1.75;
	border-radius: var(--border-radius);
}

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

#home .highlight-img {
	position: relative;
	overflow: hidden;
}

#home .highlight-img::before {
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 0;
	clip-path: var(--home-hero-clip-path);
}

#home .highlight-img img {
	translate: 0 150%;
	transition-property: translate;
	transition-duration: var(--timing);
	transition-timing-function: var(--easing);
}

#home .highlight-img img.active {
	translate: 0 0;
}

.blob {
	position: relative;
}
.blob::after {
	content: '';
	position: absolute;
	bottom: -8em;
	left: -8em;
	width: 30vw;
	aspect-ratio: 1 / 1;
	background-image: url(../images/squiggle-star.svg);
	background-size: contain;
	z-index: -1;
}

#work,
#home,
#contact {
	transition: display var(--timing) var(--easing) allow-discrete,
		opacity var(--timing) var(--easing),
		translate var(--timing) var(--easing);
	/* transition-property: translate, opacity, display; */
	/* transition-duration: var(--timing), var(--timing), var(--timing); */
	/* transition-duration: 250ms; */
	/* transition-timing-function: var(--easing), var(--easing), var(--easing); */
	/* transition-behavior: allow-discrete; */
	display: none;
	top: 0;
	position: absolute;
	width: 100%;
	opacity: 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;
		translate: var(--page-width-off) 0;
	}
	body.work #work {
		opacity: 0;
		translate: var(--page-width) 0;
	}
	body.contact #contact {
		opacity: 0;
		translate: var(--page-width) 0;
	}
}

#work .hero-content {
	width: 50vw;
}

#work .img-container {
	position: absolute;
	top: calc(var(--accent-blob-ty) - 3vh);
	left: calc(var(--accent-blob-tx) + 10vw);
	width: 36vw;
	opacity: 0;
	transition: all var(--timing) var(--easing) var(--timing);
	transform: translateY(10vh);
}

#work .img-container.active {
	transform: none;
	opacity: 1;
}

#work .img-container img,
#contact .img-container img {
	width: 100%;
}

.project-list {
	margin-top: 5vh;
}

.project-list ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25vmax, 1fr));
	row-gap: 2vh;
	column-gap: 2vw;
	margin: 0 0 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: clamp(3em, 18vh, 12em);
	padding: 1vmax;
}

.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 .logo {
	margin: 0 auto;
	/* padding-top: 15vh; */
	max-width: 15rem;
	display: block;
}

.project section {
	background-color: oklch(var(--bg-accent));
	border-radius: var(--border-radius2);
	padding: 2em;
	margin-bottom: 2em;
	transition: all var(--timing) var(--easing);
}

@media screen and (min-width: 900px) {
	.project section {
		margin: 30vh 0;
	}
}

.project .blurb {
	display: block;
	margin: 2em auto 0;
	max-width: 50vw;
}

.project section img {
	width: 35vw;
	object-fit: contain;
	border: 1vw solid;
}

@media screen and (max-width: 900px) {
	.project section img {
		width: 100%;
		object-fit: contain;
		border: 1vw solid;
	}

	.project .blurb {
		max-width: unset;
	}
}

.project .in-action {
	max-width: unset;
	width: unset;
}

.project .in-action ul {
	display: flex;
	flex-direction: column;
}

@media screen and (min-width: 900px) {
	.project section {
		max-width: 50vw;
		width: 45vw;
		left: 0vw;
	}

	.project section img {
		position: absolute;
		display: block;
		z-index: -1;
		right: -50%;
		top: -40%;
	}

	.project section:not(.in-action, .books):nth-child(2n) {
		left: 25vw;
	}

	.project section:not(.in-action, .books):nth-child(2n) img {
		right: 75%;
	}

	.project .in-action ul {
		display: block;
		column-count: 2;
	}
}

.project section img {
	border-color: oklch(var(--fg));
}

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

.project .books ul {
	display: flex;
	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;
}

.project {
	padding-bottom: 20vh;
}

.project p {
	margin: 0;
	font-size: 1em;
}

.btt {
	position: fixed;
	bottom: 3vh;
	border-radius: var(--border-radius);
	border: none;
	right: -100%;
	font-family: 'Kinetica';
	font-size: 75%;
	font-weight: 600;
	background-color: oklch(var(--fg));
	color: oklch(var(--bg-accent));
	padding: 1em 3em;
	transition-behavior: allow-discrete;
	/* display: none; */
	opacity: 0;
	text-transform: uppercase;
	transition: right var(--timing) var(--easing);
}

body.work:has(section.active) .btt {
	display: block;
	opacity: 1;
	right: 3vw;
}


#contact .hero-content {
	width: 50vw;
}

#contact section {
	font-size: 140%;
}


#contact .img-container {
	position: absolute;
	top: calc(var(--accent-blob-ty) + 8vh);
	left: calc(var(--accent-blob-tx) + 6vw);
	width: 26vw;
	transition: all var(--timing) var(--easing) var(--timing);
	transform: translateY(10vh);
	opacity: 0;
}

#contact .img-container.active {
	transform: none;
	opacity: 1;
}


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);
	--accent-blob-ty: var(--home-blob-ty);
	--accent-blob-tr: var(--home-blob-tr);
}

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);
	--accent-blob-ty: var(--work-blob-ty);
	--accent-blob-tr: var(--work-blob-tr);
}

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);
	--accent-blob-ty: var(--contact-blob-ty);
	--accent-blob-tr: var(--contact-blob-tr);
}


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

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

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

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

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

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