recover the pyramid & make it smoothly responsive at smallest size.

static/serverscoop.css

@@ -73,6 +73,11 @@ header a {
   margin: 1.2rem;
 }
 
+
+header a:first-of-type {
+  margin-left: 0;
+}
+
 header img {
   width: 316px;
 }
@@ -81,6 +86,7 @@ header img {
   header {
     margin-top: 0.4rem;
     margin-right: 0;
+    margin-left: 5vw;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -92,15 +98,16 @@ header img {
 }
 
 @media screen and (max-width: 768px) {
-  header .header-links {
-    width: 360px;
+  header {
+    width: 100%;
+    align-items: flex-start;
+  }
+  header img {
+    width: 340px;
   }
   header .header-links {
     justify-content: flex-start;
   }
-  header .header-links a:first-of-type {
-    margin-left: 0;
-  }
 }
 
 .splash {
@@ -132,8 +139,6 @@ header img {
 
 .pyramid-image {
   position: relative;
-  top: 180px;
-  left: 800px;
 }
 
 .squatting-person {
@@ -144,14 +149,11 @@ header img {
 .splash > .button-links {
   display: none;
 }
-/* on large screens, move the logo & splash stuff away from the left gutter a bit*/
-@media screen and (min-width: 1280px) {
-  .splash-text-content h1,
-  .splash-text-content p,
-  .button-links,
-  header img {
-    margin-left: 2rem;
-  }
+.splash-text-content h1,
+.splash-text-content p,
+.button-links,
+header {
+  margin-left: 3vw;
 }
 
 /*  on smaller screens move the button links out of the splash, below the pyramid image*/
@@ -181,7 +183,7 @@ header img {
   }
   .splash > .button-links {
     margin: 40px;
-    margin-bottom: 80px;
+    margin-bottom: 2rem;
     margin-top: 100px;
     display: flex;
   }
@@ -190,32 +192,31 @@ header img {
   }
 }
 @media screen and (max-width: 768px) {
-  .splash {
-    width: var(--width-mobile);
-  }
+
   .splash-text-content {
     text-align: initial;
+    align-items: initial;
   }
   .splash p {
     max-width: initial;
   }
   .splash-image-content {
-    height: 300px;
+    height: 60vw;
   }
   .pyramid-image {
     position: relative;
-    width: 420px;
-    top: 460px;
-    left: 100px;
+    width: 85vw;
+    right: 3vw;
   }
   .squatting-person {
-    top: 240px;
-    right: 320px;
-    width: 100px;
+    top: 42vw;
+    right: 74vw;
+    width: 23vw;
   }
   .splash > .button-links {
     margin-left: 0;
     margin-right: 0;
+    margin-bottom: 1rem;
     display: flex;
   }
 }
@@ -228,6 +229,9 @@ header img {
   color: var(--accent);
   margin-right: 30px;
 }
+.button-link:last-of-type {
+  margin-right: 0;
+}
 
 .button-link.primary {
   background: var(--accent);
@@ -314,6 +318,10 @@ header img {
     width: 150px;
     top: -30px;
   }
+  .main-content h1 {
+    max-width: 85%;
+    font-size: var(--font-size-l);
+  }
   .main-content-footer p {
     max-width: 70%;
   }
@@ -322,9 +330,7 @@ header img {
   }
 }
 @media screen and (max-width: 768px) {
-  .main-content h1 {
-    font-size: var(--font-size-l);
-  }
+  
   .boxes-container.horizontal {
     flex-direction: column;
   }