Redesign

public/style.css

@@ -1,9 +1,9 @@
 :root {
-  --bg-darker: #082032;
-  --bg-main: #2C394B;
-  --bg-lighter: #334756;
-  --text-clr: #ececec;
-  --accent-clr: #FF4C29;
+  --bg-main: white;
+  --brand-clr: rgb(26, 34, 58);
+  --bg: rgb(16, 22, 25);
+  --text-clr: black;
+  --accent-clr: red;
 }
 
 * {
@@ -12,9 +12,10 @@
 }
 
 body {
+  position: relative;
   margin: 0;
   min-height: 100vh;
-  background: var(--bg-main);
+  background: var(--bg);
   color: var(--text-clr);
   text-align: center;
 }
@@ -24,28 +25,72 @@ a {
   color: var(--accent-clr);
 }
 
+.main-column {
+  width: 800px;
+  background: var(--bg-main);
+  padding: 32px 128px;
+  box-sizing: border-box;
+  margin: 128px auto;
+  border: 2px solid var(--accent-clr);
+}
+
+.main-column::before {
+  position: absolute;
+  left: 0px;
+  width: 50%;
+  border-top: 2px solid var(--accent-clr);
+  z-index: -1;
+  content: '';
+}
+
+.main-column::after {
+  position: absolute;
+  right: 0px;
+  width: 50%;
+  border-top: 2px solid var(--accent-clr);
+  z-index: -1;
+  content: '';
+}
+
 .hero {
   width: 100%;
-  text-align: center;
-  padding: 64px;
+  padding: 128px 0;
+  position: relative;
   box-sizing: border-box;
-  background: url(/assets/banner.png);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
+  background: white;
+  color: black;
+  text-align: center;
 }
 
-.hero > * {
-  margin: 20px auto;
+.hero > .main {
+  position: relative;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  z-index: 10;
+  color: var(--brand-clr);
 }
 
-.hero > h1 {
-  font-weight: 800;
-  font-size: 42px;
+.hero .logo, .hero .text {
+  margin: auto;
+  width: 400px;
 }
 
-.hero > p {
-  max-width: 400px;
+#gunner1, #gunner2 {
+  position: absolute;
+  max-width: 500px;
+  height: 500px;
+  object-fit: contain;
+  transition: transform .1s;
+  top: calc(50% - 250px);
+}
+
+#gunner1 {
+  left: 0;
+}
+
+#gunner2 {
+  right: 0;
 }
 
 .controls {
@@ -53,6 +98,9 @@ a {
   display: flex;
   align-items: center;
   justify-content: center;
+  background: var(--bg-main);
+  padding: 8px;
+  width: max-content;
 }
 
 .controls > * {
@@ -63,6 +111,7 @@ table {
   min-width: 500px;
   margin: 32px auto;
   border-spacing: 0;
+  background: var(--bg-main);
 }
 
 tr {
@@ -75,7 +124,7 @@ td {
 
 th {
   padding: 8px 16px;
-  background: var(--bg-lighter);
+  font-weight: 400;
 }
 
 .name {
@@ -87,10 +136,25 @@ th {
   padding-bottom: 16px;
   position: sticky;
   top: 100%;
+  color: white;
 }
 
 @media screen and (max-width: 500px) {
+  .hero .logo {
+    width: 100%;
+  }
+
+  #gunner1, #gunner2 {
+    display: none;
+  }
+
+  .main-column {
+    width: 100%;
+    border: none;
+    padding: 72px 0;
+  }
+
   table {
     min-width: 100%;
   }
-}
+}