huge improvement

output/main.css

@@ -13,6 +13,12 @@
     src: url("http://localhost:8060/res/URWGothic-Demi.otf");
 }
 
+@font-face {
+    font-family: "URW Gothic Oblique";
+    src: url("http://localhost:8060/res/URWGothic-BookOblique.otf");
+}
+
+
 * {
     font-family: "URW Gothic";
     color: white;
@@ -39,20 +45,34 @@ h2 {
     text-align: center;
 }
 
+h3, b {
+    font-family: "URW Gothic Bold";
+}
+
 body > div {
-    height: 100vh;
+    min-height: 100vh;
+}
+
+.flex-col, .flex-row {
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+.flex-col {
     flex-direction: column;
 }
 
+.flex-row {
+    flex-direction: row;
+}
+
 #godown {
     position: absolute;
     bottom: 50px;
-    left: 50%;
+    left: 50vw;
     transform: translate(-50%, -100%);
-    font-size: 3em;
+    margin: 0px;
 }
 
 .trump-panican-tweet {
@@ -65,6 +85,10 @@ body > div {
     text-align: center;
 }
 
+body > div > * {
+    margin: 50px;
+}
+
 #leadbox {
     opacity: calc((var(--scrolly-height) + var(--scrolly-top) * 2) / var(--scrolly-height));
     transform: translateY(calc(var(--scrolly-top) * 0.125px));
@@ -74,4 +98,42 @@ ul {
     font-size: 2em;
     text-align: left;
     line-height: 2em;
+}
+
+.four-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-flow: row;
+    width: 100%;
+}
+
+.four-grid > * {
+    margin-left: 100px;
+    margin-right: 100px;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    line-height: 1.5em;
+    text-align: left;
+}
+
+i {
+    font-family: "URW Gothic Oblique";
+}
+
+@media (max-width: 1000px) {
+    h1 {
+        font-size: 3em;
+    }
+
+    .flex-row {
+        flex-direction: column;
+    }
+
+    .trump-panican-tweet {
+        width: 80vw;
+    }
+
+    .four-grid {
+        grid-template-columns: 1fr;
+    }
 }