@font-face {
	font-family: "Poppins";
	src: url("fonts/regular.ttf");
	font-weight: normal;
}

@font-face {
	font-family: "Poppins";
	src: url("fonts/bold.ttf");
	font-weight: bold;
}

:root {
	--background: white;
	--color: black;
}

body {
	max-width: 100ch;
	margin: auto;
	padding: 2.5rem;
	transform: skew(0, -10deg);
	transform-origin: right;
	background: var(--background);
	color: var(--color);
	font-family: "Poppins", system-ui;
	text-align: center;

	& > :first-child {
		margin-top: auto;
	}

	& > :last-child {
		margin-bottom: auto;
	}
}

h1 {
	font-size: 5rem;
	line-height: 100%;
}

h2 {
	font-size: 2.5rem;
}

button {
	padding: 0.5rem 0.75rem;
	background: unset;
	color: inherit;
	border: 0.25rem solid;
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: bold;
	cursor: pointer;

	&:hover,
	&:focus {
		background: var(--color);
		color: var(--background);
		border-color: var(--color);
	}
}

*:has(+ #board) {
	margin-bottom: 5rem;
}

#board {
	display: grid;
	grid-template: repeat(5, 1fr) / repeat(5, 1fr);
	gap: 0.5rem;

	& > div {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		aspect-ratio: 1 / 1;
		box-sizing: border-box;
		padding: 0.5rem 0.75rem;
		outline: 0.5rem solid;

		&:last-child {
			grid-area: 3 / 3;
		}
	}
}

#board + * {
	margin-top: 5rem;
}

@media (prefers-color-scheme: dark) {
	body {
		--background: black;
		--color: white;
	}
}

@media print {
	body > :not(h1):not(#board) {
		display: none;
	}
}

@media (scripting: none) {
	body {
		overflow: hidden;
		transform-origin: unset;

		& > :not(noscript) {
			display: none;
		}
	}

	noscript {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
	}
}