[CSS] Fixed footer element from being hidden behind other divs.

assets/css/reset.css

@@ -1,13 +1,6 @@
 /*
  * -- RESET --
  */
-
-body * {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
 ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, textarea {
     margin: 0;
     padding: 0;

assets/css/style.css

@@ -3,9 +3,9 @@
  */
 
 * {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box !important;
+    -moz-box-sizing: border-box !important;
+    box-sizing: border-box !important;
 }
 
 ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, textarea {
@@ -36,8 +36,10 @@ form {
  * Most of these are inherited from Base, but I want to change a few.
  */
 body, html {
+    scroll-behavior: smooth;
     -webkit-font-smoothing: subpixel-antialiased;
     -moz-osx-font-smoothing: grayscale;
+    height: 100vh;
     font-size: 1rem;
     font-family: "Open Sans", sans-serif;
     color: #221E22;
@@ -111,21 +113,41 @@ header * {
         height: 3rem !important;
         width: 3rem !important;
     }
-    @media screen and (max-height: 1090px) {
-        .content,
-        .ribbon-wrapper,
-        .content-team {
-            position: relative !important;
-        }
-    }
+}
 
+@media screen and (max-height: 800px) {
+    .content,
+    .ribbon-wrapper,
+    .content-team {
+        top: 0 !important;
+        padding: 1rem !important;
+    }
+    .content-head {
+        margin-bottom: 5px;
+    }
+    .content {
+        position: relative !important;
+    }
+    .g {
+        position: sticky !important;
+        max-height: min-content !important;
+        padding: unset;
+    }
+    .l-box {
+        margin: unset;
+        padding: 5px !important;
+    }
+    .l-box > * {
+        margin: unset;
+        padding: unset;
+    }
 }
 
 /*
  * -- BODY --
  */
 .body-wrapper {
-    top: 4rem;
+    margin-top: 4rem;
 }
 .body-wrapper a {
     font-weight: bold;
@@ -181,11 +203,11 @@ header * {
 }
 .content .g .l-box {
     flex: 1;
-    text-align: justify-all;
-    padding-inline-end: 2rem;
+    min-width: 10rem;
+    margin-right: 24px;
 }
 
-.content + * {
+.content ~ * {
     z-index: 3;
     position: sticky;
     top: 4rem;

index.html

@@ -126,13 +126,11 @@
         </div>
       </div>
     </div>
-
-    <div class="footer l-box is-center">
-      This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
-    </div>
   </div>
   </div>
-
 </body>
 
+<footer class="footer l-box is-center">
+  This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
+</footer>
 </html>