More accessible font sizes

src/components/Sidebar.vue

@@ -70,6 +70,7 @@ export default defineComponent({
 	flex-direction: column;
 	padding: 1rem;
 	width: 23rem;
+	font-size: 1.5rem;
 	will-change: transform;
 	pointer-events: none;
 

src/scss/leaflet/_controls.scss

@@ -4,6 +4,7 @@
 	margin: 0;
 	box-sizing: border-box;
 	overflow: hidden;
+	font-size: 1.5rem;
 
 	a, button {
 		@extend %button;
@@ -65,17 +66,17 @@
 	padding: 0.5rem 1.5rem;
 
 	.value {
-		font-size: 1.6rem;
 		line-height: 1;
 		font-family: monospace;
 		white-space: pre;
+		font-size: 2rem;
 
 		&[data-label]:before {
 			content: attr(data-label);
 			display: block;
 			line-height: 1;
 			margin-bottom: 0.5rem;
-			font-size: 1.4rem;
+			font-size: 1.25rem;
 			font-family: Raleway, sans-serif;;
 		}
 
@@ -152,6 +153,7 @@
 
 .leaflet-bottom {
 	padding-bottom: 1rem;
+	align-items: stretch;
 
 	&.leaflet-left .leaflet-control + .leaflet-control {
 		margin-left: 1rem;

src/scss/style.scss

@@ -65,7 +65,8 @@
 }
 
 html {
-	font-size: .625em;
+	font-size: 62.5%;
+	font: -apple-system-body;
 }
 
 body {
@@ -73,7 +74,6 @@ body {
 	color: $global-text-color;
 	text-shadow: 0.1rem 0.1rem #000000;
 	letter-spacing: 0.02rem;
-	font-size: 1.2em;
 }
 
 html, body {
@@ -488,3 +488,14 @@ div.statusmessage {
 .pinnedloginbutton {
 	margin-right: 201px;
 }
+
+.leaflet-container {
+	font-family: inherit;
+	font-size: 1.5rem;
+	font-weight: inherit;
+	line-height: 1;
+}
+
+.leaflet-players-pane {
+	z-index: 600;
+}