:root {
	--background-color: #869591; /* metallic teal */
	--accent-dark: #314442; /* dark teal */
	--accent-light: #efe7d0; /* off white */
	--accent-alt: #fc9353; /* pinkish orange */
	--font: 'Josefin-Sans';
	--header-font: 'Cormorant-Garamond';
}

@font-face {
	font-family: 'Cormorant-Garamond';
	src: url('/fonts/CormorantGaramond-VariableFont_wght.woff2') format('woff2');
}

@font-face {
	font-family: 'Josefin-Sans';
	src: url('/fonts/JosefinSans-VariableFont_wght.woff2') format('woff2');
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: var(--font), sans-serif;
	overflow: hidden;
	line-height: 1.1em;
}

body {
	background-color: var(--background-color);
}

hr {
	border-color: var(--accent-dark);
}

a {
	color: var(--accent-dark);
}

img {
	width: 100%;
	background-size: cover;
	background-position: center;
}

figure {
	margin: 0;
}

video {
	width: 100%;
}

.container-overlay {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-image: url("/images/patterns/light_toast.avif");
	opacity: 0.8;
	mix-blend-mode: multiply;
	z-index: -5;
}

.container {
	display: flex;
/*	width: 100vw;*/
	height: calc(100vh - 2rem);
	margin: auto;
	margin-top: 1rem;
	margin-bottom: 1rem;
	max-width: 1200px;
}

.sidebar {
	flex: 0 0 30%;
	background-image: url('/images/abstract-potoki-forms.avif');
	background-size: cover;
	background-position: center;
	position: relative;
	padding: 20px;
	box-sizing: border-box;
	transition: flex-basis 0.15s ease-in-out;
}

.sidebar.collapsed {
	flex-basis: 60px;
}

.sidebar.collapsed .navigation-menu {
	display: none;
}

.sidebar.collapsed #navigation-toggle-button {
	right: 50%;
	transform: translateX(50%);
}

.has-submenu .submenu {
	display: none;
	padding-left: 16px;
}

.has-submenu.open .submenu {
	display: block;
}

.navigation-menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.navigation-menu li a {
	display: block;
	padding: 16px 24px;
	color: var(--accent-light);
	text-decoration: none;
	font-size: 1.3rem;
}

.submenu li a {
	font-size: 1rem;
}

.submenu-toggle::after {
	content: '▼';
	float: right;
	display: inline-block;
	font-size: 0.75em;
	transition: transform 0.3s ease;
}

.has-submenu.open .submenu-toggle::after {
	transform: rotate(-180deg);
}

.navigation-menu li a:hover {
	background-color: rgba(0, 0, 0, 0.35);
	cursor: pointer;
}

#navigation-toggle-button {
	position: absolute;
	top: 16px;
	right: 24px;
	font-size: 2em;
	color: white;
	cursor: pointer;
	user-select: none;
}

.main-content {
	position: relative;
	flex-grow: 1;
	padding: 32px;
	box-sizing: border-box;
	overflow-y: auto;
}

.main-content h1, h2, h3, h4, h5, h6 {
	font-family: var(--header-font), sans-serif;
	color: var(--accent-dark);
	line-height: 1.2em;
	margin: 0;
}

.main-content-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("/images/patterns/ricepaper2.avif");
	opacity: 0.55;
	z-index: -1;
}

.layered-shadow {
	box-shadow:
		0 1px 1px hsl(0deg 0% 0% / 0.075),
		0 2px 2px hsl(0deg 0% 0% / 0.075),
		0 4px 4px hsl(0deg 0% 0% / 0.075),
		0 8px 8px hsl(0deg 0% 0% / 0.075),
		0 16px 16px hsl(0deg 0% 0% / 0.075),
		0 32px 32px hsl(0deg 0% 0% / 0.075);
}

span.inline-code {
	font-family: "Courier New", monospace;
	color: var(--accent-alt);
	background-color: var(--accent-dark);
	padding: 2px;
	border-radius: 4px;
}

.right {
	text-align: right;
}

.left {
	text-align: left;
}

.justify {
	text-align: justify;
}

.link-container {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.link-right {
	margin-left: auto;
}

.image-row {
	display: flex;
	gap: 16px;
}

.image-row img {
	max-width: 50%;
	height: auto;
	flex: 1 1 auto;
	object-fit: contain;
}

.yt-video {
display: block;
  margin: 0 auto;
}