chore: styling

src/styles/controls.scss

@@ -15,6 +15,9 @@ button,
 
     transition: all 64ms linear;
 
+    display: grid;
+    place-content: center;
+
     &:hover {
         transform: translate(-1px, -1px);
         box-shadow: 5px 5px 0 0 #222;
@@ -67,16 +70,21 @@ input[type='password'] {
 
 form {
     display: grid;
-    gap: 0.5rem;
-    padding: 1rem;
+    gap: 1rem;
+    padding: 2rem;
 
     background: #38adc1;
 
+    min-width: 40ch;
+
     @include neo-brutalist-card($size: 3px, $offset: 9px);
 
     button,
     .button,
     [role='button'] {
+        padding-left: 3rem;
+        padding-right: 3rem;
+
         &.primary {
             background: #1c7f90;
             color: #f4fef7;
@@ -86,4 +94,23 @@ form {
             }
         }
     }
+
+    hr {
+        border: none;
+        width: 100%;
+        height: 2px;
+        background: #0003;
+
+        margin-top: 1rem;
+    }
+
+    .right {
+        justify-self: end;
+    }
+    .left {
+        justify-self: start;
+    }
+    .center {
+        justify-self: center;
+    }
 }

src/styles/main.scss

@@ -378,7 +378,10 @@ body {
 }
 
 .login {
+    background: #ddfaff;
+
     main {
+
         justify-self: center;
 
         display: flex;
@@ -386,9 +389,14 @@ body {
         align-items: center;
 
         max-width: 80ch;
-        padding: 5rem 0;
+        padding: 3rem 0;
 
-        gap: 5rem;
+        gap: 3rem;
+
+        h3 {
+            font-size: 28px;
+            font-weight: 600;
+        }
     }
 }