@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

body {
	line-height: 1.5;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
textarea,
select {
	font: inherit;
}

button {
	padding: 0;
	border: 0;
	border-radius: 0;
	font: inherit;
	color: inherit;
	border: 1px solid currentColor;
	background-color: transparent;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
	color: inherit;
}

@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;
	}
}

html {
	color-scheme: light dark;
}

body {
	font-family: "Geist", sans-serif;
	display: grid;
	min-height: 100dvh;
}

.theme-block {
	background-color: light-dark(#f2f5f7, #111);
	color: light-dark(#000, #fff);
	display: grid;
	place-items: center;
}

.theme-block:first-of-type {
	color-scheme: light;
}

.theme-block:last-of-type {
	color-scheme: dark;
}

.header {
	container: headerContainer / inline-size;
	padding-block: clamp(0.5rem, 3vw, 0.75rem);
	padding-inline-start: clamp(1.25rem, 5vw, 1.5rem);
	padding-inline-end: clamp(0.5rem, 3vw, 0.75rem);
	margin-inline: auto;
	width: min(60rem, 95%);
	background-color: light-dark(#fff, #222);
	border: 1px solid light-dark(#ddd, #444);
	border-radius: 0.75rem;
	column-gap: 5cqi;
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 5cqi;
}

.header-logo {
	flex-shrink: 0;
	color: light-dark(#0085ff, #0085ff);
	font-size: 2em;
	margin-inline-end: auto; // To align nav in the middle
	text-decoration: none;
}

.header-logo span {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.header-logo:hover {
	color: light-dark(
		color-mix(in srgb, #000 20%, #0085ff),
		color-mix(in srgb, #fff 20%, #0085ff)
	);
}

.header-menu-toggle {
	margin-inline-start: auto; // To align nav in the middle
	border: 0;
	border-radius: 0.375rem;
	padding-block: 0.5em;
	padding-inline-start: 1.25em;
	padding-inline-end: 1em;
	display: flex;
	align-items: center;
	column-gap: 0.5em;
	border: 1px solid light-dark(#ddd, #444);
}

.header-menu-toggle:hover {
	background-color: light-dark(#f2f2f2, #2c2c2c);
}

.header-menu-toggle * {
	flex-shrink: 0;
}

.header-menu-toggle svg {
	font-size: 1.5em;
}

@container headerContainer (max-width: 30rem) {
	.header-menu-toggle {
		aspect-ratio: 1;
		padding-inline: 0.5em;
	}

	.header-menu-toggle span {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

.header-navigation {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5cqi;
}

.header-link {
	text-decoration: none;
	display: inline-block;
	border-radius: 0.375rem;
	background-color: transparent;
	padding: 0.5em 0.75em;
}

.header-link:hover {
	background-color: light-dark(#eee, #333);
}