moved footer to layout. changed some css

web/styles/globals.scss

@@ -4,10 +4,14 @@
 @import '@fontsource/open-sans/800.css';
 @import '@fontsource/poppins/400.css';
 @import '@fontsource/poppins/600.css';
+@import './mixins.scss';
 
 :root {
   --content-padding: 12px;
   --module-spacing: 12px; // margin size between lines of stuff, if needed
+  --header-height: 4rem; // needed for making main content scrollable;
+  --footer-height: 2.5rem; // needed for making main content scrollable;
+  --content-height: calc(100vh - var(--header-height) - var(--footer-height));
 }
 
 ::selection {

web/styles/mixins.scss

@@ -3,3 +3,16 @@
   justify-content: center;
   align-items: center;
 }
+
+@mixin screen ($breakpoint) { 
+    @if $breakpoint == desktop {    
+    @media only screen and (min-width: 768px) {
+      @content;
+    }
+  }
+  @if $breakpoint == mobile {
+    @media only screen and (max-width: 481px) {
+      @content;
+    }
+  }
+}