:root {
	color-scheme: dark light;
	scroll-behavior: smooth;

	--primary: #4e94e4;
	--secondary: #354b5f;
}

body {
	font-family: "Lato", -apple-system, Roboto, "Helvetica Neue", Arial,
		"Noto Sans", sans-serif;
	margin: 0;
	background-attachment: fixed;
	background-image: url("/images/background.jpg");
	color: white;
}

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

svg {
	vertical-align: middle;
}

img {
	max-width: 100%;
	max-height: 100%;
}

main {
	--gap: min(8vw, 4rem);
	display: flex;
	gap: var(--gap);
	padding: var(--gap);
	width: 100%;
	flex-direction: column;
	align-items: center;
}

:is(article, section, aside):not(section *, nav *, header *) {
	display: flex;
	flex-direction: column;
	border-radius: 1rem;
	background: rgb(0 0 0 / 0.3);
	padding: 2rem;
	width: 100%;
	scroll-margin: 1rem;
	transition: scale 0.2s;
}

:is(article, section, aside):not(section *, nav *, header *):hover {
	scale: 102%;
}

@media (min-width: 500px) {
	main > section {
		scroll-margin: 6rem;
	}
}

a {
	color: var(--primary);
}

a:not(:hover) {
	text-decoration: none;
}

input[type="text"] {
	display: flex;
	background: rgb(0 0 0 / 0.1);
	border: 2px solid var(--primary);
	backdrop-filter: blur(2rem);
	border-radius: 1rem;
	padding: 1rem;
	text-decoration: none;
	white-space: nowrap;
	font-size: 1.5rem;
	color: white;
	justify-content: center;
}