* {
	padding: 0;
	margin: 0;

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

:root {
	color-scheme: light dark;

	--black: oklch(0% 0 0);
	--white: oklch(100% 0 0);

	--deep_green: oklch(24% 0.03 105.5);
	--brown_green: oklch(20% 0.014 100.7);

	--cream: oklch(98% 0.04 98);

	--yellow: oklch(81.61% 0.17046 77.4296);
	--orange: oklch(65.2% 0.236081 33.728);
	--magenta: oklch(49.52% 0.2129 342.33);
}

html {
	overscroll-behavior-y: none;
	scroll-padding-top: 5rem;
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	margin: 0 3rem;
	color: light-dark(var(--black), var(--white));
	background: light-dark(var(--cream), var(--deep_green));
	transition: 0.25s;
	height: 100%;
}

main {
	display: flex;
	gap: 3rem;
	margin: 5rem 0;
	flex-grow: 1;

	> div {
		min-width: 0;
	}
}

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

.visually-hidden {
	position: absolute;
	clip: rect(0, 0, 0, 0);
	overflow: hidden;
	height: 0;
}

@media (max-width: 45rem) {
	body {
		margin: 0 0.8rem;
	}

	main {
		flex-direction: column;
		gap: 0;
	}
}