Added hide to style selector and more modularizated the code

public/sass_styles/_aboutThis.scss

@@ -0,0 +1,51 @@
+#about-this {
+    height: 95vh;
+
+    padding: 0px 3vw;
+    padding-top: 5vh;
+
+    .titles {
+        
+        display: flex;
+
+        h3 {
+            width: 50%;
+
+            @include titleFont;
+            @include normalizeTitle;
+
+            font-size: 22pt;
+
+            .line-through {
+                text-decoration: line-through;
+                text-decoration-thickness: 5px;
+                text-decoration-color: #73b7ff; 
+            }
+        }
+    }
+
+    .information {
+
+        display: flex;
+
+        ul {
+            width: 50%;
+
+            li {
+                h4 {
+                    @include normalizeTitle;
+                    @include bodyFont;
+                    font-size: 18pt;
+                }
+
+                p {
+                    @include normalizeBody;
+                    @include bodyFont;
+                    font-size: 13pt;
+                    margin-left: 2vw;
+                    margin-top: 1vh;
+                }
+            }
+        }
+    }
+}

public/sass_styles/_goDownArrow.scss

@@ -1,9 +1,11 @@
 .go-down {
     height: 7vh;
-    width: 100vw;
+    width: 100%;
     
     display: flex;
     justify-content: center;
+
+    cursor: pointer;
     
     svg {
         height: 6vh;

public/sass_styles/_styleSelector.scss

@@ -1,87 +1,104 @@
 .style-selector{
 
     width: calc(20vw - 1px);
+    
     padding-left: 3vw;
     padding-bottom: 12vh;
     
     position: absolute;
-
+    
     top: 29vh;
-    left: 77vw;
-
+    left: 75vw;
+    
     box-shadow: 1px 6px 15px #00000020;
 
     z-index: 50;
 
-
     h2 {
         @include bodyFont;
         color: $second-color;
         font-size: 30pt;
         text-align: center;
 
+        margin-left: -3vw;
+        
+
+        
         margin-top: 1vh;
         margin-bottom: 3vh;
     }
 
-    
-    
-    .style-container{
-        display: flex;
-        height: 10vh;
-        align-items: center;
+    .style-selection-container {
         
-        label {
+        
+        .style-container{
             display: flex;
-            flex-direction: column;
-            justify-content: center;
+            height: 10vh;
 
-            .title {
-                @include bodyFont;
-                font-size: 13pt;
-            }
+            align-items: center;
             
-            .times {
-                @include bodyFont;
-                color: $second-color;
-                font-size: 13pt;
+            label {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
 
+                .title {
+                    @include bodyFont;
+                    font-size: 13pt;
+                }
+                
+                .times {
+                    @include bodyFont;
+                    color: $second-color;
+                    font-size: 13pt;
+
+                }
             }
         }
-    }
-    
-    input {
-        width: 65px;
-        opacity: 0;
-    }
-    
-    .checkbox__input {
-        display: grid;
-        grid-template-areas: "checkbox";
-    
-        > * {
-            grid-area: checkbox;
+        
+        input {
+            width: 65px;
+            opacity: 0;
         }
-    }
-    
-    
-    .checkbox_control {
-        display: inline-grid;
         
-        width: 45px;
-        height: 45px;
-    
-        border: 3px solid $main-color;
-        border-radius: 0.25em;
-        border-radius: 100%;
+        .checkbox__input {
+            display: grid;
+            grid-template-areas: "checkbox";
+        
+            > * {
+                grid-area: checkbox;
+            }
+        }
+        
+        
+        .checkbox_control {
+            display: inline-grid;
+            
+            width: 45px;
+            height: 45px;
+        
+            border: 3px solid $main-color;
+            border-radius: 0.25em;
+            border-radius: 100%;
 
-        transition: ease-in-out 0.2s ;
-    }
-    
-    .checkbox__input input:checked + .checkbox_control {
+            transition: ease-in-out 0.2s ;
+        }
         
-        background-color: $light-color;
+        .checkbox__input input:checked + .checkbox_control {
+            
+            background-color: $light-color;
+        }
+
+        // CREDITS TO https://moderncss.dev/pure-css-custom-checkbox-style/
     }
 
-    // CREDITS TO https://moderncss.dev/pure-css-custom-checkbox-style/
-}
+    transition: 0.2s ease-in-out;
+}
+
+        .style-selector-show {
+            opacity: 100%;
+        }
+
+        .style-selector-hidden {
+            opacity: 0%;
+        }

public/sass_styles/styles.scss

@@ -38,6 +38,7 @@ $lightest-color: #D7FBE8;
 @import 'mainPomodoro';
 @import 'styleSelector';
 @import 'goDownArrow';
+@import 'aboutThis';
 
 html, body { 
     margin: 0;