:root {
	--background-image:
		linear-gradient(rgb(0,0,0,0) 20%, rgb(100,100,100,0.3) 20%, rgb(100,100,100,0.3) 70%, rgb(0,0,0,0) 70%);
	--background-size: 2px 2px;
}

html {
	color-scheme: light dark;
}

body {
	background-color: #00A3FF;
	background-image: var(--background-image);
	background-size: var(--background-size);

	font-family: System UI;
	font-size: 1.25rem;
	line-height: 1.5;
}

.navbar {
	position: sticky;
	top: 0;

	width: 97.1%;
	height: 3rem;
	margin-bottom: 2rem;
	padding: 1rem;

	display: flex;
	align-items: center;
	justify-content: left;
	flex-direction: row;

	gap: 2rem;

	background-color: #FFFFA3;
	background-image: var(--background-image);
	background-size: var(--background-size);
}

.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(800px, 1fr));
	grid-auto-rows: 400px;
	gap: 2rem;
}

.card {
	background-color: #00FFA3;
	background-image: var(--background-image);
	background-size: var(--background-size);

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}