Refactoring to Typescript...

client/styles/main.scss

@@ -22,7 +22,7 @@ body {
 
     font-family: 'Lato', sans-serif;
     font-weight: 300;
-    font-size: 20px;
+    font-size: 18px;
 
     line-height: 1;
 }
@@ -70,7 +70,7 @@ input[type='text'] {
     cursor: pointer;
     font-family: 'Lato';
     font-weight: 600;
-    font-size: 18px;
+    font-size: 16px;
     color: #555;
 
     border: 1px solid #c8c8c8;
@@ -102,7 +102,7 @@ input[type='text'] {
 
         font-family: 'Lato';
         font-weight: 600;
-        font-size: 18px;
+        font-size: 16px;
         color: #555;
     }
 }
@@ -112,7 +112,7 @@ button {
 
     font-family: 'Lato';
     font-weight: 600;
-    font-size: 18px;
+    font-size: 16px;
     color: #555;
 
     border: 1px solid #c8c8c8;
@@ -199,7 +199,7 @@ $heading-scale: 1.25;
 .text-body {
     font-family: 'EB Garamond', serif;
     font-weight: 400;
-    font-size: 21px;
+    font-size: 18px;
 
     line-height: 1.41;
 
@@ -232,7 +232,7 @@ main {
     gap: 2rem;
 
     .subtitle {
-        font-size: 24px;
+        font-size: 22px;
     }
 }
 
@@ -301,6 +301,9 @@ header {
         display: flex;
         gap: 1rem;
 
+        height: 100%;
+        align-items: center;
+
         .nav-item {
             font-size: 24px;
             font-weight: 300;
@@ -327,7 +330,7 @@ header {
     background: #ffffff;
 
     display: grid;
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto 1fr auto;
     gap: 0.5rem;
 
     .problem-header {
@@ -336,7 +339,7 @@ header {
         gap: 0.25rem;
 
         .problem-title {
-            font-size: 24px;
+            font-size: 22px;
             font-weight: 400;
         }
     }
@@ -344,6 +347,10 @@ header {
     .problem-content {
         @extend .text-body;
     }
+
+    .problem-footer {
+        font-size: 16px;
+    }
 }
 
 .solution {
@@ -420,7 +427,7 @@ header {
 
         textarea {
             font-family: 'DM Mono', monospace;
-            font-size: 18px;
+            font-size: 16px;
 
             resize: none;
             overflow-y: hidden;