diff --git a/.stylelintrc.json b/.stylelintrc.json
index 4bb7e8f..4938e1d 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -7,7 +7,6 @@
         "block-no-empty": true,
         "unit-no-unknown": true,
         "property-no-unknown": true,
-        "no-duplicate-selectors": null,
-        "custom-property-pattern": null
+        "selector-class-pattern": null
     }
 }
\ No newline at end of file
diff --git a/docs/README.md b/docs/README.md
index 9e77b9f..8dd5ba8 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -6,4 +6,4 @@
 - [serviceWorker](serviceWorker.md)
 
 * [Taskbar](taskbar.md)
-* [Menu Bar](menu-bar.md)
\ No newline at end of file
+* [Menubar](menubar.md)
\ No newline at end of file
diff --git a/docs/menu-bar.md b/docs/menu-bar.md
deleted file mode 100644
index 8f05380..0000000
--- a/docs/menu-bar.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Menu Bar
-The menu bar is a horizontal bar located at the top of the screen.
-
-
-## Components
-The menu bar is composed of the following components:
-
-* HTML in `index.html`
-* CSS in `/css/menu-bar.css`
-
-
-
-## Properties
-
-### Variants
-The menu bar variant can be changed by adding the following classes to the menu bar element:
-
-* `menu-bar--minimal` - A minimal menu bar
-* `menu-bar--floating` - A floating menu bar
-* `menu-bar--none` - No menu bar
\ No newline at end of file
diff --git a/docs/menubar.md b/docs/menubar.md
new file mode 100644
index 0000000..726218a
--- /dev/null
+++ b/docs/menubar.md
@@ -0,0 +1,20 @@
+# Menubar
+The menubar is a horizontal bar located at the top of the screen.
+
+
+## Components
+The menubar is composed of the following components:
+
+* HTML in `index.html`
+* CSS in `/css/menubar.css`
+
+
+
+## Properties
+
+### Variants
+The menubar variant can be changed by adding the following classes to the menubar element:
+
+* `menubar--minimal` - A minimal menubar
+* `menubar--floating` - A floating menubar
+* `menubar--none` - No menubar
\ No newline at end of file
diff --git a/docs/taskbar.md b/docs/taskbar.md
index 5dd5630..f5a51b5 100644
--- a/docs/taskbar.md
+++ b/docs/taskbar.md
@@ -14,7 +14,7 @@ The taskbar is composed of the following components:
 ## Properties
 
 ### Variants
-The menu bar variant can be changed by adding the following classes to the menu bar element:
+The menubar variant can be changed by adding the following classes to the menubar element:
 
 * `taskbar--floating` - A floating taskbar
 
diff --git a/src/404/style.css b/src/404/style.css
index 7851d9b..5ae8c69 100644
--- a/src/404/style.css
+++ b/src/404/style.css
@@ -12,17 +12,14 @@ html {
 }
 
 body {
-    font-family: Arial, sans-serif;
-    font-size: 16px;
-
     display: flex;
     justify-content: center;
     align-items: center;
-
     margin: 0;
     height: 100vh;
     width: 100vw;
-
+    font-family: Arial, sans-serif;
+    font-size: 16px;
     color: var(--text-color);
     background-color: var(--bg-color);
 }
@@ -54,13 +51,13 @@ body {
 
 
 /* MOBILE */
-@media screen and (max-width: 750px) {
+@media screen and (width <= 750px) {
     .bsod__header {
         font-size: 6.25rem;
     }
 }
 
-@media screen and (max-width: 380px){
+@media screen and (width <= 380px){
     .bsod {
         width: 95%;
     }
diff --git a/src/about/style.css b/src/about/style.css
index fa15bdc..b8e5f03 100644
--- a/src/about/style.css
+++ b/src/about/style.css
@@ -17,11 +17,12 @@ body {
 
 :root {
     --background: #fff;
-    --text-color: #333333;
+    --text-color: #333;
     --text-color-secondary: #4b5563;
     --primary-color: #3b82f6;
     --secondary-color: #e5e7eb;
 }
+
 @media screen and (prefers-color-scheme: dark) {
     :root {
         --background: #1a202c;
@@ -76,7 +77,7 @@ p {
     border-width: 1px;
     box-sizing: border-box;
     display: inline-block;
-    margin: 0 8px 8px 8px;
+    margin: 0 8px 8px;
     padding: 12px 32px;
     text-transform: uppercase;
     text-decoration: none;
@@ -107,12 +108,9 @@ header {
     justify-content: space-between;
     align-items: center;
     padding: 0 16px;
-
     height: 65px;
     box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
-
     background-color: var(--background);
-
     position: sticky;
     top: 0;
 }
@@ -139,7 +137,7 @@ header nav li {
 }
 
 /* remove "irrelevant-links" when on mobile */
-@media (max-width: 700px) {
+@media (width <= 700px) {
     header nav .irrelevant-link {
         display: none;
     }
@@ -151,7 +149,7 @@ header nav li {
 main {
     margin: 0 auto;
     max-width: 1024px;
-    padding: 0 16px;
+    padding: 16px 0;
 }
 
 /* TITLE & IMG */
@@ -207,7 +205,7 @@ main {
     margin-bottom: 0;
 }
 
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
     .home-features > ul {
         display: flex;
     }
@@ -228,9 +226,4 @@ section.text > h2 {
 
 section.text a {
     color: var(--primary-color);
-}
-
-
-main {
-    padding-bottom: 16px;
 }
\ No newline at end of file
diff --git a/src/css/action-menu.css b/src/css/action-menu.css
index 9d64fb9..053418a 100644
--- a/src/css/action-menu.css
+++ b/src/css/action-menu.css
@@ -34,6 +34,7 @@
     width: 100%;
     margin-bottom: 10px;
 }
+
 #action-menu .notifications h3 {
     color: #fff;
     font-size: 1.2em;
@@ -41,6 +42,7 @@
     padding: 0;
     user-select: none;
 }
+
 #action-menu .notifications button {
     /* clear all button */
     background-color: #393939;
diff --git a/src/css/context-menu.css b/src/css/context-menu.css
index a021c4c..4a5aff5 100644
--- a/src/css/context-menu.css
+++ b/src/css/context-menu.css
@@ -29,18 +29,14 @@
 
 .context-menu {
     box-sizing: border-box;
-
     user-select: none;
     position: fixed;
     z-index: 9999;
     width: 200px;
-
     border-radius: 4px;
     box-shadow: #5a5353 0 0 5px 0;
-
     padding: 6px;
     background-color: var(--menu-background);
-
     transform: scale(0);
     transform-origin: top left;
 }
@@ -58,13 +54,11 @@
     border-radius: 4px;
     color: var(--text-color);
     background-color: inherit;
-
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding: 2px;
     margin: 0;
-
     height: 30px;
     width: 100%;
 }
@@ -92,6 +86,7 @@
     justify-content: center;
     width: 25%;
 }
+
 .context-menu .vertical-section button svg {
     width: 80%;
 }
diff --git a/src/css/desktop.css b/src/css/desktop.css
index eda47ff..f2aaa1e 100644
--- a/src/css/desktop.css
+++ b/src/css/desktop.css
@@ -1,6 +1,7 @@
 :root {
     /* --desktop-background: url('URL') no-repeat center center / cover; */
-    --desktop-background: linear-gradient(to right, purple, rgb(35, 192, 204));
+    --desktop-background: linear-gradient(to right, purple, rgb(35 192 204));
+
     /* --desktop-background: #494949; */
 }
 
diff --git a/src/css/fix-scrollbar.css b/src/css/fix-scrollbar.css
index 63c12aa..c6b696c 100644
--- a/src/css/fix-scrollbar.css
+++ b/src/css/fix-scrollbar.css
@@ -1,5 +1,7 @@
 /** ------ SCROLL BAR FIX FOR CHROME ------ */
+
 /* chrome scrollbar is still the old blocky one */
+
 /* this is a fix for that */
 
 /* width */
diff --git a/src/css/menu-bar.css b/src/css/menubar.css
similarity index 62%
rename from src/css/menu-bar.css
rename to src/css/menubar.css
index a327e9f..2afb7a5 100644
--- a/src/css/menu-bar.css
+++ b/src/css/menubar.css
@@ -1,11 +1,6 @@
-.menu-bar {
+.menubar {
     --bg-color: #212841;
-}
-.menu-bar__container {
-    --bg-color: #131b27;
-}
 
-.menu-bar {
     box-sizing: border-box;
     position: absolute;
     top: 0;
@@ -20,9 +15,9 @@
     padding: 0 10px;
 }
 
-.menu-bar__left,
-.menu-bar__middle,
-.menu-bar__right {
+.menubar__left,
+.menubar__middle,
+.menubar__right {
     display: flex;
     align-items: center;
     gap: 10px;
@@ -30,13 +25,15 @@
 }
 
 /* make sure middle is always centered */
-.menu-bar__middle {
+.menubar__middle {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
 }
 
-.menu-bar__container {
+.menubar__container {
+    --bg-color: #131b27;
+
     display: flex;
     align-items: center;
     background-color: var(--bg-color);
@@ -46,8 +43,9 @@
     padding: 4px 8px;
 }
 
-.menu-bar__container > * {
+.menubar__container > * {
     height: 100%;
+
     --hover-color: none;
     --active-color: none;
 }
@@ -55,13 +53,13 @@
 
 
 /* Clock */
-.menu-bar__container--clock {
+.menubar__container--clock {
     padding: 0 10px;
 }
 
 /* Actions */
-.menu-bar__container--actions {
-    gap: 0px;
+.menubar__container--actions {
+    gap: 0;
 }
 
 
@@ -70,40 +68,40 @@
 
 /* ##### Variants ##### */
 
-.menu-bar--none {
+.menubar--none {
     display: none !important;
 }
 
 /* floating */
-.menu-bar--floating {
+.menubar--floating {
     margin: 6px;
     width: calc(100vw - 12px);
     border-radius: 12px;
 }
 
 /* minimal */
-.menu-bar--minimal {
+.menubar--minimal {
     margin: 0;
     height: 36px;
     width: 100vw;
     padding: 0;
-    background-color: rgba(0, 0, 0, 10%)
+    background-color: rgb(0 0 0 / 10%)
 }
 
 @media (prefers-color-scheme: light) {
-    .menu-bar--minimal {
-        background-color: rgba(255, 255, 255, 10%);
+    .menubar--minimal {
+        background-color: rgb(255 255 255 / 10%);
     }
 }
 
 
-.menu-bar--minimal .menu-bar__container {
+.menubar--minimal .menubar__container {
     height: 100%;
     padding: 0;
     background-color: transparent;
 }
 
-.menu-bar--minimal .menu-bar__container--status {
+.menubar--minimal .menubar__container--status {
     display: none;
 }
 
@@ -111,15 +109,15 @@
 
 
 
-@media screen and (max-width: 1050px) {
-    .menu-bar__container--status applet-network-down,
-    .menu-bar__container--status applet-network-rtt {
+@media screen and (width <= 1050px) {
+    .menubar__container--status applet-network-down,
+    .menubar__container--status applet-network-rtt {
         display: none;
     }
 }
 
-@media screen and (max-width: 900px) {
-    .menu-bar__container--status {
+@media screen and (width <= 900px) {
+    .menubar__container--status {
         display: none;
     }
 }
\ No newline at end of file
diff --git a/src/css/push-notifications.css b/src/css/push-notifications.css
index ade2db9..bfae1ae 100644
--- a/src/css/push-notifications.css
+++ b/src/css/push-notifications.css
@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
-
     position: fixed;
     right: 10px;
     top: 80px;
diff --git a/src/css/taskbar.css b/src/css/taskbar.css
index 7d43867..18dade6 100644
--- a/src/css/taskbar.css
+++ b/src/css/taskbar.css
@@ -83,7 +83,6 @@
     transform: none;
     height: 80vh;
     width: 50px;
-
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -94,6 +93,7 @@
     left: 0;
     right: unset;
 }
+
 .taskbar[position="right"] { 
     right: 0;
     left: unset;
@@ -144,6 +144,7 @@
 .taskbar[position="bottom"] > * {
     height: 80%;
 }
+
 .taskbar[position="bottom"] > * > * {
     height: 100%;
 }
@@ -151,6 +152,7 @@
 
 .taskbar[position="bottom"] .taskbar__apps {
     /* center the apps in the middle of the taskbar (ignoring other elements) */
+
     /*
     position: absolute;
     left: 50%;
diff --git a/src/css/window-defaults.css b/src/css/window-defaults.css
index c37e80f..a338601 100644
--- a/src/css/window-defaults.css
+++ b/src/css/window-defaults.css
@@ -1,4 +1,5 @@
 /* -------------- DRAGGING -------------- */
+
 /* disable pointer globally */
 body.window-dragging iframe {
     pointer-events: none;
@@ -11,14 +12,11 @@ body.window-dragging iframe {
 app-window.website {
     width: 600px;
     height: 400px;
+    --color-background--body: var(--color-background--head);
 }
+
 app-window.website iframe {
     height: 100%;
     width: 100%;
     border: none;
-}
-app-window.website {
-    --color-background--body: var(--color-background--head);
-}
-
-
+}
\ No newline at end of file
diff --git a/src/data/index.html b/src/data/index.html
index 8a26982..9f95ebb 100644
--- a/src/data/index.html
+++ b/src/data/index.html
@@ -37,7 +37,7 @@ <h3>Storage Usage</h3>
         <ui-progress id="sessionStorageProgress" bar-style="round" isIndeterminate label="sessionStorage"></ui-progress>
     </div>
 
-    <button id="deleteAll">Delete All</button>
+    <button id="delete-all">Delete All</button>
 
     <template id="popupTemplate">
         <desktop-popup--yes-no
diff --git a/src/data/script.js b/src/data/script.js
index 0319511..5213fb4 100644
--- a/src/data/script.js
+++ b/src/data/script.js
@@ -60,7 +60,7 @@ if ('sessionStorage' in window) {
 
 
 
-const deleteAllButton = document.querySelector('#deleteAll');
+const deleteAllButton = document.querySelector('#delete-all');
 
 deleteAllButton.addEventListener('click', () => {
     const oldPopup = document.querySelector('#sureDeleteAll');
diff --git a/src/data/style.css b/src/data/style.css
index 3ca2237..e09d6c8 100644
--- a/src/data/style.css
+++ b/src/data/style.css
@@ -1,50 +1,27 @@
-html {
-    font-family: 'Inter', sans-serif;
-    font-size: 100%;
-}
-
 body {
     font-size: 16px;
     margin: 0 auto;
     padding: 20px;
     width: 850px;
+    background-color: #eaf0f5;
 }
 
-@media screen and (max-width: 850px) {
+@media screen and (width <= 850px) {
     body {
         width: 100%;
         padding: 10px;
     }
 }
 
-
-
-* {
-    box-sizing: border-box;
-}
-
-
-button {
-    user-select: none;
-}
-
-
-
-body {
-    background-color: #eaf0f5;
-}
-
-
 .box {
-    background-color: #fff;
-    padding: 16px 24px 24px;
-    border-radius: 12px;
-
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 16px;
+    background-color: #fff;
+    padding: 16px 24px 24px;
+    border-radius: 12px;
 }
 
 .box ui-progress {
@@ -53,14 +30,13 @@ body {
 }
 
 
-#deleteAll {
-    font-size: 16px;
-    background-color: #f44336;
+#delete-all {
+    padding: 10px 14px;
+    margin-top: 16px;
     color: #fff;
+    background-color: #f44336;
     border: none;
     border-radius: 8px;
-    padding: 10px 14px;
+    font-size: 16px;
     cursor: pointer;
-
-    margin-top: 16px;
 }
\ No newline at end of file
diff --git a/src/devices/computer/style.css b/src/devices/computer/style.css
index 530d09b..4b27521 100644
--- a/src/devices/computer/style.css
+++ b/src/devices/computer/style.css
@@ -1,11 +1,3 @@
-html {
-    font-size: 100%;
-}
-
-* {
-    box-sizing: border-box;
-}
-
 /* COLORS */
 :root {
     --plastic-color: #c3b79e;
@@ -19,8 +11,6 @@ body {
     align-items: center;
     height: 100vh;
     margin: 0;
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 16px;
 }
 
 
@@ -43,13 +33,12 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-
     width: 700px;
     height: 560px;;
     border-radius: 5px;
     background-color: var(--plastic-color);
     position: relative;
-    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
+    box-shadow: 5px 5px 20px rgb(0 0 0 / 50%);
 }
 
 .screen {
@@ -84,6 +73,7 @@ iframe.content {
     bottom: 20px;
     right: 85px;
 }
+
 .monitor .green-light.off {
     background-color: var(--plastic-btn-color);
 }
@@ -91,13 +81,10 @@ iframe.content {
 .monitor .btn {
     width: 28px;
     height: 15px;
-    
     background-color: var(--plastic-btn-color);
     border-radius: 5px;
     border: none;
-
     cursor: pointer;
-
     position: absolute;
     bottom: 20px;
     right: 45px; 
@@ -108,7 +95,7 @@ iframe.content {
     height: 40px;
     background-color: var(--plastic-btn-color);
     border-radius: 5px;
-    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 5px 20px rgb(0 0 0 / 50%);
     z-index: -1;
 }
 
@@ -120,7 +107,7 @@ iframe.content {
     background-color: var(--plastic-color);
     margin-left: 20px;
     border-radius: 5px;
-    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
+    box-shadow: 5px 5px 20px rgb(0 0 0 / 50%);
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/src/devices/phone/style.css b/src/devices/phone/style.css
index 2c1999b..9c64291 100644
--- a/src/devices/phone/style.css
+++ b/src/devices/phone/style.css
@@ -1,12 +1,3 @@
-body {
-    font-family: Arial, sans-serif;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-
 /* COLORS */
 :root {
     --background: #f4f6f7;
@@ -21,28 +12,24 @@ body {
 
 
 body {
-    font-size: 16px;
-    box-sizing: border-box;
-
-    margin: 0;
-    padding: 0;
-
     display: flex;
     width: 100vw;
     height: 100vh;
+    margin: 0;
+    padding: 0;
+    font-size: 16px;
+    box-sizing: border-box;
 }
 
 
 main {
-    background: var(--background);
-
     display: flex;
     justify-content: center;
     align-items: center;
-
     max-height: 100vh;
     height: 100%;
     width: 100%;
+    background: var(--background);
 }
 
 
@@ -81,13 +68,14 @@ main {
     position: absolute;
     width: 60px;
     height: 3px;
-    margin: 0px auto 0 auto;
+    margin: 0 auto;
 
     /* 50% middle of screen */
+
     /* 30px = width / 2 */
     left: calc(50% - 30px);
     top: 6px;
-    background-color: #222222;
+    background-color: #222;
     border-radius: 5px;
 }
 
@@ -141,7 +129,6 @@ main {
     background-color: #333232;
     border-radius: 45px;
     width: 100%;
-
     display: flex;
     align-items: flex-start;
 }
@@ -153,4 +140,4 @@ main {
 .mobile__button--volume {
     height: 120px;
     margin-bottom: 16px;
-}
+}
\ No newline at end of file
diff --git a/src/devices/share.css b/src/devices/share.css
index 6623949..3e86af5 100644
--- a/src/devices/share.css
+++ b/src/devices/share.css
@@ -1,14 +1,11 @@
 /* ######### SHARE ######### */
 #share {
-    position: absolute;
-    bottom: 10px;
-    left: 10px;
-
     height: 50px;
     width: 50px;
-
     padding: 10px;
-
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
     border: none;
     border-radius: 50%;
     background-color: transparent;
diff --git a/src/devices/sidebar.css b/src/devices/sidebar.css
index 7ac54c2..7c6eef2 100644
--- a/src/devices/sidebar.css
+++ b/src/devices/sidebar.css
@@ -4,7 +4,7 @@
     --sidebar-text: black;
     --sidebar-element: var(--sidebar-bg-color);
     --sidebar-element-hover: #e0e0e0;
-    --sidebar-element-active: #ffffff;
+    --sidebar-element-active: #fff;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/src/devices/style.css b/src/devices/style.css
index 27a0c74..3a49213 100644
--- a/src/devices/style.css
+++ b/src/devices/style.css
@@ -29,13 +29,13 @@ body {
     max-width: 1000px;
     background-color: #fff;
     border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
     overflow: hidden;
     display: flex;
     flex-direction: column;
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (width <= 700px) {
     .window {
         margin-left: 60px;
     }
@@ -67,7 +67,7 @@ body {
     flex: 1;
 }
 
-@media screen and (max-width: 500px) {
+@media screen and (width <= 500px) {
     .device-selector {
         flex-direction: column;
     }
@@ -89,7 +89,7 @@ body {
     text-decoration: none;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (width <= 800px) {
     .device-selector__device {
         padding: 10px;
     }
diff --git a/src/index.html b/src/index.html
index cd6c9e3..fe314cf 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,7 +12,7 @@
     {% include "partials/head.njk" %}
 
     <link rel="stylesheet" href="/css/fix-scrollbar.css">
-    <link rel="stylesheet" rel="preload" href="/css/menu-bar.css">
+    <link rel="stylesheet" rel="preload" href="/css/menubar.css">
     <link rel="stylesheet" rel="preload" href="/css/desktop.css">
     <link rel="stylesheet" rel="preload" href="/css/taskbar.css">
 
@@ -84,27 +84,23 @@
     <script src="/pwa/register.js" async></script>
 </head>
 <body>
-    <!-- MENU BAR -->
-    <div class="menu-bar menu-bar--floating">
-        <!--
-            Make sure to update the media query in the CSS file (menu-bar.css)
-            when adding or removing items from the menu bar.
-        -->
-        <div class="menu-bar__left"></div>
-        <div class="menu-bar__middle">
-            <div class="menu-bar__container menu-bar__container--clock">
+    <!-- MENUBAR -->
+    <div class="menubar menubar--floating">
+        <div class="menubar__left"></div>
+        <div class="menubar__middle">
+            <div class="menubar__container menubar__container--clock">
                 <applet-date></applet-date>
                 <applet-clock></applet-clock>
             </div>
         </div>
-        <div class="menu-bar__right">
-            <div class="menu-bar__container menu-bar__container--status">
+        <div class="menubar__right">
+            <div class="menubar__container menubar__container--status">
                 <applet-cpu></applet-cpu>
                 <applet-ram></applet-ram>
                 <applet-network-down data-remove-if-unsupported></applet-network-down>
                 <applet-network-rtt data-remove-if-unsupported></applet-network-rtt>
             </div>
-            <div class="menu-bar__container menu-bar__container--actions">
+            <div class="menubar__container menubar__container--actions">
                 <applet-network></applet-network>
                 <applet-battery content="percent"></applet-battery>
                 <button-power></button-power>
diff --git a/src/lock/lock-screen.css b/src/lock/lock-screen.css
index 41c782a..49ffe53 100644
--- a/src/lock/lock-screen.css
+++ b/src/lock/lock-screen.css
@@ -22,11 +22,11 @@ body[data-lock-screen="active"] .lock-screen {
 }
 
 body[data-lock-screen="hidden"] .lock-screen {
-    animation: slideToTop 0.5s ease-out;
+    animation: slide-to-top 0.5s ease-out;
     animation-fill-mode: forwards;
 }
 
-@keyframes slideToTop {
+@keyframes slide-to-top {
     0% {
         transform: translateY(0);
     }
diff --git a/src/lock/style.css b/src/lock/style.css
index 6bc0693..437cde6 100644
--- a/src/lock/style.css
+++ b/src/lock/style.css
@@ -12,26 +12,25 @@ html {
 }
 
 body {
-    font-family: Roboto, sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    font-optical-sizing: auto;
-    font-style: normal;
-    word-spacing: normal;
-    line-height: 1;
-    margin: 0;
-    padding: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
     color: var(--text-color);
     background: var(--background);
-}
 
-body {
-    width: 100vw;
-    height: 100vh;
+    /* text */
+    font-family: Roboto, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    font-optical-sizing: auto;
+    font-style: normal;
+    word-spacing: normal;
+    line-height: 1;    
 }
 
 
diff --git a/src/reboot/style.css b/src/reboot/style.css
index 7b75ddb..88d1b9b 100644
--- a/src/reboot/style.css
+++ b/src/reboot/style.css
@@ -9,12 +9,11 @@ body {
 }
 
 #terminal {
-    width: 100%;
-    height: 100vh;
-
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
+    height: 100vh;
 }
 
 #output {
diff --git a/src/update/style.css b/src/update/style.css
index 06363d2..036e861 100644
--- a/src/update/style.css
+++ b/src/update/style.css
@@ -35,6 +35,7 @@ body {
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }