@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&family=Rubik:ital,wght@0,300..900;1,300..900&family=Wix+Madefor+Display:wght@400..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&family=Pochaevsk&display=swap");

:root {
	--cover-width: 200px;

	--text-color: #fff;
	--background-color: #000;
	--hint-text-color: #bdbdbd;
	--strong-text-color: #ff0000;
	--important-text-color: #ff0000;

	color: #fff;
	font-family: "Geologica", sans-serif;
}

body {
	position: relative;
	margin: 0;
	width: max-content;
	height: 100vh;
	overflow-y: hidden;
	display: flex;
	background-color: var(--background-color);

	> header {
		width: 10rem;
		height: 100vh;
		background-color: var(--background-color);
	}

	> main {
		position: relative;
		margin-left: var(--cover-width);
		width: 300vw;
		height: 100vh;
		display: flex;
		overflow: hidden;
		background-color: var(--background-color);

		> section {
			z-index: 500;
		}
	}
}

a {
	font-family: "Cascadia Code";
	color: #00f;
	text-decoration: none;
	font-weight: 400;
}

.glass {
	border: var(--border, 1px) solid var(--border-color, #ffffff35);
	background-color: var(--glass-background-color, #f0f0f040);
	backdrop-filter: blur(var(--blur, 3px));
}

.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

strong {
	font-weight: 600;
	color: var(--strong-text-color, var(--text-color));
}