@font-face {
	font-family: 'Adjusted Lucida Bright Fallback';
	src: local(Lucida Bright);
	size-adjust: 113%;
	ascent-override: normal;
	descent-override: 13%;
	line-gap-override: normal;
}

@font-face {
	font-family: 'Adjusted Verdana Fallback';
	src: local(Verdana);
	size-adjust: 93.5%;
	ascent-override: 123%;
	descent-override: 48%;
	line-gap-override: normal;
}

@font-face {
	font-family: 'Adjusted Courier New Fallback';
	src: local(Courier New);
	size-adjust: 100%;
	ascent-override: 93%;
	descent-override: 37%;
	line-gap-override: normal;
}

:root {
	/* font */
	--_font-size: var(--font-size-1);
	--_font-family: 'MuseoModerno', 'Adjusted Verdana Fallback', sans-serif;
	--_font-family-accent: 'Hepta Slab', 'Adjusted Lucida Bright Fallback',
		serif;
	--_font-family-code: 'Fira Code', 'Adjusted Courier New Fallback', monospace;
	--_font-color: var(--choco-12);

	/* border */
	--_border-size: var(--border-size-2);

	/* size */
	--_gap: var(--size-3);
	--_gap-half: calc(var(--_gap) / 2);
	--_wide-screen: 1400px;
	--_small-screen: 800px;
	--_readable-screen: max(80dvw, var(--_small-screen));

	/* color */
	--_accent-color: var(--lime-6);
	--_translucent: hsl(from var(--_font-color) h s l / 0.1);

	/* other */
	--_background-color: var(--sand-0);
	--_background-image: url('assets/css_bg_stardust_alpha_30.png');
	--_blur: var(--size-3);
	--_transition-delay: 0.2s;

	/* global styles */
	scroll-behavior: smooth;
}

@media (prefers-contrast: more) {
	:root {
		--_font-color: black;
		--_accent-color: var(--lime-12);
		--_translucent: var(--sand-2);
		--_background-color: white;
		--_background-image: '';
	}
}

@media (prefers-color-scheme: dark) {
	:root:has(body:not([data-theme='light'])) {
		--_font-color: var(--choco-1);
		--_accent-color: var(--lime-11);
		--_background-color: var(--sand-12);
	}
}

:root:has(body[data-theme='dark']) {
	--_font-color: var(--choco-1);
	--_accent-color: var(--lime-11);
	--_background-color: var(--sand-12);
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
	:root:has(body:not([data-theme='light'])) {
		--_font-color: white;
		--_accent-color: var(--lime-9);
		--_translucent: var(--sand-10);
		--_background-color: black;
		--_background-image: '';
	}
}

@media (prefers-contrast: more) {
	:root:has(body[data-theme='dark']) {
		--_font-color: white;
		--_accent-color: var(--lime-9);
		--_translucent: var(--sand-10);
		--_background-color: black;
		--_background-image: '';
	}
}

body {
	color: var(--_font-color);
	font-family: var(--_font-family);
	font-size: var(--_font-size);
	accent-color: var(--_accent-color);
	margin: 0;
	padding: 0;
	background: var(--_background-image) repeat top left / 800px;
	background-color: var(--_background-color);

	transition-property: background-color var(--_transition-delay) ease;
	transition-duration: var(--_transition-delay);
	transition-timing-function: ease;
}

h1,
h2,
h3,
h4,
h5,
h6,
button {
	font-family: var(--_font-family-accent);
}

pre,
code {
	font-family: var(--_font-family-code);
}

h1 {
	margin-block: var(--_gap);
}

label {
	display: grid;
	gap: var(--_gap-half);
}

input {
	transition: all var(--_transition-delay) ease;
}

input:not([type='radio']):not([type='checkbox']) {
	padding: var(--_gap-half);
	border: var(--_border-size) solid var(--_translucent);
	background-color: var(--_translucent);
	color: hsl(from var(--_font-color) h s l / 0.8);
}

input:not([type='radio']):not([type='checkbox']):focus {
	background-color: var(--_background-color);
	color: var(--_font-color);
}

input[type='radio'],
input[type='checkbox'] {
	width: calc(1.5 * var(--_gap));
	aspect-ratio: 1;
}

.cta,
.button {
	text-decoration: none;
	background-color: var(--_accent-color);
	color: var(--sand-0);
	width: 100%;
	font-size: 120%;
	height: fit-content;
	padding: var(--_gap-half);
	font-family: var(--_font-family-accent);
	border: var(--_border-size) solid var(--_accent-color);
	transition: all var(--_transition-delay) ease;
	display: inline-block;
	outline: none;
	text-align: center;
}

.cta:hover,
.cta:focus-visible,
.button:hover,
.button:focus-visible {
	background-color: var(--_background-color);
	font-weight: 500;
	color: var(--_accent-color);
	box-shadow: 0 0 0 0 var(--_accent-color);
}

.cta:active {
	box-shadow: 0 0 180px 20px var(--_accent-color);
}

.cta {
	width: fit-content;
	font-size: 150%;
	padding: 1rem 2rem;
}

.markdown-body {
	padding: var(--_gap);
}