@import url('https://cache.lol/css/type.css');

* {
	transition: color .2s ease-in-out;
	transition: background .2s ease-in-out;
}

/* Variables */

/*
:root {
	--foreground-color: #ddd;
	--background-color: #343a40;
}
@media screen and (prefers-color-scheme: light) {
	:root {
		--foreground-color: #343a40;
		--background-color: #ddd;
	}
}
*/

/* Universals */
:root {
	--dark-foreground-color: #343a40;
}

/* Light Mode */
:root[color-mode="light"] {
	--foreground-color: #343a40;
	--background-color: #eee;
	--background-color-darker: #ddd;
	--yellow-color: #ffec99;
	--blue-color: #a5d8ff;
}

/* Dark Mode */
:root[color-mode="dark"] {
	--foreground-color: #ddd;
	--background-color: #343a40;
	--background-color-darker: #212529;
	--yellow-color: #fab005;
	--blue-color: #1c7ed6;
}

:root[color-mode="light"] .light--hidden {
	display: none;
}

:root[color-mode="dark"] .dark--hidden {
	display: none;
}

/* Colors */

.yellow {
	background: var(--yellow-color);
	color: var(--background-color);
}

/* Reset */

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	margin: 0;
}

article,
aside,
figure,
footer,
header,
aside,
main,
nav {
	display: block;
}


:root {
	--fluid-min-width: 320;
	--fluid-max-width: 1500;
	--fluid-min-size: 17;
	--fluid-max-size: 20;
	--fluid-min-ratio: 1.2;
	--fluid-max-ratio: 1.33;
	
	--fluid-screen: 100vw;
	--fluid-bp: calc((var(--fluid-screen) - ((var(--fluid-min-width) / 16) * 1rem)) / ((var(--fluid-max-width) / 16) - (var(--fluid-min-width) / 16)));
}

@media screen and (min-width: 1500px) {
	:root {
		--fluid-screen: calc(var(--fluid-max-width) * 1px);
	}
}

:root {
	--fluid-min-scale-0: var(--fluid-min-ratio);
	--fluid-min-scale-1: var(--fluid-min-scale-0) * var(--fluid-min-ratio);
	--fluid-min-scale-2: var(--fluid-min-scale-1) * var(--fluid-min-ratio);
	--fluid-min-scale-3: var(--fluid-min-scale-2) * var(--fluid-min-ratio);
	--fluid-min-scale-4: var(--fluid-min-scale-3) * var(--fluid-min-ratio);
	--fluid-min-scale-5: var(--fluid-min-scale-4) * var(--fluid-min-ratio);
	
	--fluid-max-scale-0: var(--fluid-max-ratio);
	--fluid-max-scale-1: var(--fluid-max-scale-0) * var(--fluid-max-ratio);
	--fluid-max-scale-2: var(--fluid-max-scale-1) * var(--fluid-max-ratio);
	--fluid-max-scale-3: var(--fluid-max-scale-2) * var(--fluid-max-ratio);
	--fluid-max-scale-4: var(--fluid-max-scale-3) * var(--fluid-max-ratio);
	--fluid-max-scale-5: var(--fluid-max-scale-4) * var(--fluid-max-ratio);
	
	--fluid-min-size-0: (var(--fluid-min-size)) / 16;
	--fluid-min-size-1: (var(--fluid-min-size) * var(--fluid-min-scale-0)) / 16;
	--fluid-min-size-2: (var(--fluid-min-size) * var(--fluid-min-scale-1)) / 16;
	--fluid-min-size-3: (var(--fluid-min-size) * var(--fluid-min-scale-2)) / 16;
	--fluid-min-size-4: (var(--fluid-min-size) * var(--fluid-min-scale-3)) / 16;
	--fluid-min-size-5: (var(--fluid-min-size) * var(--fluid-min-scale-4)) / 16;
	
	--fluid-max-size-0: (var(--fluid-max-size)) / 16;
	--fluid-max-size-1: (var(--fluid-max-size) * var(--fluid-max-scale-0)) / 16;
	--fluid-max-size-2: (var(--fluid-max-size) * var(--fluid-max-scale-1)) / 16;
	--fluid-max-size-3: (var(--fluid-max-size) * var(--fluid-max-scale-2)) / 16;
	--fluid-max-size-4: (var(--fluid-max-size) * var(--fluid-max-scale-3)) / 16;
	--fluid-max-size-5: (var(--fluid-max-size) * var(--fluid-max-scale-4)) / 16;
	
	--fluid-0: calc(((var(--fluid-min-size-0) * 1rem) + (var(--fluid-max-size-0) - var(--fluid-min-size-0)) * var(--fluid-bp)));
	--fluid-1: calc(((var(--fluid-min-size-1) * 1rem) + (var(--fluid-max-size-1) - var(--fluid-min-size-1)) * var(--fluid-bp)));
	--fluid-2: calc(((var(--fluid-min-size-2) * 1rem) + (var(--fluid-max-size-2) - var(--fluid-min-size-2)) * var(--fluid-bp)));
	--fluid-3: calc(((var(--fluid-min-size-3) * 1rem) + (var(--fluid-max-size-3) - var(--fluid-min-size-3)) * var(--fluid-bp)));
	--fluid-4: calc(((var(--fluid-min-size-4) * 1rem) + (var(--fluid-max-size-4) - var(--fluid-min-size-4)) * var(--fluid-bp)));
	--fluid-5: calc(((var(--fluid-min-size-5) * 1rem) + (var(--fluid-max-size-5) - var(--fluid-min-size-5)) * var(--fluid-bp)));
}

/* Spacing */

:root {
	--space-small: clamp(.5em, 5vw, 1em);
	--space: clamp(1em, 5vw, 2em);
}

/* Details */

summary {
	margin: var(--fluid-1) 0;
}

summary:hover {
	cursor: pointer;
}

/* Rule */

hr {
	border: 0;
	height: 1px;
	background: var(--foreground-color);
	margin: var(--fluid-2) 0;
}

/* Typography */

body, button {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	background: var(--background-color);
	color: var(--foreground-color);
	font: 400 var(--fluid-0) / 1.6 Lato, sans-serif;
}

h1,
h2,
h3,
h4 {
	font-weight: 900;
	line-height: 1.2;
	margin: 2rem 0 1rem 0;
}

h1 {
	font-size: var(--fluid-3);;
}

h2 {
	font-size: var(--fluid-2);
}

h3 {
	font-size: var(--fluid-1);
}

h4 {
	font-size: var(--fluid-0);
}

/*
.prose > p:first-of-type {
	font-size: var(--fluid-1);
	line-height: 1.4;
}
*/

/* Grid */

.wrap {
	padding-right: var(--fluid-1);
	padding-left: var(--fluid-1);
	margin-right: auto;
	margin-left: auto;
	width: 780px;
	max-width: 95%;
}

.nowrap {
	white-space: nowrap;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-small);
}

.box {
	
}

/* Color */

:root {
	--radius: 1em;
	--small-radius: .1em;
}

body {
	background: var(--background-color);
	color: var(--foreground-color);
	max-width: 1500px;
	margin: auto;
}

h1, h2, h3, h4 {
	font-family: 'VC Honey Deck', serif;
}

/* Header & Footer */

header, footer {
	display: flex;
	flex-wrap: wrap;
}

header section, footer section {
	padding: var(--space);
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	border: 0px solid red;
}

header a, footer a {
	color: var(--foreground-color);
	text-decoration: none;
}

header section nav, footer section nav {
	list-style-type: none;
}

/* Header */

header * {
	border: 0px dotted red;
}

header section {
	border: 0px dotted yellow;
}

header section h1 {
	font-family: 'VC Honey Black Banner', serif;
	margin: 0;
	font-size: var(--fluid-2);
}

header section h1 a img {
	width: 1.5em;
	margin: 0 .2em -.4em 0;
}

header section nav ul {
	margin: 0;
}

header section nav li {
	display: inline;
	margin-left: 1em;
	white-space: nowrap;
}

header section:nth-child(1) {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 10em;
}

header section:nth-child(2) {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 10em;
	text-align: right;
	
}

header section:nth-child(2) ul {
	padding: 0;
}

header section:nth-child(2) button, header section:nth-child(2) nav {
	display: inline-block;
}

header section:nth-child(2) button {
	background: var(--background-color);
	color: var(--foreground-color);
}

header section:nth-child(2) button:hover {
	cursor: pointer;
}

@media only screen and (max-width: 550px) {
	header section h1 img {
		display: none;
	}
}

/* Footer */

footer {
	border-top: 1px solid var(--foreground-color);
	font-size: 80%;
}

footer section:nth-child(1) {
	flex-basis: 14em;
}

footer section:nth-child(1) ul li {
	line-height: 2em;
	font-size: 110%;
}

footer section:nth-child(2) {
	flex-basis: 10em;
	flex-grow: 8;
}

footer section:nth-child(2) nav {
	margin: auto;
}

footer section:nth-child(2) ul {
	list-style-type: none;
}

footer section:nth-child(2) nav {
	column-width: 8em;
}

footer section:nth-child(3) {
	flex-basis: 18em;
	text-align: center;
}

footer section:nth-child(3) ul {
	margin-left: -1em;
}

footer section:nth-child(3) nav li {
	display: inline;
	margin-left: 1em;
}

footer section nav ul {
	margin: 0;
	padding: 0;
}

footer section nav .fa-ul {
	
}

/* Main */

main {
	padding: var(--space);
}

main h1:first-child {
	margin-top: 0;
}

/* Tables */

.table-container {
	overflow-x: auto;
	margin-bottom: 1em;
}

table {
	border-collapse: collapse;
	overflow-x: auto;
}

td, th {
	border: 1px solid var(--foreground-color);
	padding: var(--fluid-0);
}

th {
	text-align: left;
}

/* Links */

a:link, a:visited, a:hover, a:active {
	/*color: var(--foreground-color);*/
	color: inherit;
}

/* Boxes */

main section {
	display: flex;
	gap: var(--space);
}

main section box {
	padding: var(--space);
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
}

/* Lost & Found */

/*
@-moz-document url-prefix() {
	header section h1 a::after {
		top: -0.2em;
	}
}
*/


.breakable {
	overflow-wrap: break-word !important;
}

.monospace {
	font-family: 'MD IO 0.4';
}

::selection {
    background: #ecd25d;
    color: #212529;
}