Fix Hero to header so that when its moved up it doesnt take up space and size logo correctly

styles.css

@@ -10,16 +10,9 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    padding: 4rem 20rem;
+    padding: 6rem;
     box-sizing: border-box;
     position: relative;
-
-}
-
-@media(max-width: 1024px) {
-    body {
-        padding: 2rem;
-    }
 }
 
 body.ready {
@@ -34,18 +27,26 @@ body.home {
     padding-top: 45vh;
 }
 
-body:not(.home) #hero {
-    pointer-events: none;
-    opacity: 0;
-    transform: translateY(-40vh);
+header {
+  position: relative;
 }
 
 #hero {
-    /* opacity: 0; */
-    top: 30vh;
-    position:absolute;
-    font-size: 4rem;
-    opacity: 1;
+  position: absolute;
+  bottom: calc(100% + 1rem);
+  left: 0;
+  font-size: 4rem;
+  display: flex;
+  align-items: baseline;
+}
+
+#hero h1 { 
+    margin: 0; 
+}
+
+body:not(.home) #hero {
+  opacity: 0;
+  pointer-events: none;
 }
 
 #hero h1 {
@@ -175,6 +176,9 @@ body:not(.homeCommitted) .birdSoundCredit {
 
 .bird-wrap {
     position: relative;
+    padding-left: 1rem;
+    height: 2em;
+    width: auto;
 }
 
 .bar {
@@ -197,9 +201,13 @@ body:not(.homeCommitted) .birdSoundCredit {
 }
 
 #birdButton {
-    font-size: inherit;
-    background: none;
-    border: none;
     padding: 0;
+    height: 100%;
+    border: none;
+    background: none;
     cursor: pointer;
+}
+
+#birdButton img {
+    height: 100%;
 }