fix css

src/styles/footer.css

@@ -7,3 +7,9 @@ footer {
     padding: 0;
     margin: 0;
 }
+
+@media (max-width: 800px) {
+    footer {
+        height: 350px;
+    }
+}

src/styles/hero.css

@@ -47,26 +47,47 @@
     margin: 2em auto;
 }
 
-#heroFlex {
+@media (min-width: 1200px) {
-    display: flex;
+    #heroFlex {
-    flex-wrap: wrap;
+        display: flex;
-    justify-content: space-between;
+        flex-wrap: wrap;
-    margin: 0 auto;
+        justify-content: space-between;
-}
+        margin: 0 auto;
-
+    }
-.heroFlexItem {
+    .heroFlexItem {
-    flex: 0 25%;
+        flex: 0 25%;
-    height: 100%;
+        height: 100%;
-    text-align: center;
+        text-align: center;
-}
+    }
-
+    .heroFlexArrow {
-.heroFlexItem p {
+        height: 100%;
-    width: 90%;
+        padding-top: 5em;
-    margin: 0 auto;
+    }
+    .heroFlexItem p {
+        width: 90%;
+        margin: 0 auto;
+    }
 }
 
-.heroFlexArrow {
+@media (max-width: 1200px) {
-    height: 100%;
+    #heroFlex {
+        display: block;
+        margin: 0 auto;
+    }
+    .heroFlexItem {
+        height: 100%;
+        text-align: center;
+    }
+    .heroFlexArrow {
+        transform: rotate(90deg);
+        margin: 0 0 2em 0;
+        text-align: center;
+        padding: 1em;
+    }
+    .heroFlexItem p {
+        width: 50%;
+        margin: 0 auto;
+    }
 }
 
 button.doThing {
@@ -124,20 +145,20 @@ button.doThing:disabled {
 .m2 {
     margin: 10px;
 }
+
 #statsbox {
     position: fixed;
     bottom: 0;
     left: 0;
     background-color: #231f20;
     text-align: left;
-    width: 20%;
+    width: 30%;
     margin: 0;
     max-height: 400px;
     overflow-y: auto;
     word-wrap: break-word;
     display: flex;
     flex-direction: column;
-    min-width: 300px;
     border-right: 4px solid #f9f9f9;
     border-top: 4px solid #f9f9f9;
 }
@@ -148,25 +169,24 @@ button.doThing:disabled {
     right: 0;
     background-color: black;
     text-align: left;
-    width: 40%;
+    width: 60%;
     margin: 0;
-    max-height: 400px;
+    max-height: 500px;
     overflow-y: auto;
     word-wrap: break-word;
     display: flex;
     flex-direction: column-reverse;
-    min-width: 400px;
     border-left: 4px solid #f9f9f9;
     border-top: 4px solid #f9f9f9;
 }
 
 @media (max-width: 600px) {
-    #statsbox {
+    /* #statsbox {
         min-width: 300px;
     }
     #trollbox {
         min-width: 200px;
-    }
+    } */
     .messageDate {
         display: none;
     }

src/styles/main.css

@@ -21,46 +21,4 @@ button {
     border-radius: 0;
     border: 0;
     box-shadow: 5px 5px 0 #f9f9f9;
-    /* clip-path: polygon(
+}
-        0px 20px,
-        4px 20px,
-        4px 12px,
-        8px 12px,
-        8px 8px,
-        12px 8px,
-        12px 4px,
-        16px 4px,
-        20px 4px,
-        20px 0px,
-        calc(100% - 20px) 0px,
-        calc(100% - 20px) 4px,
-        calc(100% - 12px) 4px,
-        calc(100% - 12px) 8px,
-        calc(100% - 8px) 8px,
-        calc(100% - 8px) 12px,
-        calc(100% - 4px) 12px,
-        calc(100% - 4px) 16px,
-        calc(100% - 4px) 20px,
-        100% 20px,
-        100% calc(100% - 20px),
-        calc(100% - 4px) calc(100% - 20px),
-        calc(100% - 4px) calc(100% - 12px),
-        calc(100% - 8px) calc(100% - 12px),
-        calc(100% - 8px) calc(100% - 8px),
-        calc(100% - 12px) calc(100% - 8px),
-        calc(100% - 12px) calc(100% - 4px),
-        calc(100% - 16px) calc(100% - 4px),
-        calc(100% - 20px) calc(100% - 4px),
-        calc(100% - 20px) 100%,
-        20px 100%,
-        20px calc(100% - 4px),
-        12px calc(100% - 4px),
-        12px calc(100% - 8px),
-        8px calc(100% - 8px),
-        8px calc(100% - 12px),
-        4px calc(100% - 12px),
-        4px calc(100% - 16px),
-        4px calc(100% - 20px),
-        0px calc(100% - 20px)
-    ); */
-}

src/styles/navbar.css

@@ -11,6 +11,18 @@
     padding: 1em;
 }
 
+@media (max-width: 500px) {
+    #logo {
+        width: 150px;
+    }
+}
+
+@media (max-width: 380px) {
+    #logo {
+        width: 100px;
+    }
+}
+
 #wallet {
     position: absolute;
     top: 0;
@@ -20,7 +32,7 @@
 
 #wallet button {
     font-family: 'Depixel';
-    background-color: #ef3b39;
     border-radius: 0;
     box-shadow: 0 5px #fff;
-}
+}
+