fix: sizing and background

styles.sass

@@ -18,7 +18,7 @@ $cursive: 'Cedarville Cursive', cursive
   display: none
 
 body
-  background: lighten($brown, 10%)
+  background: linear-gradient(180deg, $darkbrown 0%, $brown 40%, $background 100%)
   overflow-x: hidden
   
 .mobile-helper
@@ -45,14 +45,14 @@ body
 
 @keyframes title-wrapper-in
   to
-    height: 30svh
+    height: 30vh
 
 @keyframes hero-in
   to
     opacity: 1
 
 .hero-img
-  position: fixed
+  position: absolute
   top: 0
   left: 0
   width: 100%
@@ -66,7 +66,7 @@ body
 
 .hero
   z-index: 1
-  min-height: 115svh
+  min-height: 115vh
   background: transparent
   color: black
   display: flex
@@ -75,7 +75,7 @@ body
   justify-content: space-between
 
   .title-wrapper
-    height: 100svh
+    height: 100vh
     width: 100%
     background: linear-gradient(180deg, $darkbrown 0%, $brown 40%, transparent 100%)
     display: flex
@@ -96,7 +96,7 @@ body
 
   .subtitle
     width: 100%
-    height: 20svh
+    height: 20vh
     display: flex
     align-items: center
     justify-content: center
@@ -136,7 +136,7 @@ body
       font-size: 1.4rem
       font-weight: 400
       text-align: right
-      min-height: 50svh
+      min-height: 50vh
 
       p
         line-height: 2.5rem
@@ -144,7 +144,7 @@ body
   
   .poem-controls
     width: 100%
-    height: 10svh
+    height: 10vh
 
     display: flex
     align-items: center