refactor: 🔥 roll own fonts + toby styles XD

index.css

@@ -1,14 +1,33 @@
-* {
-  font-family: "JetBrains Mono Variable", monospace;
+@font-face {
+  font-family: "JetBrains Mono";
+  font-weight: 400;
+  font-style: normal;
+  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"), url("fonts/jetbrains-mono-latin-400-normal.woff") format("woff");
 }
 
-*:not(h1) {
-  font-size: 3vh;
+@font-face {
+  font-family: "JetBrains Mono";
+  font-weight: 700;
+  font-style: normal;
+  src: url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"), url("fonts/jetbrains-mono-latin-700-normal.woff") format("woff");
+}
+
+body {
+  font-family: JetBrains Mono, monospace;
+  font-size: 1.2rem;
+}
+
+button,
+input[type="submit"] {
+  font-family: JetBrains Mono, monospace;
+  font-size: 1.2rem;
+  cursor: pointer;
+  border: none;
 }
 
 input[type="checkbox"] {
-  width: 3vh;
-  height: 3vh;
+  width: 1.2rem;
+  height: 1.2rem;
 }
 
 .avatar {
@@ -30,3 +49,7 @@ input[type="checkbox"] {
   display: flex;
   align-items: end;
 }
+
+ul li {
+  margin-bottom: 0.5rem;
+}

index.html

@@ -4,10 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet" />
-
     <link rel="stylesheet" href="index.css" />
 
     <link rel="stylesheet" id="theme" href="light.css" />
@@ -215,7 +211,7 @@ <h1>Random Issue Picker</h1>
       type="text"
       id="url"
       name="url"
-      style="width: 100%; max-width: 750px"
+      style="width: 100%; max-width: 40rem"
       onkeypress="this.onchange();"
       onpaste="this.onchange();"
       oninput="this.onchange();"
@@ -290,8 +286,8 @@ <h1>Random Issue Picker</h1>
 
     <div style="display: flex; align-items: center; margin-top: 2vh">
       <button onclick="openRandomIssue()">Pick random issue</button>
-      <input style="margin: 0 0 0 2vw" type="checkbox" id="openInNewTab" onchange="localStorage.setItem('openInNewTab', this.checked)" />
-      <label style="margin: 0 0 0 1vw" for="openInNewTab">Open in new tab</label>
+      <input style="margin-left: 2rem" type="checkbox" id="openInNewTab" onchange="localStorage.setItem('openInNewTab', this.checked)" />
+      <label style="margin-left: 1rem" for="openInNewTab">Open in new tab</label>
     </div>
 
     <script>