Updated Css to be mobile first.

Author: anthonyb8

app/page.module.css

@@ -1,34 +1,36 @@
 .page {
+  height: 100vh;
   display: grid;
-  grid-template-rows: 20px 1fr 20px;
+  grid-template-rows: 0.65rem 1fr 0.65rem;
   align-items: center;
   justify-items: center;
   min-height: calc(100svh - 100px);
-  padding: 80px;
-  gap: 64px;
+  padding: 0.8rem;
+  gap: 1rem;
   font-family: var(--font-geist-sans);
 }
 
 .main {
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 0.8rem;
   grid-row-start: 2;
-  width: 60%;
+  width: 90%;
 }
 
 .main h1 {
-  font-size: 3rem;
+  font-size: 2.3rem;
   color: white;
 }
 
 .main h3 {
+  font-size: 1rem;
   color: grey;
   width: 80%;
 }
 
 .button_container {
-  width: 80%;
+  /* width: 40%; */
   display: flex;
   justify-content: center;
 }
@@ -41,3 +43,49 @@
   border: none;
   color: rgba(42, 42, 42, 0.9);
 }
+
+@media (min-width: 600px) {
+  .page {
+    display: grid;
+    grid-template-rows: 20px 1fr 20px;
+    align-items: center;
+    justify-items: center;
+    min-height: calc(100svh - 100px);
+    padding: 80px;
+    gap: 64px;
+    font-family: var(--font-geist-sans);
+  }
+
+  .main {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    grid-row-start: 2;
+    width: 60%;
+  }
+
+  .main h1 {
+    font-size: 3rem;
+    color: white;
+  }
+
+  .main h3 {
+    color: grey;
+    width: 80%;
+  }
+
+  .button_container {
+    width: 80%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .main button {
+    padding: 15 100;
+    border-radius: 50px;
+    font-size: 1.25rem;
+    font-weight: bold;
+    border: none;
+    color: rgba(42, 42, 42, 0.9);
+  }
+}

app/ui/socials.module.css

@@ -1,4 +1,3 @@
-
 .icon_bar {
   font-size: 1.5rem;
   color: #f4f0e0;
@@ -7,3 +6,14 @@
   padding-left: 1%;
   gap: 20px;
 }
+
+@media (min-width: 600px) {
+  .icon_bar {
+    font-size: 1.5rem;
+    color: #f4f0e0;
+    display: flex;
+    flex-direction: row;
+    padding-left: 1%;
+    gap: 20px;
+  }
+}

app/ui/top-nav.module.css

@@ -1,46 +1,89 @@
 .top_nav {
-  margin-left: 10%;
-  margin-right: 10%;
-  padding: 20px;
-  margin-top: 20px;
   background-color: rgb(42, 42, 42, 0.2);
   display: flex;
   align-items: center;
-  padding-right: 1%;
   color: white;
-  height: 80px;
-  border-radius: 20px;
+  height: 10%;
 }
 
 .nav_logo {
   display: flex;
 }
 
 .top_nav img {
-  width: 45px;
-  height: 45px;
+  width: 2.5rem;
+  height: 2.5rem;
 }
 
 .icon_bar {
   font-size: 1.5rem;
   color: #f4f0e0;
   display: flex;
   flex-direction: row;
-  padding-left: 1%;
-  gap: 20px;
+  padding-left: 5%;
+  /* gap: 0.8rem; */
 }
 
 .nav {
   width: 100%;
-  height: 80px;
+  height: 4rem;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding-right: 5%;
 }
 
 .top_nav_icons {
-  font-size: 1rem;
+  font-size: 0.7rem;
   color: white;
-  padding: 10px;
+  padding: 0.65rem;
+}
+
+@media (min-width: 600px) {
+  .top_nav {
+    margin-left: 10%;
+    margin-right: 10%;
+    padding: 20px;
+    margin-top: 20px;
+    background-color: rgb(42, 42, 42, 0.2);
+    display: flex;
+    align-items: center;
+    padding-right: 1%;
+    color: white;
+    height: 80px;
+    border-radius: 20px;
+  }
+
+  .nav_logo {
+    display: flex;
+  }
+
+  .top_nav img {
+    width: 45px;
+    height: 45px;
+  }
+
+  .icon_bar {
+    font-size: 1.5rem;
+    color: #f4f0e0;
+    display: flex;
+    flex-direction: row;
+    padding-left: 1%;
+    gap: 20px;
+  }
+
+  .nav {
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 5%;
+  }
+
+  .top_nav_icons {
+    font-size: 1rem;
+    color: white;
+    padding: 10px;
+  }
 }