body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	margin: 1rem;
}

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

	select {
		color: white;
		background-color: black;
		border-color: white;
	}

	a {
		color: #81b3eb;
	}

	a:hover {
		color: #b3d1f3;
		text-decoration: underline;
	}
}

form#parameters {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.zone {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.teams {
	display: grid;
	column-gap: 1rem;
	grid-template-columns: min-content min-content;
	grid-template-rows: min-content min-content;
}

@media only screen and (max-width: 500px) {
	body {
		font-size: 1.25rem;
	}

	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	select {
		font-size: 1.25rem;
	}

	.teams {
		display: flex;
		flex-direction: column;
	}
}

#north {
	grid-column: 1;
	grid-row: 1;
}

#ships {
	grid-column: 2;
	grid-row: 1;
}

#south {
	grid-column: 1;
	grid-row: 2;
}

#southBack {
	grid-column: 2;
	grid-row: 2;
}