diff --git a/main.css b/main.css
index 36739db..e9f4ebe 100644
--- a/main.css
+++ b/main.css
@@ -6,6 +6,9 @@
 	--middle-accent:	rgba(128,128,128,0.1);
 	--middle-shade:		rgba(128,128,128,0.5);
 	--shadows-color:	rgba(138,138,138,1);
+	--ui-height:		5vh;
+	--ui-half-height:	calc(var(--ui-height) / 2);
+	--ui-quarter-height:	calc(var(--ui-half-height) / 2);
 	&.darkmode {
 		--foreground-high:	rgba(250,250,250,0.5);
 		--foreground-low:	rgba(200,200,200,1);
@@ -32,8 +35,8 @@ body {
 }
 
 #navigation {
-	padding-top:25px;
-	height: 25px;
+	padding-top: var(--ui-half-height);
+	height: var(--ui-half-height);
 	box-shadow: inset 0 -2px 3px 0 var(--shadows-color);
 }
 
@@ -94,14 +97,16 @@ body {
 
 .board_tab {
 	display: inline-block;
-	height: 24px;
-	width: 100px;
+	height: var(--ui-half-height);
+	min-width: 100px;
 	border: solid 1px var(--foreground-low);
 	color: var(--foreground-high);
 	border-bottom: unset;
 	border-radius: 15px 15px 0 0;
 	background: var(--background-low);
 	text-align: center;
+	line-height: var(--ui-half-height);
+	font-size: var(--ui-quarter-height);
 }
 
 .active_board {
@@ -141,11 +146,11 @@ body {
 }
 
 .title_bar {
-	height: 50px;
+	height: var(--ui-height);
 	box-shadow: inset 0 -2px 3px 0 var(--shadows-color);
 	display: flex;
 	justify-content: stretch;
-	font-size: 32pt;
+	font-size: var(--ui-half-height);
 	user-select: none;
 }
 
@@ -158,17 +163,18 @@ body {
 	display: inline-block;
 	background: var(--middle-accent);
 	box-shadow: inset 2px 2px 2px 0 var(--middle-shade);
-	width: 50px;
+	width: var(--ui-height);
 	text-align: center;
 	cursor: pointer;
+	line-height: var(--ui-height);
 }
 
 .options_button {
 	position: absolute;
-	height: 50px;
+	height: var(--ui-height);
 	top: 0;
 	right: 0;
-	font-size: 32pt;
+	font-size: var(--ui-half-height);
 }
 
 .focused {