@font-face {
	font-family: hessenSagtNein;
	src: url(assets/hessen_sagt_nein.otf);
}

:root {
	font-family: Noto Sans, sans-serif;
	font-size: 20px;
	line-height: 30px;

	color: #0f0f0f;
	background-color: #f6f6f6;

	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;

	--b: #98d0c3;
	--v: #5c2483;
	--y: #f9b000;
}

.h-container {
	margin: auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	gap: 3mm;
}

.v-container {
	margin: auto;
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
	flex: 1;
	min-height: fill;
}

body {
	height: 98vh;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
}

.nav.h-container {
	flex: 0;
	margin: 3mm;
	padding: 3mm;
}

.logo {
	margin: auto;
	padding: 0em 0em;
	max-height: 100%;
	max-width: 100%;
	height: 100%;
}

.column {
	display: flex;
	justify-content: center;
	flex: 1;
	margin: auto;
}

h1 {
	text-align: center;
}

.shout {
	font-size: 1.2cm;
	font-family: hessenSagtNein;
}

button {
	margin: auto;
	flex: 1;
	min-width: 3.5cm;
	height: 2.5cm;
	border-radius: 8px;
	border: 1px solid transparent;
	padding: 0.5em 0.5em;
	font-size: 1em;
	font-weight: 500;
	font-family: inherit;
	color: #0f0f0f;
	background-color: #ffffff;
	transition: border-color 0.25s;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

#cafe-inventory form button {
	height: 1.5cm;
	font-size: 7mm;
}

input[type=number] {
	border: 1px solid #eee;
	text-align: right;
	font-size: inherit;
}

input[type=radio] {
	width: 100%;
	height: 7mm;
}

button:hover {
	border-color: #396cd8;
}
button:active {
	border-color: #396cd8;
	background-color: #e8e8e8;
}

#cafe-inventory form {
	font-size: 7mm;
	line-height: 11mm;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(1cm, 1fr) minmax(14ch, 2fr));
	grid-auto-flow: row;
	column-gap: 3mm;
}

.labelled-input {
	display: grid;
	grid-column-end: span 2;
	grid-row-end: span 1;
	grid-template-columns: subgrid;
}

.labelled-input :first-child {
	justify-self: end;
	align-self: baseline;
}

label .logo {
	height: 1.5cm;
}

#cafe-inventory form button {
	grid-column-end: -1;
}

#cafe-voucher {
	flex: 1;
}

#cafe-inventory {
	flex: 1;
}

#cafe {
	width: 100%;
}

@media (prefers-color-scheme: dark) {
	:root {
		color: #f6f6f6;
		background-color: #2f2f2f;
	}

	a:hover {
		color: #24c8db;
	}

	input,
	button {
		color: #ffffff;
		background-color: #0f0f0f98;
	}
	button:active {
		background-color: #0f0f0f69;
	}
}