@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Racing+Sans+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap');

/* Resets */
body {
	margin: 0;
	display: block;
	overflow-y: auto;
	overflow-x: hidden;
}
blockquote, figure {
	margin-left: 0;
	margin-right: 0;
}
img, video {
	display: block;
	height: auto;
	width: 100%;
}

/* Typography */
:root {
	--size-body: 1rem;
	--size-lead: 1.309rem;
	--size-quote: 1.618rem;
	--size-heading: 2.618rem;
	--size-title: 4.236rem;
	--size-spacing: 1.618rem;
	--content-width: 800px;
	font-size: 18px;
	line-height: 1.6;
}
body {
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-size: var(--size-body);
	font-style: normal;
	font-variation-settings: "wdth" 100;
	font-weight: 400;
}
h1, h2 {
	font-family: "Racing Sans One", sans-serif;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}
h1 {
	font-size: var(--size-title);
}
h2 {
	font-size: var(--size-heading);
}
article {
	padding: var(--size-spacing);
}
article > * {
	margin-bottom: var(--size-spacing);
	margin-top: 0;
}
article > *:last-child {
	margin-bottom: 0;
}
article a {
	color: rgb(21, 43, 130);
}
article > blockquote {
	--color: rgb(21, 43, 130);

	font-family: "Racing Sans One", sans-serif;
	font-style: italic;
	font-weight: 100;
	line-height: 1.2;
	font-size: var(--size-quote);
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: var(--size-spacing);
	color: var(--color);

	& p {
		margin: 0;
		border-left: solid .25ch var(--color);
		padding-left: var(--size-spacing);
	}
}
figcaption {
	font-size: var(--size-body);
	font-style: italic;
}

/* Desert background */
html,
html::before,
html::after {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}
html {
	background-color: rgba(133,153,237,1);
	background-image: linear-gradient(0deg, rgba(246,235,124,1) 0, rgba(244,199,165,1) 25%, rgba(244,199,165,1) 30%, rgba(230,162,240,1) 50%, rgba(133,153,237,1) 70%, rgb(21, 43, 130) 100%);
	background-position: 0 -30vh;
	background-size: 100%;
}
html::before,
html::after {
	content: "";
	display: block;
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
}
/* Sun */
html::before {
	background-image:
		linear-gradient(0deg, rgb(251, 242, 141) 30%, rgba(244,199,165,0) 55%),
		radial-gradient(circle at 50% 50%, rgba(247,222,98,1) 10%, rgba(247,243,98,1) 12.5%, rgba(255,254,236,0.8) 15%, rgba(255,254,236,0) 40%);
	background-position: 50% 30%;
	background-size: 200vw 200vh;
	z-index: -3;
}
/* Sand */
html::after {
	filter: brightness(1);
	background-image: linear-gradient(0deg, rgba(230,125,20,1) 0, rgba(248,184,18,1) 20%, rgba(244,200,100,1) 30%, rgba(244,200,100,0) 30.3%);
	z-index: -3;
}
/* Background animation */
@keyframes lower-sky {
	to {
		background-position: 0 0;
	}
}
@keyframes lower-sun {
	to {
		background-position: 50% 0;
	}
}
@keyframes darken-sand {
	to {
		filter: brightness(0.5);
	}
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		html {
			animation: lower-sky 1ms linear;
			animation-timeline: scroll();
		}
		html::before {
			animation: lower-sun 1ms linear;
			animation-timeline: scroll();
		}
		html::after {
			animation: darken-sand 1ms linear;
			animation-timeline: scroll();
		}
	}
}
body {
	overscroll-behavior-y: none;
}

/* Main heading */
h1 {
	color: #ff35f2;
	position: relative;
	display: block;
	margin-top: 30vh;
	text-align: center;
	/* HACK: text shadow can't have a spread. Fun! */
	text-shadow:
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff,
		0 0 0.05em #fff;
}
h1::after {
	content: "24 hours of Lemons, the real Wacky Races";
	display: block;
	position: absolute;
	text-shadow: none;
	top: 0;
	transform: rotate(2deg) scale(1.2);
	opacity: 0.2;
	z-index: -1;
}

/* Lead paragraph */
article > p:first-of-type {
	color: #61115c;
	font-size: var(--size-lead);
	font-style: italic;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 80%;
}
article > p:first-of-type::before {
	content: "🍋";
	display: block;
	position: absolute;
	z-index: -1;
	opacity: 0.2;
	font-size: 200px;
	top: -100px;
	left: -100px;
}
@keyframes spin {
	to {
		transform: rotate(1turn);
	}
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation: infinite) {
		article > p:first-of-type::before {
			transform-origin: 120px 50%;
			animation: spin 10s linear infinite;
		}
	}
}

/* Attribution */
article > a:first-of-type,
article > time:first-of-type {
	display: block;
	text-align: right;
	color: #61115c;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	line-height: 0;
	text-decoration: none;
}
article > time:first-of-type {
	margin-bottom: 30vh;
}

/* Content layout */
article {
	margin: 0 auto 30vh auto;
}

/* Content layout (wide screen) */
@media (min-width: 1000px) {
	article {
		display: grid;
		grid-auto-rows: auto;
		grid-template-columns:
			minmax(0, 1fr)
			calc(var(--content-width) / 2)
			calc(var(--content-width) / 2)
			minmax(0, 1fr);
		grid-template-rows: auto;
		gap: 0 var(--size-spacing);
	
		& > h1,
		& > p:first-of-type,
		& > a,
		& > time,
		& > hr {
			grid-column: 2 / span 2;
		}
		& > [data-gallery] {
			grid-column: 1 / span 4;
		}
	
		& > p:nth-of-type(2) { grid-column: 2 / span 2; }
		& > p:nth-of-type(3) { grid-column: 2; }
		& > figure:nth-of-type(1) { grid-column: 3; }
		& > figure:nth-of-type(2) { grid-column: 2; }
		& > blockquote:nth-of-type(1) { grid-column: 3; }
		& > p:nth-of-type(4) { grid-column: 2 / span 2; }
		& > figure:nth-of-type(3) { grid-column: 2; }
		& > p:nth-of-type(5) { grid-column: 3; }
		& > p:nth-of-type(6) { grid-column: 2 / span 2; }
		& > p:nth-of-type(7) { grid-column: 2 / span 2; }
		& > p:nth-of-type(8) { grid-column: 2 / span 2; }
		& > p:nth-of-type(9) { grid-column: 2 / span 2; }
		& > p:nth-of-type(10) { grid-column: 2; }
		& > figure:nth-of-type(4) { grid-column: 3; }
		& > figure:nth-of-type(5) { grid-column: 2; }
		& > p:nth-of-type(11) { grid-column: 3; }
		& > aside:nth-of-type(1) { grid-column: 4; }
		& > p:nth-of-type(12) { grid-column: 2 / span 2; }
		& > p:nth-of-type(13) { grid-column: 2 / span 2; }
	}
}

/* Gallery and figures */
figure {
	transform-origin: 50% 50%;

	& picture {
		display: block;
	}
	& img,
	& figcaption,
	& wacky-video {
		box-sizing: border-box;
		display: block;
		background-color: #fff;
		border: solid 1ch #fff;
	}
	& figcaption {
		border-top: 0;
		text-align: center;
	}
}
@media (min-width: 1000px) {
	[data-gallery] {
		display: flex;
		gap: 0 var(--size-spacing);
		max-width: 100%;
		justify-content: center;

		& > figure {
			margin: 0;
		}

		/* lol */
		&:has(img[alt^="Lemons founder"]) {
			& > figure:nth-child(1) { order: 2; }
			& > figure:nth-child(2) { order: 1; }
			& > figure:nth-child(3) { order: 3; }
		}
	}
}

/* Jaunty angles for those polaroids. *chefs-kiss* */
figure:has(img[alt^="Competitors at Chuckwalla"]) { transform: rotateZ(1deg); }
figure:has(img[alt^="A 1970 Dodge Dart"]) { transform: rotateZ(-1deg); }
figure:has(img[alt^="Repairs on"]) { transform: rotateZ(2deg); }
figure:has(img[alt^="The"]) { transform: rotateZ(-0.5deg); }
figure:has(img[alt^="Matthew Gebben"]) { transform: rotateZ(0.8deg); }
figure:has(img[alt^="A 1975 MG"]) { transform: rotateZ(-2deg); }
figure:has(img[alt^="Lemons founder Jay"]) { transform: rotateZ(0deg); }
figure:has(img[alt^="A Mercedes 190E"]) { transform: rotateZ(-1.5deg); }
figure:has(img[alt^="Teams help a 1981"]) { transform: rotateZ(1.5deg); }
figure:has(img[alt^="A Mercedes 300D"]) { transform: rotateZ(-1deg); }

/* Video time */
[data-wacky-video="video-controls"] {
	display: flex;
	padding-top: 1ch;
	justify-content: center;
	align-items: center;

	& button {
		appearance: none;
		display: block;
		border: none;
		background-color: #fff;
		width: 0;
		height: 30px;
		padding: 0 0 0 30px;
		overflow: hidden;
		background-repeat: no-repeat;
		background-position: center center;
	}
}
[data-wacky-video="playpause"][data-state="play"] {
	background-image: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 1024 1024' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M358.4 694.743V329.256C358.4 319.428 369.017 313.267 377.55 318.143L697.351 500.886C705.95 505.8 705.951 518.199 697.351 523.113L377.55 705.857C369.017 710.733 358.4 704.571 358.4 694.743Z' fill='black'/%3E%3C/svg%3E");
}
[data-wacky-video="playpause"][data-state="pause"] {
	background-image: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 1024 1024' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M332.8 320C332.8 312.931 338.531 307.2 345.6 307.2H473.6C480.669 307.2 486.4 312.931 486.4 320V704C486.4 711.069 480.669 716.8 473.6 716.8H345.6C338.531 716.8 332.8 711.069 332.8 704V320Z' fill='black'/%3E%3Cpath d='M537.6 320C537.6 312.931 543.331 307.2 550.4 307.2H678.4C685.469 307.2 691.2 312.931 691.2 320V704C691.2 711.069 685.469 716.8 678.4 716.8H550.4C543.331 716.8 537.6 711.069 537.6 704V320Z' fill='black'/%3E%3C/svg%3E");
}
[data-wacky-video="progress"] {
	appearance: none;
	display: block;
	padding: 0 1ch;

	&::-webkit-progress-bar {
		appearance: none;
		background-color: #ccc;
	}
	&::-webkit-progress-value {
		appearance: none;
		background-color: #ff35f2;
	}
}
[data-wacky-video="progress-bar"] {
	background-color: #00f;
}
[data-wacky-video="mute"][data-state="mute"] {
	background-image: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 1024 1024' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M294.778 588.796C287.721 588.796 282 583.076 282 576.019V448.241C282 441.184 287.721 435.463 294.778 435.463H365.636L490.819 326.177C499.084 318.962 512 324.831 512 335.803V688.457C512 699.428 499.084 705.298 490.819 698.083L365.636 588.796H294.778Z' fill='%231B1B1B'/%3E%3Cpath d='M576.283 551.53C582.538 543.515 588.667 530.871 588.667 512.099C588.667 493.146 582.419 480.44 576.103 472.437C570.752 465.659 569.209 454.653 575.152 448.388C581.27 441.939 587.867 434.939 592.923 429.565C597.673 424.515 605.489 424.26 609.889 429.618C621.175 443.362 639.778 472.085 639.778 512.099C639.778 557.347 620.55 583.367 609.33 594.699C605.045 599.027 598.354 598.452 594.047 594.146L575.644 575.743C569.477 569.576 570.918 558.406 576.283 551.53Z' fill='%231B1B1B'/%3E%3Cpath d='M647.997 630.299C662.447 611.944 690.889 568.637 690.889 512.13C690.889 455.622 662.447 412.316 647.997 393.96C643.659 388.45 643.774 380.355 648.733 375.397L669.738 354.392C674.462 349.668 681.938 349.449 686.405 354.417C703.695 373.646 742 425.971 742 512.13C742 598.288 703.695 650.613 686.405 669.843C681.938 674.81 674.462 674.592 669.738 669.868L648.733 648.863C643.774 643.904 643.659 635.81 647.997 630.299Z' fill='%231B1B1B'/%3E%3C/svg%3E");
}
[data-wacky-video="mute"][data-state="unmute"] {
	background-image: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 1024 1024' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M653.287 726.259C648.297 731.249 640.207 731.249 635.217 726.259L298.582 389.631C293.592 384.641 293.591 376.551 298.582 371.561L320.321 349.821C325.311 344.831 333.402 344.831 338.392 349.821L675.023 686.452C680.013 691.442 680.013 699.533 675.023 704.523L653.287 726.259Z' fill='%231B1B1B'/%3E%3Cpath d='M512 446.762V335.803C512 324.831 499.084 318.962 490.819 326.177L437.747 372.509L512 446.762Z' fill='%231B1B1B'/%3E%3Cpath d='M395.238 409.62L365.636 435.463H294.778C287.721 435.463 282 441.184 282 448.241V576.019C282 583.076 287.721 588.797 294.778 588.797H365.636L490.819 698.083C499.084 705.298 512 699.428 512 688.457V526.379L395.238 409.62Z' fill='%231B1B1B'/%3E%3Cpath d='M629.562 564.325C635.379 550.984 639.778 533.741 639.778 512.099C639.778 472.086 621.175 443.363 609.889 429.619C605.489 424.261 597.673 424.516 592.923 429.565C587.867 434.94 581.27 441.939 575.152 448.389C569.209 454.654 570.752 465.659 576.103 472.438C582.419 480.441 588.667 493.146 588.667 512.099C588.667 515.888 588.417 519.428 587.967 522.73L629.562 564.325Z' fill='%231B1B1B'/%3E%3Cpath d='M666.885 601.648L707.103 641.866C723.996 614.364 742 571.198 742 512.13C742 425.972 703.695 373.647 686.405 354.417C681.938 349.45 674.462 349.668 669.738 354.392L648.733 375.397C643.774 380.356 643.659 388.451 647.997 393.961C662.447 412.316 690.889 455.623 690.889 512.13C690.889 548.471 679.125 579.352 666.885 601.648Z' fill='%231B1B1B'/%3E%3C/svg%3E");
}

/* Footer */
footer {
	margin: var(--size-spacing) auto;
	max-width: var(--content-width);
	text-align: center;
	padding: 0 var(--size-spacing);

	&, & a {
		color: #fff;
	}
	& a {
		display: inline-block;
	}

	&::before,
	&::after {
		content: "🍋";
	}
}
@keyframes spin3d {
	to {
		transform: rotateY(1turn);
	}
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation: infinite) {
		footer a {
			transform-origin: 50% 50%;
			animation: spin3d 2s ease infinite;
		}
	}
}

/* TODO LIST */
body > aside { display: none; }