More UI

src/styles.css

@@ -5,9 +5,8 @@
 
 :root {
 	font-family: Noto Sans, sans-serif;
-	font-size: 16px;
-	line-height: 24px;
-	font-weight: 400;
+	font-size: 20px;
+	line-height: 30px;
 
 	color: #0f0f0f;
 	background-color: #f6f6f6;
@@ -17,26 +16,44 @@
 	-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-direction: row;
-	flex-wrap: wrap;
+	flex-flow: row wrap;
 	justify-content: space-around;
-	text-align: center;
 	gap: 3mm;
 }
 
 .v-container {
 	margin: auto;
 	display: flex;
-	flex-direction: column;
-	flex-wrap: wrap;
-	justify-content: space-around;
-	text-align: center;
-	gap: 3mm;
+	flex-flow: column wrap;
+	justify-content: space-between;
+	flex: 1;
+	min-height: fill;
+}
+
+label .logo {
+	height: 30px;
+}
+
+body {
+	min-height: 98vh;
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: space-between;
+}
+
+.nav {
+	flex: 0;
+	margin: 3mm;
+	padding: 3mm;
 }
 
 .logo {
@@ -46,7 +63,7 @@
 	transition: 0.75s;
 	max-height: 100%;
 	max-width: 100%;
-	width: 100%;
+	height: 100%;
 }
 
 .column {
@@ -56,20 +73,15 @@
 	margin: auto;
 }
 
-a {
-	font-weight: 500;
-	color: #646cff;
-	text-decoration: inherit;
-}
-
-a:hover {
-	color: #535bf2;
-}
-
 h1 {
 	text-align: center;
 }
 
+.shout {
+	font-size: 1.2cm;
+	font-family: hessenSagtNein;
+}
+
 button {
 	margin: auto;
 	flex: 1;
@@ -85,15 +97,11 @@ button {
 	background-color: #ffffff;
 	transition: border-color 0.25s;
 	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-}
-
-button {
 	cursor: pointer;
 }
 
-.shout {
-	font-size: 1.2cm;
-	font-family: hessenSagtNein;
+input[type=number] {
+	border: 1px solid #eee;
 }
 
 button:hover {
@@ -104,11 +112,6 @@ button:active {
 	background-color: #e8e8e8;
 }
 
-input,
-button {
-	outline: none;
-}
-
 @media (prefers-color-scheme: dark) {
 	:root {
 		color: #f6f6f6;