clean up the shirt page some more including mobile stuff

src/routes/+layout.svelte

@@ -14,6 +14,8 @@
     while (Math.abs(random - hue) <= TOLERANCE) {
       random = Math.floor(Math.random() * 360);
     }
+
+    console.log(random);
     document.documentElement.style.setProperty(
       "--primary",
       String(random + "deg"),
@@ -45,7 +47,7 @@
     --br: 0.375rem;
     --bs: 2px 2px 9px var(--primary-8);
 
-    --primary: 42deg;
+    --primary: 225deg;
     --gradient-degree: var(--primary, 42deg);
     // --gradient-degree: 42deg;
     --l-base: 0.91;
@@ -158,6 +160,7 @@
   }
   #buddy {
     min-height: 100vh;
+    padding: 0 1rem;
     // background-color:;
     // '3px-tile.png',
     // 'arabesque.png',
@@ -228,6 +231,7 @@
       margin: 0;
       padding: 0;
       border: 0;
+      box-sizing: border-box;
       font-size: 100%;
       // font: inherit;
       color: var(--primary-1);
@@ -241,7 +245,9 @@
 
   nav {
     display: flex;
-    padding: 1rem;
+    flex-wrap: wrap;
+
+    padding: 0.5rem 0;
     gap: 1rem;
     justify-content: flex-end;
     text-shadow: 3px 3px 3px var(--secondary-7);
@@ -281,7 +287,7 @@
   main {
     display: flex;
     flex-direction: row;
-    padding: 1rem;
+    // padding: 1rem;
     justify-content: center;
   }
 

src/routes/shirts/+page.svelte

@@ -123,12 +123,14 @@
         {/each}
       </ul>
     </div>
+    <h4>I will be in touch if there are issues.</h4>
     <button>Submit</button>
   </fieldset>
 </form>
 
 <style lang="scss">
   form {
+    width: 100%;
     max-width: 45rem;
     display: flex;
     flex-direction: column;
@@ -155,6 +157,7 @@
         }
       }
       div {
+        width: 100%;
         ul {
           li {
             gap: 1rem;
@@ -178,7 +181,7 @@
       border: none;
       padding: 0.25rem 0.5rem;
       font-size: 1rem;
-      width: 25rem;
+      width: 100%;
     }
     button {
       font-weight: 700;