:root {
	--color-primary: #b3df72;
	--color-primary-dark: #82b849;
	--color-grey: #a0a0a0;
	--color-text: #292a2e;
	--color-text-light: #fdfdfd;
	--color-secondary: rgb(233, 137, 47);
	--color-background: #b3df7220;
	--color-background-light: #fdfdfd;
	--color-background-copy: #9a9a96;
	--color-backgroundprimary: #b3df72;
	--color-background-primary-dark: #82b849;
	--color-surface: #ffffff;
	--preview-border: #ffffff;
	--color-border: #d7d7d2;
	--color-nav: #292a2e;
	--color-nav-hover: #111111;
	--color-muted-surface: #e6e6e6;
	--color-shadow: rgba(0, 0, 0, 0.3);
	--content-width: 1200px;
	--content-subpage-width: 900px;
	--sticky-height: 100px;
	--header-bar: 40px;
	--header-offset: calc(var(--header-bar) + env(safe-area-inset-top, 0px));
	color-scheme: light;
}

html[data-theme="dark"] {
	--color-primary: #b3df72;
	--color-primary-dark: #c5e88a;
	--color-grey: #9a9a96;
	--color-text: #ecece8;
	--color-text-light: #121410;
	--color-secondary: rgb(233, 137, 47);
	--color-background: #1a1c18;
	--color-background-light: #121410;
	--color-background-copy: #22251f;
	--color-background-primary: #3a5228;
	--color-background-primary-dark: #2a3d1c;
	--color-surface: #22251f;
	--color-border: #3a3d36;
	--preview-border: #ffffff;
	--color-nav: #ecece8;
	--color-nav-hover: #ffffff;
	--color-muted-surface: #2c2f29;
	--color-shadow: rgba(0, 0, 0, 0.55);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--color-primary: #b3df72;
		--color-primary-dark: #c5e88a;
		--color-grey: #9a9a96;
		--color-text: #ecece8;
		--color-text-light: #fdfdfd;
		--color-secondary: rgb(233, 137, 47);
		--color-background: #1a1c18;
		--color-background-light: #121410;
		--color-background-copy: #22251f;
		--color-background-primary: #3a5228;
		--color-background-primary-dark: #2a3d1c;
		--color-surface: #22251f;
		--color-border: #3a3d36;
		--color-nav: #ecece8;
		--color-nav-hover: #ffffff;
		--color-muted-surface: #2c2f29;
		--color-shadow: rgba(0, 0, 0, 0.55);
		color-scheme: dark;
	}
}
@font-face {
	font-family: korolev;
	src: url("/assets/fonts/korolev-medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: korolev;
	src: url("/assets/fonts/korolev-medium-italic.otf") format("opentype");
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: korolev;
	src: url("/assets/fonts/korolev-bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: korolev;
	src: url("/assets/fonts/korolev-bold-italic.otf") format("opentype");
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: oscine;
	src: url("/assets/fonts/oscine-regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: oscine;
	src: url("/assets/fonts/oscine-bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: oscine;
	src: url("/assets/fonts/oscine-bolditalic.otf") format("opentype");
	font-weight: 700;
	font-style: italic;
}

* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	container-type: scroll-state;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-family: korolev, Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.5;
	color: var(--color-text);
	background-color: var(--color-background-light);
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}
a {
	color: var(--color-primary-dark);
}
header {
	background-color: var(--color-background-light);
	margin: 0;
	height: var(--header-offset);
	padding-top: env(safe-area-inset-top, 0px);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transition: background-color 0.2s ease;
}
.container {
	width: calc(
		300px +
		progress(100dvw, 300px, var(--content-width)) *
		calc(var(--content-width) - 300px - 20px)
	);
	margin: 0 auto;
	padding: 10px;
	position: relative;
}

.cards-container {
	width: auto;
	max-width: 90dvw;
}
header .container {
	display: flex;
	justify-content: space-between;
	align-items: start;
}
header .header-tools {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

header figure.logo {
	display: flex;
	margin: 0;
	padding: 0;
	max-height: 50px;
	align-items: start;
	gap: 0;
	z-index: 1;
}
header figure figcaption {
	padding-top: 8px;
	font-size: 0.8rem;
	font-weight: bold;
	font-family: oscine, Tahoma, Geneva, Verdana, sans-serif;
	color: var(--color-primary-dark);
}

header figure.logo img {
	height: 40px;
	width: 40px;
	border-radius: 50%;
	border: 4px solid var(--color-background-light);
}

h1,
h2 {
	color: var(--color-primary-dark);
	font-family: oscine, Tahoma, Geneva, Verdana, sans-serif;
}
.header h1,
.header h2 {
	color: var(--color-background-light);
}
.block-container {
	max-width: 900px;
	margin: auto;
}

.block-content {
	margin: auto auto auto 0;
}
.block-container {
	display: flex;
	flex-direction: row;
	gap: 0px;
	align-content: flex-start;
	align-items: flex-start;
	justify-content: space-between;
	padding-block: 32px;
}
section.sub-page {
	margin-top: 2rem;
}
section.block {
	width: 100%;
	padding-block: 20px;
}
.home-blocks section.block:nth-child(odd) {
	background-color: var(--color-background-light);
}
.home-blocks section.block:nth-child(even) {
	background-color: var(--color-background);
}
.home-blocks section.block .block-container {
	flex-direction: column;
}
.block-image {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	box-sizing: border-box;
	padding: 0px;
}
.block-image-container {
	padding: 0px;
}
.block-link {
	text-align: center;
}
@media (min-width: 768px) {
	header figure.logo {
		gap: 1rem;
	}
	header figure figcaption {
		padding-top: 5px;
		font-size: 1.1rem;
	}

	.block-container {
		gap: 20px;
		padding-block: 0px;
	}
	.block-image-container {
		padding: 48px;
	}
	.block-image {
		--w: 250px; /* image width */
		--r: 1; /* image ratio */
		--c: 113px; /* control the size of the decoration */

		width: var(--w);
		box-sizing: border-box;
		aspect-ratio: var(--r);
		object-fit: cover;
		--_g:
			calc(100% - var(--w) / 2) / calc(var(--w) * (1 + 1 / var(--r)) - var(--c));
		background: repeating-conic-gradient(from 45deg, #0000 0 25%, #0035 0 50%)
			var(--_g);
		-webkit-mask: repeating-conic-gradient(from 45deg, #000 0 25%, #0035 0 50%)
			var(--_g);
		mask: repeating-conic-gradient(from 45deg, #000 0 25%, #0035 0 50%)
			var(--_g);
	}

	.home-blocks section.block:nth-child(even) {
		flex-direction: row;
	}
	.home-blocks section.block:nth-child(odd) .block-container {
		flex-direction: row-reverse;
	}
	.home-blocks section.block:nth-child(even) .block-container {
		flex-direction: row;
	}
	.home-blocks section.block:nth-child(odd) .block-image {
		transform: rotate(10deg);
	}
	.home-blocks section.block:nth-child(even) .block-image {
		transform: rotate(-10deg);
	}
}
.button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 4px 35px;
	border: 0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.75;
	text-decoration: none;
	background-color: var(--color-secondary);
	color: var(--color-background-light);
	cursor: pointer;
}

.button-primary {
	background: var(--color-primary);
	color: #1d1d1b;
}
.button:hover {
	filter: brightness(0.85);
	box-shadow: var(--color-shadow) 0px 10px 30px;
}
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--color-nav);
	cursor: pointer;
}
.theme-toggle:hover {
	color: var(--color-primary-dark);
}
.theme-toggle .material-symbols-outlined {
	font-size: 1.35rem;
	line-height: 1;
}
.theme-toggle .icon-light {
	display: none;
}
html[data-theme="dark"] .theme-toggle .icon-dark {
	display: none;
}
html[data-theme="dark"] .theme-toggle .icon-light {
	display: inline;
}
div.week-container p {
	padding-right: 100px;
}
div.post-week-content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	justify-content: space-between;
}
div.post-week-content h1 {
	margin-bottom: 0;
}
div.post-week {
	font-size: 20px;
	font-weight: bold;
}
div.post-week-image {
	display: flex;
	flex-direction: row;
	gap: 20px;
}
div.week-image figure img {
	width: 400px;
	height: auto;
}
main figure {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 1px solid var(--preview-border);
	padding: 10px;
	width: clamp(300px, 50%, 600px);
	max-width: 100%;
	margin: 8px 0;
}
main figure.small {
	width: 33%;
	max-width: 33%;
}
main figure.medium {
	width: 50%;
	max-width: 50%;
}
main figure.large {
	width: 100%;
	max-width: min(100%, 600px);
}
main figure img {
	max-width: 100%;
	height: auto;
	min-width: 0;
}
main figure figcaption {
	font-style: italic;
	text-align: center;
}
.week-copy figure:has(+ figure),
.week-copy figure + figure {
	width: 40%;
	display: inline-block;
}
.week-copy figure + figure {
	margin-left: 0.5rem;
}
.week-copy figure:has(+ figure) img,
.week-copy figure + figure img {
	width: 100%;
	height: auto;
}
.container.preview-container {
	width: 50px;
	height: 50px;
	margin: 0;
	cursor: pointer;
}
.preview {
	position: absolute;
	bottom: 0;
	left: 0;
	width: fit-content;
	display: flex;
	flex-direction: column;
	font-weight: 600;
	align-items: center;
}
.preview-image {
	width: 50px;
	height: 50px;
	aspect-ratio: auto;
	border: solid 2px var(--preview-border);
	border-radius: 5px;
	background-size: cover;
	background-position: center;
	color: #ffffff;
	font-size: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.week-navigator {
	position: sticky;
	bottom: auto;
	top: 3rem;
	align-self: start;
}
@media (max-width: 599px) {
	.week-navigator {
		position: fixed;
		top: 0;
		align-self: auto;
	}
	#week-cards-container {
		display: block;
	}
}
.week-copy {
	width: 80%;
	margin: 0 auto;
}

#week-cards-container {
	display: flex;
	flex-direction: row;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	position: relative;
}
.week-cards {
	flex: 1;
	min-width: 0;
}
.arrow-button {
	height: 50px;
	width: 50px;
	border-radius: 4px;
	border: 2px solid var(--preview-border);
	font-size: 36px;
	cursor: pointer;
}