html {
	scroll-behavior: smooth;
	overflow-x: clip;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.light-theme {
	--primary-background-color: #f7f7f7;

	--secondary-background-color: #f7f7f7;
	--secondary-background-color2: #ffffff;

	--ternary-background-color: #e9e9e9;
	--ternary-background-color2: #d6d6d6;

	--text-color: #303030;
	--accent-button-text-color: #e6e6e6;

	--accent-color: #0f65af;
	--accent-color-hover: #1a7ed6;
	--accent-color-active: #0058a5;

	--error-color: #e81e1e;
	--error-color-hover: #ff2a2a;
	--error-color-active: #de0101;
	--error-background-color: rgba(232, 30, 30, 0.15);
	--warning-color: #e8a21e;
	--warning-color-hover: #ffb52a;
	--warning-color-active: #de9201;
	--warning-background-color: rgba(232, 162, 30, 0.15);
	--success-color: #59a310;
	--success-color-hover: #71ca1b;
	--success-color-active: #4c9900;
	--success-background-color: rgba(89, 163, 16, 0.15);
	--information-color: var(--accent-color);
	--information-background-color: rgba(25, 115, 193, 0.15);

	color-scheme: light;
}
.dark-theme {
	--primary-background-color: #212121;

	--secondary-background-color: #3b3b3b;
	--secondary-background-color2: #3b3b3b;

	--ternary-background-color: #333333;
	--ternary-background-color2: #292929;

	--text-color: #e6e6e6;
	--accent-button-text-color: #303030;

	--accent-color: #4dc3ff;
	--accent-color-hover: #76d1ff;
	--accent-color-active: #35aae5;

	--error-color: #ff6060;
	--error-color-hover: #ff7676;
	--error-color-active: #e53535;
	--error-background-color: rgba(255, 96, 96, 0.15);
	--warning-color: #e8a21e;
	--warning-color-hover: #ffcf76;
	--warning-color-active: #e5a835;
	--warning-background-color: rgba(232, 162, 30, 0.15);
	--success-color: #7ad123;
	--success-color-hover: #bbff76;
	--success-color-active: #8de535;
	--success-background-color: rgba(122, 209, 35, 0.15);
	--information-color: var(--accent-color);
	--information-background-color: rgba(77, 195, 255, 0.15);

	color-scheme: dark;
}

body {
	--content-max-width: 1400px;
	--content-gap: clamp(80px, calc(100dvh * 0.168421053), 160px);

	--icon-gap: 16px;
	--icon-height: 48px;
	--icon-text-size: 36px;
	--icon-text-weight: 700;

	--navigation-gap: 32px;
	--navigation-root-padding-vertical: 32px;
	--navigation-text-size: 20px;
	--navigation-padding-horizontal: 16px;
	--navigation-padding-vertical: 12px;

	--h1-font-size: 48px;
	--h2-font-size: 36px;
	--h3-font-size: 28px;
	--h4-font-size: 24px;
	--h6-font-size: 32px;
	--p-font-size: 16px;

	--section-gap-vertical: 24px;
	--section-gap-vertical2x: calc(var(--section-gap-vertical) * 2);
	--section-gap-horizontal: 64px;

	--button-font-size: 24px;
	--button-padding-vertical: 16px;
	--button-padding-horizontal: 24px;
	--button-border-radius: 12px;

	--color-theme-duration: 0.333s;

	font-family: "Figtree", sans-serif;
	font-weight: 400;
	font-size: min(16px, var(--button-font-size));
	word-wrap: break-word;
	transition: background-color ease-out, color ease-out;
	transition-duration: var(--color-theme-duration);

	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0;
	box-sizing: border-box;

	background-color: var(--primary-background-color);
	color: var(--text-color);
	overflow-x: clip;
}

body > .body-wrapper {
	max-width: var(--content-max-width);
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--content-gap);
	padding-bottom: calc(var(--navigation-root-padding-vertical) * 2);
}

main {
	display: flex;
	gap: var(--content-gap);
	flex-direction: column;
}

section {
	display: flex;
}

h1 {
	font-size: var(--h1-font-size);
	font-weight: 700;
	margin: 0px;
}
h2 {
	font-size: var(--h2-font-size);
	font-weight: 700;
	margin: 0px;
}
h3 {
	font-size: var(--h3-font-size);
	font-weight: 700;
	margin: 0px;
}
h4 {
	font-size: var(--h4-font-size);
	font-weight: 700;
	margin: 0px;
}
h5 {
	font-size: var(--h5-font-size);
	font-weight: 600;
	margin: 0px;
}
h6 {
	font-size: var(--h6-font-size);
	font-weight: 500;
	margin: 0px;
}
p {
	font-size: var(--p-font-size);
	margin: 0px;
	line-height: 1.3;
}
p > br {
	display: block;
	content: "";
	margin-top: 0.5em;
}
strong {
	font-weight: 700;
}

img {
	object-fit: contain;
}

label {
	font-size: var(--h5-font-size);
	font-weight: 600;
	margin: 0px;
	-webkit-user-select: none;
	user-select: none;
}

input[type="file"]::-ms-browse,
input[type="file" i]::-webkit-file-upload-button {
	font: inherit;

	border-radius: calc(var(--button-border-radius) * 3 / 5);
	font-weight: 600;
	text-align: center;
	gap: 8px;
	background-color: transparent;
	border: 2px solid var(--accent-color);
	margin-inline-end: 12px;
	padding: calc(var(--button-padding-vertical) * 3 / 5)
		calc(var(--button-padding-horizontal) * 3 / 5);
	cursor: pointer;
	color: inherit;

	transition: background-color 87ms ease-out, border-color 87ms ease-out;
}
input[type="file"]::-ms-browse:hover,
input[type="file" i]::-webkit-file-upload-button:hover {
	background-color: var(--information-background-color);
	border-color: transparent;
}

input[type="file"]::file-selector-button {
	font: inherit;

	border-radius: calc(var(--button-border-radius) * 3 / 5);
	font-weight: 600;
	text-align: center;
	gap: 8px;
	background-color: transparent;
	border: 2px solid var(--accent-color);
	margin-inline-end: 12px;
	padding: calc(var(--button-padding-vertical) * 3 / 5)
		calc(var(--button-padding-horizontal) * 3 / 5);
	cursor: pointer;
	color: inherit;

	transition: background-color 87ms ease-out, border-color 87ms ease-out;
}
input[type="file"]::file-selector-button:hover {
	background-color: var(--information-background-color);
	border-color: transparent;
}

input,
textarea {
	font: inherit;
	color: inherit;
}
input[type],
textarea {
	padding: 16px;
	border: 2px solid var(--ternary-background-color2);
	border-radius: var(--button-border-radius);
	background-color: var(--primary-background-color);
	resize: none;
}
input[type] ~ span,
textarea ~ span {
	display: none;
}
input[type]:invalid ~ span,
textarea:invalid ~ span {
	display: initial;
}

input[type] ~ span.hidden,
textarea ~ span.hidden {
	display: none;
}

.no-scroll {
	overflow: hidden;
}
.hide-all {
	overflow: hidden;
}

#smoke-layer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	visibility: hidden;

	display: flex;

	transition: visibility, background-color, -webkit-backdrop-filter, backdrop-filter;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}
.no-scroll #smoke-layer {
	visibility: visible;
}
.hide-all #smoke-layer {
	visibility: visible;
	z-index: 101;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
	#smoke-layer {
		background-color: rgba(0, 0, 0, 0);
		-webkit-backdrop-filter: blur(0px);
		backdrop-filter: blur(0px);
	}
	.no-scroll #smoke-layer {
		background-color: rgba(0, 0, 0, 0.35);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
	.hide-all #smoke-layer {
		background-color: rgba(0, 0, 0, 0.35);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}
/* slightly transparent fallback for Firefox (not supporting backdrop-filter) */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
	#smoke-layer {
		background-color: rgba(0, 0, 0, 0.5);
	}
}