@charset "UTF-8";

body {
	transition: color 0.2s !important;
	transition-delay: color 0s !important;
	background-color: var(--background-color);
}
.visible {
	opacity: 1;
	z-index: 1000;
	pointer-events: all;
}
.hidden {
	opacity: 0;
	z-index: 1;
	height: 0px;
	overflow: hidden;
	pointer-events: none;
}
.window {
	position: absolute;
	top: 0px;
	max-width: 800px;
	transition: 0.2s;
	left: 0;
	right: 0;
	margin-left: clamp(300px, 50%, calc(50% - 400px));
}
#viewport {
	position: fixed;
	top: 0px;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}
.non-selectable {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
:root {
	--background-color: #FFFFFF;
	--title-color: #000;
	--text-color: #000;
	--nav-color: #000;
	--subtitle-color: #7F7F7F;
	--link-color: #006400;
	--link-hover: #777;
	--box-background: #EEEEEE;
	--nav-bar-color: #ff;
	--mobile-width: 800px;
	--shadow-color: rgba(0, 0, 0, 0.6);
}

body.dark-theme {
	--background-color: #121212;
	--title-color: #FFF;
	--text-color: #ddd;
	--nav-color: #DBDBDB;
	--subtitle-color: #7F7F7F;
	--link-color: #32CD32;
	--link-hover: #777;
	--box-background: #222;
	--nav-bar-color: #000;
	--shadow-color: #ffffff52;
}
@media (max-width: 800px) {
	.window {
		left: 0px;
		margin-left: 0;
	}
	#viewport {
		top: 85px;
		height: calc(100% - 85px);
	}
	#nav {
		display: none !important;;
	}
	#header #nav-bar {
		display: flex !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}