: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 {
	display: flex;
	gap: 3rem;
	flex-direction: column;
	padding-bottom: 2rem;
	align-items: center;
}

main > section {
	display: flex;
	flex-direction: column;
	border-radius: 1rem;
	background: rgb(0 0 0 / 0.3);
	padding: 2rem;
	width: 90%;
	scroll-margin: 1rem;
	transition: scale 0.2s;
}

main > section:hover {
	scale: 1.03;
}

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

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

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