diff --git a/src/styles/main.scss b/src/styles/main.scss
index 5d44a3d..d22d4f3 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -28,35 +28,34 @@ html {
     --accent-500: #6cc16c;
     --accent-900: #244624;
 
-
-	--bubble-red: hsl(359, 100%, 92%);
-	--bubble-purple: hsl(274, 100%, 92%);
-	--bubble-blue: hsl(241, 100%, 92%);
-	--bubble-yellow: hsl(50, 100%, 92%);
-	--bubble-green: hsl(125, 100%, 92%);
-	--bubble-orange: hsl(25, 100%, 92%);
-	--bubble-lightlightblue: hsl(176, 100%, 92%);
-	--bubble-lightblue: hsl(198, 100%, 92%);
-
-	--bubble-highlight-red: hsl(359, 100%, 85%);
-	--bubble-highlight-purple: hsl(274, 100%, 85%);
-	--bubble-highlight-blue: hsl(241, 100%, 85%);
-	--bubble-highlight-yellow: hsl(50, 100%, 85%);
-	--bubble-highlight-green: hsl(125, 100%, 85%);
-	--bubble-highlight-orange: hsl(25, 100%, 85%);
-	--bubble-highlight-lightlightblue: hsl(176, 100%, 85%);
-	--bubble-highlight-lightblue: hsl(198, 100%, 85%);
-
-	--bubble-border-red: hsl(359, 75%, 51%);
-	--bubble-border-purple: hsl(274, 75%, 51%);
-	--bubble-border-blue: hsl(241, 75%, 51%);
-	--bubble-border-yellow: hsl(50, 75%, 51%);
-	--bubble-border-green: hsl(125, 75%, 51%);
-	--bubble-border-orange: hsl(25, 75%, 51%);
-	--bubble-border-lightlightblue: hsl(176, 75%, 51%);
-	--bubble-border-lightblue: hsl(198, 75%, 51%);
-
-	--bold-on-dark: 300;
+    --bubble-red: hsl(359, 100%, 92%);
+    --bubble-purple: hsl(274, 100%, 92%);
+    --bubble-blue: hsl(241, 100%, 92%);
+    --bubble-yellow: hsl(50, 100%, 92%);
+    --bubble-green: hsl(125, 100%, 92%);
+    --bubble-orange: hsl(25, 100%, 92%);
+    --bubble-lightlightblue: hsl(176, 100%, 92%);
+    --bubble-lightblue: hsl(198, 100%, 92%);
+
+    --bubble-highlight-red: hsl(359, 100%, 85%);
+    --bubble-highlight-purple: hsl(274, 100%, 85%);
+    --bubble-highlight-blue: hsl(241, 100%, 85%);
+    --bubble-highlight-yellow: hsl(50, 100%, 85%);
+    --bubble-highlight-green: hsl(125, 100%, 85%);
+    --bubble-highlight-orange: hsl(25, 100%, 85%);
+    --bubble-highlight-lightlightblue: hsl(176, 100%, 85%);
+    --bubble-highlight-lightblue: hsl(198, 100%, 85%);
+
+    --bubble-border-red: hsl(359, 75%, 51%);
+    --bubble-border-purple: hsl(274, 75%, 51%);
+    --bubble-border-blue: hsl(241, 75%, 51%);
+    --bubble-border-yellow: hsl(50, 75%, 51%);
+    --bubble-border-green: hsl(125, 75%, 51%);
+    --bubble-border-orange: hsl(25, 75%, 51%);
+    --bubble-border-lightlightblue: hsl(176, 75%, 51%);
+    --bubble-border-lightblue: hsl(198, 75%, 51%);
+
+    --bold-on-dark: 300;
 }
 
 body.dark-mode {
@@ -74,32 +73,31 @@ body.dark-mode {
     --accent-500: hsl(269, 40%, 70%);
     --accent-900: hsl(269, 30%, 90%);
 
-
-	--bubble-red: hsl(359, 40%, 25%);
-	--bubble-purple: hsl(274, 40%, 25%);
-	--bubble-blue: hsl(241, 40%, 25%);
-	--bubble-yellow: hsl(50, 40%, 25%);
-	--bubble-green: hsl(125, 40%, 25%);
-	--bubble-orange: hsl(25, 40%, 25%);
-	--bubble-lightblue: hsl(176, 40%, 25%);
-
-	--bubble-border-red: hsl(359, 75%, 51%);
-	--bubble-border-purple: hsl(274, 75%, 51%);
-	--bubble-border-blue: hsl(241, 75%, 51%);
-	--bubble-border-yellow: hsl(50, 75%, 51%);
-	--bubble-border-green: hsl(125, 75%, 51%);
-	--bubble-border-orange: hsl(25, 75%, 51%);
-	--bubble-border-lightblue: hsl(176, 75%, 51%);
-
-	--bubble-highlight-red: hsl(359, 40%, 31%);
-	--bubble-highlight-purple: hsl(274, 40%, 31%);
-	--bubble-highlight-blue: hsl(241, 40%, 31%);
-	--bubble-highlight-yellow: hsl(50, 40%, 31%);
-	--bubble-highlight-green: hsl(125, 40%, 31%);
-	--bubble-highlight-orange: hsl(25, 40%, 31%);
-	--bubble-highlight-lightblue: hsl(176, 40%, 31%);
-
-	--bold-on-dark: 500;
+    --bubble-red: hsl(359, 40%, 25%);
+    --bubble-purple: hsl(274, 40%, 25%);
+    --bubble-blue: hsl(241, 40%, 25%);
+    --bubble-yellow: hsl(50, 40%, 25%);
+    --bubble-green: hsl(125, 40%, 25%);
+    --bubble-orange: hsl(25, 40%, 25%);
+    --bubble-lightblue: hsl(176, 40%, 25%);
+
+    --bubble-border-red: hsl(359, 75%, 51%);
+    --bubble-border-purple: hsl(274, 75%, 51%);
+    --bubble-border-blue: hsl(241, 75%, 51%);
+    --bubble-border-yellow: hsl(50, 75%, 51%);
+    --bubble-border-green: hsl(125, 75%, 51%);
+    --bubble-border-orange: hsl(25, 75%, 51%);
+    --bubble-border-lightblue: hsl(176, 75%, 51%);
+
+    --bubble-highlight-red: hsl(359, 40%, 31%);
+    --bubble-highlight-purple: hsl(274, 40%, 31%);
+    --bubble-highlight-blue: hsl(241, 40%, 31%);
+    --bubble-highlight-yellow: hsl(50, 40%, 31%);
+    --bubble-highlight-green: hsl(125, 40%, 31%);
+    --bubble-highlight-orange: hsl(25, 40%, 31%);
+    --bubble-highlight-lightblue: hsl(176, 40%, 31%);
+
+    --bold-on-dark: 500;
 }
 
 $device-s-width: 600px;
@@ -880,109 +878,108 @@ body {
         height: 100%;
         overflow: scroll;
 
-		.grid {
-			width: 100%;
-			max-width: 55rem;
-			display: grid;
-			grid-template-columns: 3rem repeat(var(--time-length), 1fr);
-			grid-template-rows: 2rem repeat(var(--days-length), 1fr);
-			border: 2px solid var(--border-500);
-			border-radius: 10px 10px 0 0;
-
-
-			@media screen and (max-width: $device-s-width), (pointer: coarse) {
-				font-size: 12px;
-			}
-
-			.time {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 0.5rem;
-				grid-row: 1;
-				grid-column: var(--offset) / span 2;
-			}
-			.day-name {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 0.5rem;
-				grid-column: 1;
-				grid-row: var(--line);
-			}
-
-			.event {
-				display: flex;
-				flex-direction: row;
-				@media screen and (max-width: $device-s-width), (pointer: coarse) {
-					flex-direction: column;
-				}
-				gap: 0.25rem;
-				align-items: center;
-				justify-content: center;
-				margin: 0.25rem;
-				padding: 0.5rem;
-				grid-row: var(--line);
-				grid-column: var(--offset) / span var(--length);
-				background-color: var(--color);
-				border: 3px solid var(--color);
-				border-radius: 10px;
-				font-weight: var(--bold-on-dark);
-				text-align: center;
-
-				&.highlight {
-					background-color: var(--highlight-color);
-					border: 3px solid var(--highlight-color);
-				}
-				&.selected {
-					border: 3px solid var(--border-color);
-				}
-			}
-			
-			.hline {
-				grid-column: 1 / 13;
-				grid-row: var(--line);
-				height: 0px;
-				border-bottom: 1px solid var(--border-500);
-			}
-			
-			.vline {
-				grid-column: var(--offset);
-				grid-row: 1 / calc(2 + var(--days-length));
-				width: 0px;
-				border-right: 1px dashed var(--border-500);
-			}
-		}
-		.legend {
-			max-width: 55rem;
-			display: grid;
-			grid-template-columns: min-content 1fr;
-			border: 2px solid var(--border-500);
-			border-radius: 0 0 10px 10px;
-			border-top: none;
-			padding: 1rem;
-			gap: 0.5rem 1rem;
-			align-items: center;
-			justify-content: center;
-			width: 100%;
-
-			.name {
-				width: 100%;
-			}
-
-			.color {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				font-weight: 500;
-				width: 2rem;
-				height: 1.5rem;
-				background-color: var(--color);
-				border: 2px solid var(--border-color);
-				border-radius: 10px;
-				font-weight: var(--bold-on-dark);
-			}
-		}
+        .grid {
+            width: 100%;
+            max-width: 55rem;
+            display: grid;
+            grid-template-columns: 3rem repeat(var(--time-length), 1fr);
+            grid-template-rows: 2rem repeat(var(--days-length), 1fr);
+            border: 2px solid var(--border-500);
+            border-radius: 10px 10px 0 0;
+
+            @media screen and (max-width: $device-s-width), (pointer: coarse) {
+                font-size: 12px;
+            }
+
+            .time {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0.5rem;
+                grid-row: 1;
+                grid-column: var(--offset) / span 2;
+            }
+            .day-name {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0.5rem;
+                grid-column: 1;
+                grid-row: var(--line);
+            }
+
+            .event {
+                display: flex;
+                flex-direction: row;
+                @media screen and (max-width: $device-s-width), (pointer: coarse) {
+                    flex-direction: column;
+                }
+                gap: 0.25rem;
+                align-items: center;
+                justify-content: center;
+                margin: 0.25rem;
+                padding: 0.5rem;
+                grid-row: var(--line);
+                grid-column: var(--offset) / span var(--length);
+                background-color: var(--color);
+                border: 3px solid var(--color);
+                border-radius: 10px;
+                font-weight: var(--bold-on-dark);
+                text-align: center;
+
+                &.highlight {
+                    background-color: var(--highlight-color);
+                    border: 3px solid var(--highlight-color);
+                }
+                &.selected {
+                    border: 3px solid var(--border-color);
+                }
+            }
+
+            .hline {
+                grid-column: 1 / 13;
+                grid-row: var(--line);
+                height: 0px;
+                border-bottom: 1px solid var(--border-500);
+            }
+
+            .vline {
+                grid-column: var(--offset);
+                grid-row: 1 / calc(2 + var(--days-length));
+                width: 0px;
+                border-right: 1px dashed var(--border-500);
+            }
+        }
+        .legend {
+            max-width: 55rem;
+            display: grid;
+            grid-template-columns: min-content 1fr;
+            border: 2px solid var(--border-500);
+            border-radius: 0 0 10px 10px;
+            border-top: none;
+            padding: 1rem;
+            gap: 0.5rem 1rem;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+
+            .name {
+                width: 100%;
+            }
+
+            .color {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-weight: 500;
+                width: 2rem;
+                height: 1.5rem;
+                background-color: var(--color);
+                border: 2px solid var(--border-color);
+                border-radius: 10px;
+                font-weight: var(--bold-on-dark);
+            }
+        }
     }
 
     .schedule-view {