*,
*::before,
*::after {
	-webkit-user-drag: none;
	color: var(--avorio);

	box-sizing: border-box;
}

:root {
	font-size: min(24px, 25vw, 25vh);

	--gap: 1rem;

	--avorio: #f4eae4;
	--aurum: #f2af5c;
	--aero: #82a8d9;
	--aegir: #231c54;
	--noctulaegir: #080715;
	--subaegir: #110e2a;
	--superaegir: #4638a8;
	--subaero: #41546d;
	--superaero: #bad8f2;
	--subaurum: #79582e;
	--superaurum: #fbdd91;

	--semisuperaurum: #f8cb79;
	--semisuperaero: #a2c5e9;
	--setaero: #c3fcff;
	--setaurum: #ffffb8;

	--noctulashen: #161616;
	--subashen: #2c2c2c;
	--ashen: #585858;
	--superashen: #b0b0b0;

	--noctulalizarin: #2a0d0d;
	--subalizarin: #7a1f1f;
	--alizarin: #d64141;
	--superalizarin: #ff9494;
}

@property --timeNorm {
	syntax: '<number>';
	initial-value: 0;
	inherits: false;
}

@property --timeTau {
	syntax: '<number>';
	initial-value: 0;
	inherits: false;
}

@keyframes timeGo {
	to {
		--timeTau: 6.28318530718;
		--timeNorm: 1;
	}
}

::selection {
	background-color: #f2af5c5e;
	/* color: var(--aegir);
               text-shadow: none; */
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
ul {
	margin: 0;
}

:focus-visible {
	outline: dashed 1px var(--aurum);
	outline-offset: -1px;
}

h1 {
	/* font-size: 4rem; */
	font-size: min(12vw, 4rem);
	font-weight: 700;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

h2 {
	/* font-size: calc(pow(4, 2 / 3) * 1rem); */
	font-size: 2rem;
	font-weight: 600;
}

p,
u,
b,
i,
span {
	font-size: 1rem;
	font-weight: 300;

	/* slowly oscillate the font weight for fun because im just a girlllll and im just quirky like that yuh */
	/* animation: timeGo 600s linear infinite; */
	/* font-weight: calc(300 + 600 * (cos(var(--timeTau)) * -0.5 + 0.5) ); */
}

hr {
	border: none;
	height: 2px;
	background-color: var(--avorio);
	border-radius: 2px;
}

sup,
sub {
	font-size: 0.6em;
}

a {
	color: var(--aurum);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--avorio);
	text-decoration: underline;
}

header,
nav {
	/* padding: calc(var(--gap) / 2); */
	/* minpad */
	padding: min(calc(var(--gap) / 2), 100vw - var(--gap));
	gap: calc(var(--gap) / 2);
}

nav a {
	cursor: pointer;
	width: 100%;
	flex: none;
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* border-radius: calc(var(--gap) / 2); */
}

nav a:first-of-type {
	border-top-left-radius: calc(var(--gap) / 2);
	border-top-right-radius: calc(var(--gap) / 2);
}

nav a:last-of-type {
	--b: calc(var(--gap) / 2);
	border-radius: 0 0 var(--b) var(--b);
	/*border-bottom-right-radius: calc(var(--gap) / 2);*/
}

header a:first-of-type {
	border-top-left-radius: calc(var(--gap) / 2);
	border-bottom-left-radius: calc(var(--gap) / 2);
}

header a:last-of-type {
	border-top-right-radius: calc(var(--gap) / 2);
	border-bottom-right-radius: calc(var(--gap) / 2);
}

header a,
nav a,
button,
.button {
	padding: calc(var(--gap) * .5) calc(var(--gap) * .75);
	color: var(--avorio);
	border: 1px solid var(--aurum);
}

header a:hover,
nav a:hover,
header a:focus-visible,
nav a:focus-visible {
	background-color: var(--subaegir);
}

nav a:focus-visible,
header a:focus-visible {
	outline: dashed 1px var(--aurum) !important;
	outline-offset: -.25rem;
}

nav a:hover {
	text-decoration: underline;
}

nav a.active {
	background-color: var(--aurum);
	color: var(--aegir);
	text-shadow: none;
}

nav a.active:focus-visible {
	outline: dashed 1px var(--aegir) !important;
}

footer,
.glass {
	/* minpad */
	padding: min(var(--gap), 100vw - var(--gap) * 2);
	word-break: break-word;
}

body {
	background-color: var(--aegir);
	margin: 0;

	/* holly would be sooo mad */
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	height: 100vh;
}

header {
	overflow-x: auto;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--aurum);
}

/* justify-content: center; breaks the horizontal scrolling, so we set auto margins on first and last */

header> :first-child {
	margin-left: auto;
}

header> :last-child {
	margin-right: auto;
}

footer {
	border-top: 1px solid var(--aurum);
	margin: auto 0 0 0;
}

.glass {
	border: 1px solid var(--aurum);
	border-radius: var(--gap);
}

main {
	display: flex;
	gap: var(--gap);
	margin: 0 auto;
	/* minpad */
	padding: 0 min(var(--gap), 100vw - var(--gap) * 4);
	max-width: 57rem;
	/* width 100% needed for it to not shrink */
	width: 100%;
	align-items: flex-start;
}

main>input[type="radio"] {
	display: none;
}

nav {
	display: flex;
	flex-direction: column;
	max-width: min(24rem, 33%);
	width: 15rem;
	max-height: calc(100vh - 2 * var(--gap));
	/* min-width: 8rem; */
	/* resize: horizontal; */
	position: sticky;
	top: var(--gap);
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid var(--aurum);

	border-radius: var(--gap);
}

section {
	flex: 1;
	flex-shrink: 0;
	min-width: 0;
}

article {
	display: none;
	gap: var(--gap);
	flex-direction: column;
}

article.active {
	display: flex;
}

#background {
	position: fixed;
	z-index: -8691;
	height: 100vh;
	width: 100vw;
	margin: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	image-rendering: pixelated;
	pointer-events: none;
}

header,
footer,
nav,
.glass {
	background-color: var(--aegir);
	backdrop-filter: blur(4vh);
	background-color: #231c54c0;
	text-shadow: 0px 0px 0.2em var(--aegir), 0px 0.1em 0.2em var(--noctulaegir);
	/* animation: 2s timeGo linear infinite;
    --j : calc(sin(var(--timeTau)) *  .5 + .5); */
	/* TODO : decide on a j value */
	--j: 0.66;
	box-shadow: 0 0 calc(var(--gap) * var(--j)) calc(var(--gap) * (1 - var(--j))) var(--aegir);
}

* {
	font-family: "inter", "twemoji", "linjawaso", sans-serif;
}

code,
.mono {
	font-family: "firacode", monospace;
}

/* scrollbars */

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-thumb {
	background: var(--aero);
	border: 3px solid transparent;
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--aurum);
	border: 3px solid transparent;
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
	background: var(--avorio);
	border: 3px solid transparent;
	background-clip: padding-box;
}

::-webkit-scrollbar-track {
	/* display:none; */
	background: var(--aegir);
	border-left: 1px solid var(--subaegir);
	border-top: 1px solid var(--subaegir);
}

::-webkit-scrollbar-corner {
	border-left: 1px solid var(--subaegir);
	border-top: 1px solid var(--subaegir);
	background: var(--aegir);
}

*::-webkit-scrollbar-corner {
	display: none;
}

*::-webkit-scrollbar {
	width: 18px;
	height: 0;
}

*::-webkit-scrollbar-track {
	background: transparent;
	border: transparent;
}

*::-webkit-scrollbar-thumb {
	background: var(--aero);
	border: 6px solid transparent;
	background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--aurum);
	border: 6px solid transparent;
	background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
	background: var(--avorio);
	border: 6px solid transparent;
	background-clip: padding-box;
}

/* INPUTS */

input[type="checkbox"] {
	display: inline-flex;
	appearance: none;
	width: 1rem;
	height: 1rem;
	margin: 0 0.25rem;
	background-color: var(--aegir);
	border: 1px solid var(--aurum);
	border-radius: 0.25rem;
	vertical-align: middle;
}

input[type="checkbox"]:checked {
	background-color: var(--aurum);
}

input[type="checkbox"]:disabled {
	border: 1px solid var(--superashen);
	background-color: var(--ashen);
}

input[type="checkbox"]:checked:disabled {
	background-color: var(--superashen);
}


input[type="checkbox"]:checked::after {
	content: "";

	color: var(--aegir);
	text-align: center;
	align-content: center;
	width: 100%;
	height: 100%;

	background-color: var(--aegir);
	mask-repeat: no-repeat;
	mask-position: center;
	mask: url('data:image/svg+xml,<svg viewBox="0 0 6.35 6.35" xmlns="http://www.w3.org/2000/svg"><path d="m1.35 3.63 1.23.81L5.55.66 2.58 5.64Z" fill="currentColor"/></svg>');
	/* TOAD: change this ugly check lol */
}

input[type="checkbox"]:checked:disabled::after {
	color: var(--subashen);
	background-color: var(--subashen);
}

input[type="checkbox"]:not(:disabled):hover,
input[type="radio"]:not(:disabled):hover {
	background-color: var(--subaegir);
}

input[type="checkbox"]:not(:disabled):checked:hover {
	background-color: var(--superaurum);
}

input[type="checkbox"]:not(:disabled):active,
input[type="radio"]:not(:disabled):active {
	background-color: var(--aero);
}

input[type="checkbox"]:not(:disabled):checked:active,
input[type="radio"]:not(:disabled):checked:active {
	background-color: var(--aero);
}

input[type="checkbox"]:not(:disabled):focus-visible,
input[type="radio"]:not(:disabled):focus-visible,
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
select:focus-visible {
	outline: dashed 1px var(--aurum);
	outline-offset: 2px;
}

input[type="radio"] {
	display: inline-flex;
	appearance: none;
	width: 1rem;
	height: 1rem;
	margin: 0 0.25rem;
	background-color: var(--aegir);
	border: 1px solid var(--aurum);
	border-radius: 100%;
	vertical-align: middle;
}

input[type="radio"]:checked {}

input[type="radio"]:not(:checked) {}

input[type="radio"]:disabled {
	border: 1px solid var(--superashen);
	background-color: var(--ashen);
}

input[type="radio"]:checked:after {
	content: "";

	color: var(--aurum);
	text-align: center;
	align-content: center;
	width: 100%;
	height: 100%;

	background-color: var(--aurum);
	mask-repeat: no-repeat;
	mask-position: center center;
	mask: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle r="5" cx="12" cy="12" fill="currentColor" /></svg>');

}

input[type="radio"]:checked:disabled:after {
	color: var(--superashen);
	background-color: var(--superashen);
}

input[type="radio"]:not(:disabled):checked:hover:after {
	color: var(--semisuperaurum);
	background-color: var(--semisuperaurum);
}

input[type="radio"]:not(:disabled):checked:active:after {
	color: var(--aegir);
	background-color: var(--aegir);
}

input[type="text"],
input[type="number"] {
	appearance: none;
	background-color: var(--aegir);
	border: 1px solid var(--aurum);
	font-size: 1rem;
	border-radius: .5rem;
	padding: .25rem .5rem;
	margin: .25rem;
}

input[type="text"]:hover,
input[type="number"]:hover {
	background-color: var(--subaegir);
}

input[type="text"]:disabled::placeholder,
input[type="number"]:disabled::placeholder {
	color: var(--superashen);
}

input[type="text"]:disabled,
input[type="number"]:disabled {
	border-color: var(--superashen);
	color: var(--superashen);
	background-color: var(--ashen);
}

input[type="text"]:invalid,
input[type="number"]:invalid {
	background-color: var(--noctulalizarin);
	border-color: var(--alizarin);
	color: var(--alizarin);
	text-decoration: underline wavy 0px;
}

select {
	/* appearance: none; */
	background-color: var(--aegir);
	border: 1px solid var(--aurum);
	font-size: 1rem;
	border-radius: .5rem;
	padding: .25rem .5rem;
	margin: .25rem;
}

select::after {
	content: "gong";
}

select:disabled {
	background-color: var(--ashen);
	color: var(--superashen);
	border-color: var(--superashen);
}

button,
.button {
	cursor: pointer;
	background-color: var(--aegir);
	border-radius: calc(var(--gap) / 2);
	font-size: 1rem;
}

button:hover,
button:focus-visible,
.button:hover,
.button:focus-visible {
	background-color: var(--subaegir);
}

button:focus-visible,
.button:focus-visible {
	outline: dashed 1px var(--aurum) !important;
	outline-offset: -.25rem;
}

button:active,
.button:active {
	background-color: var(--aurum);
	color: var(--aegir);
}

button:disabled,
.button:disabled {
	background-color: var(--ashen);
	color: var(--superashen);
	border-color: var(--superashen);
}

/* classes */

.badGrammar {
	text-decoration: 1px #5787ff double underline;
}

.badSpelling {
	text-decoration: 1px #ff4a4a underline wavy;
}

.bee {
	/* animation: timeGo 1s linear infinite; */

	/* transform: skew(calc(5deg * sin(var(--timeTau))), calc(5deg * cos(var(--timeTau)))); */
	transform: matrix3d(calc(sin((var(--timeTau) + var(--seed)) * 1156 + 13.765) / 4000 + 1),
			calc(sin((var(--timeTau) + var(--seed)) * 1456 + 13.288) * 0.001),
			calc(sin((var(--timeTau) + var(--seed)) * 1310 + 19.315) * 0.001),
			calc(sin((var(--timeTau) + var(--seed)) * 1157 + 14.102) * 0.001),
			calc(sin((var(--timeTau) + var(--seed)) * 1654 + 12.492) * 0.001),
			calc(sin((var(--timeTau) + var(--seed)) * 1647 + 15.300) * 0.001 + 1),
			calc(sin((var(--timeTau) + var(--seed)) * 1518 + 10.246) * 0.001),
			calc(sin((var(--timeTau) + var(--seed)) * 1378 + 13.511) * 0.001),
			calc(sin((var(--timeTau) + var(--seed)) * 1459 + 15.200) * 0.001),
			calc(sin((var(--timeTau) + var(--seed)) * 1259 + 10.442) * 0.001),
			calc(sin((var(--timeTau) + var(--seed)) * 1208 + 19.776) * 0.001 + 1),
			calc(sin((var(--timeTau) + var(--seed)) * 1165 + 11.464) * 0.001),
			calc(sin((var(--timeTau) + var(--seed)) * 1960 + 12.946) * 100),
			calc(sin((var(--timeTau) + var(--seed)) * 2580 + 11.503) * 100),
			calc(sin((var(--timeTau) + var(--seed)) * 2300 + 14.206) * 100),
			calc(sin((var(--timeTau) + var(--seed)) * 1481 + 16.762) * 0.901 + 1)) !important;
	animation: timeGo 2000s linear infinite;
}

/* @rules */

@-moz-document url-prefix() {
	html {
		scrollbar-width: thin;
		scrollbar-color: var(--aero) var(--subaegir);
	}

	* {
		scrollbar-width: thin;
		scrollbar-color: var(--aero) transparent;
	}
}

@media (max-width: 1080px),
(max-aspect-ratio: 1/1) {
	main {
		flex-direction: column;
	}

	nav {
		position: relative;
		top: unset;
		flex-direction: row;
		width: 100%;
		max-width: unset;
		overflow-x: auto;
		max-height: unset;
	}

	nav a {
		min-width: max-content;
		flex: 1 1 auto;
	}

	/* keep this here just in case if it fixes any problems later */
	/* nav>*:first-child {
                    margin-left: auto;
               }

               nav>*:last-child {
                    margin-right: auto;
               } */

	section {
		min-width: 0;
		max-width: 100%;
		align-self: stretch;
	}

	article {
		width: 100%;
	}

	nav a:first-of-type {
		border-radius: calc(var(--gap) / 2) 0 0 calc(var(--gap) / 2);
	}

	nav a:last-of-type {
		border-radius: 0 calc(var(--gap) / 2) calc(var(--gap) / 2) 0;
	}
}