@font-face {
	font-display: swap;
	font-family: 'Atkinson Hyperlegible Next';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/atkinson-hyperlegible-next-v7-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Atkinson Hyperlegible Next';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/atkinson-hyperlegible-next-v7-latin-700.woff2') format('woff2');
}

body {
	--color: oklch(36% 0.233 266deg);
	font-family: 'Atkinson Hyperlegible Next', Inter, sans-serif;
	font-size: 1.1rem;
	color: var(--color);
	margin: 0;
}

header {
	padding: max(1em, 2vw);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	line-height: 1;
	align-items: center;

	ul {
		display: flex;
		gap: 1em;
		list-style-type: none;
		margin: 0;
		padding: 0;

		a {
			padding: .5em;
		}
	}
}

.logo {
	width: min(8em, 40vw);
}

a:has(.logo) {
	color: currentColor;
}

main {
	max-width: 65ch;
	margin: 2em auto;
}

p {
	line-height: 1.5;
}

h1,
h2,
h3 {
	line-height: 1.1;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2em, 4vw, 2.5em);
}

.start {
	padding: 1vw max(3vw, 1.5em);
	background: oklch(from currentColor l c h / calc(alpha - 0.92));
	border-radius: .6em;
	text-wrap: balance;
}

form {
	div {
		display: flex;
		flex-direction: column;
	}
}

label {
	font-weight: bold;
}

input {
	font: inherit;
	max-width: 25ch;
	padding: 0.7em 1em;
  border-radius: 0.1em;
  border: 1px solid var(--color);
  font-size: 1.1em;
}

button {
	font: inherit;
	background: var(--color);
	color: light-dark(white, black);
	border: 2px solid oklch(from var(--color) calc(l - .1) c h);
  border-bottom-width: 4px;
	padding: 0.7em 1em;
	font-weight: bold;
	font-size: 1.1em;
	border-radius: .2em;
	margin-block: .5em 1.5em;

	&:hover {
		background: oklch(from var(--color) calc(l + .05) c h);
	}

	&:active {
		background: oklch(from var(--color) calc(l - .1) c h);
	}
}

footer {
	text-align: center;
	color: #333;
}