make app look more similar across browsers

frontend/public/global.css

@@ -9,6 +9,15 @@
 	src: url("assets/woff2/iosevka-waffle-regular.woff2") format("woff2");
 }
 
+@font-face {
+	font-family: 'Iosevka Waffle Web';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('assets/woff2/iosevka-waffle-bold.woff2') format('woff2');
+}
+
 /* top-level */
 
 :root {
@@ -19,6 +28,7 @@
 	--foreground-color-1: rgb(253, 254, 255);
 	--foreground-color-2: rgb(218, 219, 220);
 	--foreground-color-3: rgb(153, 154, 155);
+	--foreground-color-4: rgb(123, 124, 125);
 
 	--purple-1: hsl(280, 88%, 50%);
 	--blue-1: hsl(200, 88%, 50%);
@@ -67,6 +77,8 @@ html, body {
 }
 
 body {
+	color-scheme: dark;
+	accent-color: var(--purple-2);
 	color: var(--foreground-color-1);
 	background-color: var(--background-color-1);
 	font-size: 100%;
@@ -192,6 +204,10 @@ body {
 	line-height: inherit;
 }
 
+.input::placeholder {
+	color: var(--foreground-color-3);
+}
+
 /* button */
 
 .button {
@@ -206,7 +222,7 @@ body {
 }
 
 .button:hover {
-	background-color: var(--background-color-3)
+	background-color: var(--background-color-3);
 }
 
 .button-accent {
@@ -360,6 +376,11 @@ body {
 	box-sizing: border-box;
 }
 
+/* firefox placeholder */
+::-moz-placeholder {
+	opacity: 1;
+}
+
 html {
 	line-height: 1.15;
 	-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */

frontend/src/components/Main.svelte

@@ -11,6 +11,8 @@
     {#if $theme === "light"}
         <style>
             body {
+                color-scheme: light;
+
                 --foreground-color-0: hsl(180, 11%, 6%);
                 --foreground-color-1: hsl(180, 11%, 7%);
                 --foreground-color-2: hsl(180, 11%, 11%);

frontend/src/components/MessageInput.svelte

@@ -125,7 +125,7 @@
     }
 
     .message-input::placeholder {
-        color: var(--foreground-color-3);
+        color: var(--foreground-color-4);
     }
 
     .send-button {