diff --git a/assets/scss/font.scss b/assets/scss/font.scss
index fd3db4f..970dda6 100644
--- a/assets/scss/font.scss
+++ b/assets/scss/font.scss
@@ -5,34 +5,29 @@ $medium: 16pt;
 $small: 12pt;
 
 @font-face {
-  font-family: CaskaydiaCove;
-  src: url(/font/CaskaydiaCove.ttf);
+    font-family: CaskaydiaCove;
+    src: url(/font/CaskaydiaCove.ttf);
 }
 
 @font-face {
-  font-family: CaskaydiaCoveMono;
-  src: url(/font/CaskaydiaCoveMono.ttf);
+    font-family: CaskaydiaCoveMono;
+    src: url(/font/CaskaydiaCoveMono.ttf);
 }
 
 * {
-  font-family: CaskaydiaCove;
-  font-size: $small;
-}
-
-h1 {
-  font-size: $huge;
-}
+    font-family: CaskaydiaCove;
+    font-size: $small;
+    }
+h1 {font-size: $huge;}
 
 a {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 footer * {
-  font-size: $large;
-  font-family: CaskaydiaCoveMono;
+    font-size: $big;
 }
 
-label::after {
-  font-family: CaskaydiaCoveMono;
-  font-size: $big;
+label::after{
+    font-family: CaskaydiaCoveMono;
 }
diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index 98f63d9..42301f2 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -5,8 +5,8 @@ body {
 }
 
 footer {
-  height: 6%;
-  min-height: 42pt;
+  height: 10%;
+  min-height: 24pt;
   position: sticky;
   display: flex;
   align-items: center;
@@ -15,37 +15,28 @@ footer {
 }
 
 #content {
-  min-height: 94%;
+  min-height: 90%;
   right: auto;
 }
 
 #footer-left {
-  margin-top: auto;
-  margin-bottom: auto;
   margin-left: 24pt;
   justify-self: left;
   margin-right: auto;
-  display: inline-flex;
 }
 
 #footer-right {
-  margin-top: auto;
-  margin-bottom: auto;
   margin-left: auto;
   justify-self: right;
   margin-right: 24pt;
   align-content: center;
-  display: inline-flex;
 }
 
 #footer-center {
-  margin-top: auto;
-  margin-bottom: auto;
   margin-left: auto;
   margin-right: auto;
   justify-content: center;
   justify-self: center;
-  display: inline-flex;
 }
 
 * {
@@ -55,15 +46,5 @@ footer {
 
 #footer-right *{
   display: flex;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-#footer-center *{
-  display: flex;
-  margin-right: 8pt;
-  margin-left: 8pt;
-  margin-top: auto;
-  margin-bottom: auto;
 }
 
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 9286f8e..2f749db 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -6,9 +6,7 @@ input[type="checkbox"]{
     cursor: pointer;
 }
 .toggleinput{
-    opacity: 0;
-    max-height: 0;
-    overflow: hidden;
+    visibility: hidden;
 }
 
 .togglelabel{
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 0e67fe3..6b7d90e 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -10,7 +10,7 @@
 </span>
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
-        <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label>
+        <label class="togglelabel colorswitch" for="darkmode-toggle"></label>
 </span>
 </footer>
 <script src="/js/darkmode.js"></script>
diff --git a/static/js/darkmode.js b/static/js/darkmode.js
index 466a466..25cd914 100644
--- a/static/js/darkmode.js
+++ b/static/js/darkmode.js
@@ -8,7 +8,7 @@ if (localStorage.getItem("dark")) {
 }
 checkbox.checked = localStorage.getItem("dark");
 
-checkbox.addEventListener("change", function () {
+checkbox.addEventListener("click", function () {
   localStorage.setItem("dark", this.checked);
   if (this.checked) {
     switchToDark();