:root {
	--gap: 1rem;
	--content-width: 640px;
	--logo-ratio: 1.3958;

	color-scheme: light dark;
	--green-0: #152d0b;
	--green-1: #274f16;
	--green-2: #3d6f25;
	--green-3: #60a642;
	--green-4: #82d75a;
	--green-5: #a3ec81;
	--green-6: #ccf9b7;

	--green: var(--green-3);

	--bg2-green: light-dark(var(--green-6), var(--green-0));
	--bg1-green: light-dark(var(--green-5), var(--green-1));
	--bg0-green: light-dark(var(--green-4), var(--green-2));

	--fg0-green: light-dark(var(--green-2), var(--green-4));
	--fg1-green: light-dark(var(--green-1), var(--green-5));
	--fg2-green: light-dark(var(--green-0), var(--green-6));

	--bg: light-dark(#fff, #000);
	--bg-main: light-dark(#fffb, #0009);
	--bg-btn-unfocus: var(--fg0-green);
	--bg-btn-focus: var(--fg1-green);

	--fg: light-dark(#000, #fff);
	--fg-btn-unfocus: light-dark(#fffe, #000e);
	--fg-btn-focus: light-dark(#fff, #000);
}

* {
	box-sizing: border-box;
	transition:
		background-color .2s ease,
		color .2s ease,
		transform .2s ease;
}

html {
	min-height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	font-size: calc(8px + 1vmin);
	text-align: center;
	background-color: var(--bg0-green);
	color: var(--fg);
	font-family: sans-serif;
}
body:before{
	z-index: -1;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: ' ';
	background-image: url('/img/bog.jpg');
	background-size: cover;
	background-position: center;
	opacity: 0.5;
}

body {
	width: 100%;
	margin: 0;
	padding: 0;
}

.column {
	max-width: var(--content-width);
	margin-inline: auto;
	text-align: initial;
}

.text-center {
	text-align: center;
}

.float-right {
	float: inline-end;
	margin-inline-start: var(--gap);
}

.flex {
	display: flex;
	flex-flow: column nowrap;
	gap: calc(.5 * var(--gap));
}
.flex-center {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	gap: calc(.5 * var(--gap));
}

a[href]:not(.btn) {
	color: var(--fg1-green);
	text-decoration: none;
}
a[href]:not(.btn):visited { color: var(--fg0-green); }
a[href]:not(.btn):hover {
	color: var(--fg2-green);
	text-decoration: grammar-error;
}

.header-img {
	height: calc(min(100vw, var(--content-width)) / var(--logo-ratio) / 2 + var(--gap) * 4);
	background-size: 50%;
	background-position: center calc(var(--gap) * 2);
	background-repeat: no-repeat;
	background-image: url('/img/logo.svg'), url('/img/logo.webp'), url('/img/logo.png');
	color: var(--bg);
}
@media (max-width: 500px){
	.header-img {
		height: calc(100vw / var(--logo-ratio) * .67 + var(--gap) * 4);
		background-size: 67%;
		background-position: center calc(var(--gap) * 2);
	}
}

main {
	background-color: var(--bg-main);
	backdrop-filter: blur(4px);
	border-radius: calc(var(--gap) * 2);
	margin: 0 var(--gap) var(--gap);
	padding: var(--gap);
}
main > :not(:last-child) {
	margin-block-end: var(--gap);
}

nav, section {
	border: 1.5px solid var(--fg0-green);
}

nav {
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	justify-content: center;
	gap: calc(var(--gap) * 2);
	border-radius: var(--gap);
	padding: var(--gap);
	background-color: var(--bg);
	font-size: 1.125rem;
}

footer {
	font-size: 0.9rem;
}

.btn {
	display: flex;
	gap: 1ch;
	flex-direction: row;
	align-items: center;
	border-radius: 9999px;
	padding: var(--gap) calc(1.25 * var(--gap));
	background-color: var(--bg-btn-unfocus);
	color: var(--fg-btn-unfocus);

	font-size: 1.25rem;
	font-weight: bold;
	text-decoration: none;
}
.btn:hover {
	background-color: var(--bg-btn-focus);
	color: var(--fg-btn-focus);
}
.btn:active {
	transform: translateY(2px);
}
.btn > span, .btn > div {
	flex: 1 1;
}
.btn > img, .btn > svg {
	width: calc(2 * var(--gap));
	height: calc(2 * var(--gap));
}

.qrcode {
	width: min(100px, 25vmin);
	height: auto;
	border-radius: var(--gap);
}

section {
	flex-direction: column;
	border-radius: var(--gap);
	padding: var(--gap);
	background-color: var(--bg);
	color: var(--fg);
}
section > * {
	margin-block: .75rem;
}
section :first-child { margin-block-start: 0; }
section :last-child { margin-block-end: 0; }
section h1, section h2, section h3, section h4, section h5, section h6 {
	font-weight: bold;
	margin: .5em 0;
}
section h1 { font-size: 1.2rem; }
section h2 { font-size: 1.15rem; }
section h3 { font-size: 1.1rem; }
section h4 { font-size: 1.05rem; }
section h5 { font-size: 1rem; }
section h6 { font-size: .95rem; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
	width: 1em;
	height: 1em;
	transform: translateY(.12em);
}
section ol, section ul {
	padding-inline-start: 2rem;
}
section p {
	line-height: 1.6;
	text-indent: 3ch;
}