1 files changed, 44 insertions, 22 deletions

diff --git a/styles.css b/styles.css
index 2b192c8..aa35b2b 100755
--- a/styles.css
+++ b/styles.css
@@ -149,11 +149,15 @@ nav {
     overflow-x: hidden;
     transition: 0.4s;
     margin: 0;
+    background-color: #222E50ee;
+}
+
+.sidepanel-menu {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
-    background-color: #222E50ee;
+    height: 100%;
+    padding: 2rem;
 }
 
 .sidepanel a {
@@ -194,7 +198,7 @@ nav {
     position: fixed;
     height: fit-content;
     top: 0;
-    width: 100vw;
+    width: 100%;
     justify-content: space-between;
     background-color: rgb(43,42,45,0.6);
     margin: 0;
@@ -531,7 +535,6 @@ convenience for helpful links
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
     width: fit-content;
     margin: 10px 0;
     text-decoration: none;
@@ -567,7 +570,7 @@ staff area
     margin: 0 10px;
 }
 
-.ta-box-left .img-box {
+.ta-box-left .img-box, .ta-box-single .img-box {
     margin-right: 10px;
 }
 
@@ -714,6 +717,12 @@ img {
     .embedded-iframe {
         width: 90vw;
     }
+    #helpful-links-box {
+        padding: 0 6rem;
+    }
+    .title, .title-info-flex, .edges {
+        padding: 0 6rem;
+    }
 }
 
 
@@ -721,9 +730,18 @@ img {
     #emails {
         width: 90%;
     }
+    #helpful-links-box {
+        padding: 0 2rem;
+    }
     .no-border-helpful-link {
         width: 85%;
     }
+    .title, .title-info-flex, .edges {
+        padding: 0 2rem;
+    }
+    .faq-content {
+        max-width: 80%;
+    }
 }
 
 @media only screen and (max-width: 720px) {
@@ -731,11 +749,13 @@ img {
         width: 100%;
     }
     header {
-        padding-left: 1rem;
+        padding: 0 2rem;
+    }
+    section {
+        padding: 2rem 2rem;
     }
     .title-info-flex, .title, .edges {
-        padding-left: 2rem;
-        padding-right: 2rem;
+        padding: 0;
     }
     .faq-content {
         max-width: 95%;
@@ -744,7 +764,7 @@ img {
         width: 95vw;
     }
     .shelf-png {
-        width: 90%;
+        width: 100%;
     }
     .ta-box-left, .ta-box-right {
         max-width: 50%;
@@ -758,7 +778,11 @@ img {
         margin: 0 5px;
     }
     .ta-pastry {
-        align-self: center;
+       width: 95%;
+    }
+    .ta-box-right .img-box, .ta-box-left .img-box {
+        justify-content: center;
+        margin: 0;
     }
     .img-box:hover {
         margin-top: 25px;
@@ -769,11 +793,11 @@ img {
     .shelf .flex-row {
         align-items: center;
     }
-    .bio-text h4 {
-        margin-bottom: 5px;
+    .bio-text {
+        width: 90%;
     }
-    .ta-pastry {
-        padding-bottom: 25px;
+    .ta-box-single .bio-text p {
+        width: 175px;
     }
 }
 
@@ -808,8 +832,10 @@ img {
     }
     #helpful-links-box {
         flex-direction: column;
-        align-items: center;
-        padding: 0 10px;
+        padding: 0;
+    }
+    #helpful-links-box .flex-column, #helpful-links-box .button {
+        width: 80%;
     }
     #helpful-links-box .subtitles {
         font-size: 150%;
@@ -818,11 +844,10 @@ img {
         margin-top: 2rem;
     }
     #emails {
-        align-items: center;
+        flex-wrap: wrap;
     }
     .email {
-        margin-right: 0;
-        margin-left: 0;
+        margin-bottom: 1rem;
         word-break: break-all;
         font-size: 90%;
     }
@@ -832,9 +857,6 @@ img {
     .business-hours {
         margin-top: 2rem;
     }
-    section {
-        padding: 3rem 1rem;
-    }
 }
 
 @media only screen and (max-width: 425px) {