style changes on index

css/style.css

@@ -75,12 +75,11 @@ main {
 }
 
 section {
+  max-width: 75%;
   display: flex;
   flex-direction: column;
   align-items: center;
   
-  max-width: 60%;
-  margin-top: 5rem;
   padding: 1rem 1rem;
 }
 
@@ -115,7 +114,6 @@ footer {
   justify-content: space-between;
 
   margin: 5rem auto;
-  padding: 2rem 0;
 
   max-width: 90%;
 
@@ -209,7 +207,7 @@ footer {
 
   /** content rules */
   h1 {
-    font-size: 2rem;
+    font-size: 2.5rem;
   }
 
 

index.html

@@ -16,24 +16,22 @@
 
       main {
         min-height: 530px; /** to make sure footer doesn't overlap hero */
-        gap: 5.5rem;
+        gap: 2rem;
       }
 
       #hero-image {
-        height: 600px;
+        height: 500px;
         width: 100%;
-        background: url("assets/img/aden-desktop.jpg") 70% 10% / 100% no-repeat;
-        position: absolute;
+        background: url("assets/img/aden-desktop.jpg") 70% 25% / 100% no-repeat;
+        /** position: absolute; 
         top: 0px;
         left: 0px;
-
-        z-index: -1;
+        z-index: -1;*/
       }
 
       #intro {
         text-align: center;
-        background-color: rgba(0, 0, 0, 0.8);
-        width: 40%;
+        width: 80%;
         /** padding: 3rem 4rem 4rem 4rem; */
 
         padding-bottom: 2rem;
@@ -71,7 +69,6 @@
       #book-link {
         display: block;
         width: 50%;
-        margin-top: 5rem;
       }
 
       h2 {
@@ -83,10 +80,11 @@
         #hero-image {
           background: url("assets/img/aden-mobile.jpg") center 10% / 100%
             no-repeat;
+          height: 300px;
         }
 
         main {
-          gap: 0;
+          gap: 2rem;
         }
 
         #intro {
@@ -99,7 +97,6 @@
           width: 85%;
         }
         #book-link {
-          margin-top: 2.5rem;
         }
       }
     </style>

reviews.html

@@ -200,12 +200,12 @@
 
     <main id="main-content">
       <section>
-        <h1 style="margin-bottom: 7rem">Reviews</h1>
+        <h1 style="margin-bottom: 2rem">Reviews</h1>
         <div id="reviewContainer"></div>
       </section>
 
       <section id="gallery">
-        <h1 style="margin-bottom: 7rem">Gallery</h1>
+        <h1 style="margin-bottom: 2rem">Gallery</h1>
         <div id="galleryPhotos">
 
           <figure class="before-after-pair">

services.html

@@ -52,18 +52,21 @@
 
       .dropdown {
         width: 100%;
-        border: 1px solid var(--gold);
+        border: 2px solid var(--gold);
         border-radius: 1.25rem;
         transition: 0.5s;
         user-select: none;
       }
+      .dropdown:hover {
+        border: 2px solid white;
+      }
 
       /** Prevent nested dropdowns from having borders */
       .dropdown .dropdown {
         border-left: none;
         border-right: none;
         border-bottom: none;
-        border-radius: 0rem;
+        border-radius: 1.25rem 1.25rem 0 0;
       }
 
       .dropdown-header {