:root {
	--whimsy-color-background: #f1eeee;
	--whimsy-color-foreground: #080808;
	--whimsy-color-surface: #2b2b2b;
	--whimsy-color-accent: #182865;
	--whimsy-color-emphasis: #c7825b;
	--whimsy-border-radius: 0;
	--whimsy-font-family-body: 'Bitter', serif;
	--whimsy-font-family-heading: 'Lexend', sans-serif;
	font-size: calc(min(13px + .2vw, 16px));
}

@property --frame-x {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

a {
	color: unset;
	text-decoration: unset;
}

body {
	background-color: var(--whimsy-color-background);
	color: var(--whimsy-color-foreground);
	font-family: var(--whimsy-font-family-body);
	margin: 0;
	min-height: 100dvh;
	display: flex;

	&:has(whimsy-page:not([beyond-end])) {
		overflow: hidden;
	}
}

h1,
h2,
h3 {
	font-weight: 500;
	font-family: var(--whimsy-font-family-heading);
	margin-block: .2em;
}

p {
	font-size: .8em;
}

#page {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	overflow-x: hidden;
	height: 100dvh;
	width: 100vw;
	position: absolute;
}

nqc-navbar-opener {
	display: flex;
	align-items: center;
	margin-inline-start: -1em;
	gap: .5em;
}

#minilogo {
	visibility: collapse;
	height: 4em;
}

#navbar {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	interpolate-size: allow-keywords;
	overflow: hidden;
	padding: 2rem;
	z-index: 999;
	box-sizing: border-box;
	flex-shrink: 0;
	transition: .7s ease;

	width: calc-size(max-content, size);
	margin-inline-start: 0;
	opacity: 1;

	@media screen and (max-width: 720px) {
		&:not([open]) {
			width: 0;
			margin-inline-start: -4rem;
			opacity: 0;

			&+#wrapper #minilogo {
				visibility: visible;
			}
		}
	}
}

#biglogo {
	width: 12em;
	align-self: center;

	&+span {
		font-weight: 600;
		font-size: 1em;
		margin-bottom: 1.6em;
		align-self: center;
		width: 12em;
		text-align: center;
	}
}

#wrapper {
	transition: .7s ease;
	display: flex;
	flex-direction: column;
	flex: 1;

	min-width: min(480px, 100vw);

	&:has(.slideshow) {
		max-height: 100dvh;
	}
}

#content {
	overflow-x: visible;
	overflow-y: auto;
	position: relative;
	flex: 1 0;
	display: flex;
	flex-direction: column;
	container: decorator / size;
	box-sizing: border-box;
}

main {
	display: block;
	width: 100vw;
	min-height: 100dvh;
}

whimsy-slideshow-page,
whimsy-page {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	font-size: 1.5rem;
	box-sizing: border-box;
	min-height: 100dvh;
}

whimsy-page,
whimsy-slide {
	padding-block: calc(1cqi + 4rem);
	padding-inline: calc(2cqi + 1.5rem);
}

whimsy-slideshow-page {
	height: 100dvh;
	overflow-y: hidden;
	overflow-x: hidden;
}

.slide {
	--navigation-progress: 0;
	user-select: none;
	opacity: var(--navigation-progress);
	position: absolute;
	inset: 0;
	height: 100cqb;
	width: 100cqi;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	align-items: stretch;
	justify-content: flex-start;
	color: var(--aura-color-fore);
	scroll-snap-align: start;
	pointer-events: none;
	padding-inline: calc(2cqi + 1.5rem);
	padding-block: calc(1cqi + 1rem);

	&[data-active-slide] {
		pointer-events: visiblePainted;
	}
}

#ctabar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-inline: calc(2cqi + 1rem);
	padding-block: calc(.5rem);
	position: relative;
	z-index: 99999;
}

.slide-bg {
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-top: calc(10rem + 10cqi);
	padding-inline: calc(2cqi + 1rem);
	inset: 0;
	pointer-events: visiblePainted;
	z-index: -99;
}

.slide-image {
	position: absolute;
	inset-inline-end: -18vw;
	bottom: 0px;
	height: 100dvh;
	width: calc(110vw + 225px);
	pointer-events: none;
	z-index: 1;

	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;

	&.shifted {
		inset-inline-end: 70px;
		opacity: .5;
	}
}

.jeremy {
	top: -20%;
	height: 120%;
}

.highlight {
	background-color: color-mix(in srgb, var(--whimsy-color-background), var(--whimsy-color-foreground) 10%);
	font-size: calc(1rem + 1vw);
	padding-inline: calc(20vw + 1em) calc(2vw + .4em);
	padding-block: 1rem;
	margin-top: calc(-10vw + 70px);
}

.backdrop {
	position: fixed;
	inset: 0;
	inset-inline-end: calc(-30vw + 10em);
	z-index: -999;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--whimsy-color-accent) 60%, transparent), transparent 40%);
	opacity: 0.3;
}

.slide-content {
	display: flex;
	flex-direction: column;
	position: relative;
	max-width: 100%;
	z-index: 1;
}

.bottom {
	flex: 1;
	justify-content: flex-end;
}

.inline-start {
	align-self: flex-start;
	text-align: start;
	align-items: flex-start;
}

.inline-end {
	align-self: flex-end;
	text-align: end;
	align-items: flex-end;
}

h1 i,
h2 i,
h3 i {
	font-family: var(--whimsy-font-family-body);
	font-style: normal;
	text-transform: uppercase;
}

h1 u,
h2 u,
h3 u {
	font-weight: 300;
	text-decoration: none;
}

a.button,
whimsy-button {
	font-size: 1em;
	padding: .4em .8em;
	font-family: var(--whimsy-font-family-heading);
	box-sizing: border-box;
	text-decoration: none;
	margin-block: .5em;
	display: inline-block;
	color: var(--whimsy-color-foreground);
	border: 2px solid var(--whimsy-color-foreground);
	transition: .3s ease;
	position: relative;
	user-select: none;
	cursor: pointer;
	text-transform: uppercase;

	&::after {
		content: '';
		position: absolute;
		background-color: var(--whimsy-color-foreground);
		transition: inset-inline-start .5s ease, inset-inline-end .2s ease;
		inset-block: 0;
		inset-inline: 0 100%;
	}

	&.accent {
		background-color: var(--whimsy-color-accent);
		color: var(--whimsy-color-background);
		border-color: transparent;
	}

	&.emphasis {
		background-color: var(--whimsy-color-emphasis);
		color: var(--whimsy-color-background);
		border-color: transparent;
	}

	&:hover {
		border-color: color-mix(in srgb, currentColor, transparent 60%);

		&::after {
			inset-inline: 100% 0;
		}
	}
}

a.slide-link {
	font-family: var(--whimsy-font-family-heading);
	font-size: 1.6em;
	padding-block: .5em;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	text-decoration: none;
	color: currentColor;

	&::after {
		content: '▶';
		font-family: monospace;
		margin-inline: .3em -.2em;
	}
}

*:not(.button) {

	&.accent {
		color: var(--whimsy-color-accent);
	}

	&.emphasis {
		color: var(--whimsy-color-emphasis);
	}

	&.weak {
		color: color-mix(in srgb, var(--whimsy-color-background) 60%, var(--whimsy-color-foreground));
	}
}

whimsy-revolver {
	font-size: 2em;
	background-color: var(--whimsy-color-foreground);
	color: var(--whimsy-color-background);
	padding-inline: .1em;
	font-weight: 800;
}

.infobar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.banner {
	align-self: stretch;
	height: 20cqb + 4em;
	background-position: center;
	background-size: cover;
	margin-inline: .5rem;
}

form {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
	padding-inline: 1em;
	font-size: .8em;

	&>whimsy-button {
		align-self: flex-start;
	}
}

input:not([type]),
input[type=text],
textarea {
	outline: none;
	border-radius: 0;
	font-family: var(--whimsy-font-family-body);
	color: var(--whimsy-color-foreground);
	border: 1px solid transparent;
	padding: 5px;
	margin: 5px;
	font-size: 1em;
	transition: .2s ease;

	&:not(:focus) {
		background-color: #2b2b2b;
		opacity: .7;
	}

	form>div.input-section:has(&:focus) {
		border-color: #2b2b2b;
	}
}

form>div.input-section {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1fr;
	position: relative;
	padding: 10px;
	gap: 5px;
	border: 2px solid transparent;
	transition: .3s ease;
}

@media (max-width: 768px) {
	form {
		display: flex;

		&>div.input-section {
			grid-template-columns: 1fr;
			gap: 0;
		}
	}
}

.sample {
	height: 7em;
	width: 7em;
	object-fit: cover;
	object-position: center;
	display: block;
}

iframe {
	flex: 1;
	border: none;
	padding: 1rem;
	background-color: #292929;
	margin: -1rem -1.8rem;
	box-sizing: border-box;
}

.booboo {
	background-image: url(/assets/recipe_comingsoon.png), linear-gradient(170deg, transparent, var(--whimsy-color-background));
	width: 100cqi;
	height: 12em;
	background-position: right;
	background-size: contain;
	background-repeat: no-repeat;
}

.fat-snip {
	margin-inline-start: 0.3em;
	background-color: var(--whimsy-color-foreground);
	color: var(--whimsy-color-background);
	border-inline-end: 4px solid var(--whimsy-color-emphasis);
	padding-block: .1em;

	& + mo-symbol {
		vertical-align: top;
		color: var(--whimsy-color-emphasis);
	}
}

.scroll-guide {
	font-family: var(--whimsy-font-family-heading);
	font-size: 2.6rem;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	position: fixed;
	text-decoration: none;
	color: var(--whimsy-color-foreground);
	flex-direction: column;
	bottom: .5em;
	inset-inline-start: .5em;
	line-height: .8em;
}