Main pomodoro, style selector and goDownArrow styles done

public/sass_styles/_goDownArrow.scss

@@ -0,0 +1,15 @@
+.go-down {
+    height: 7vh;
+    width: 100vw;
+    
+    display: flex;
+    justify-content: center;
+    
+    svg {
+        height: 6vh;
+        path {
+            fill: rgb(170, 170, 170);
+            // CREDITS TO https://stackoverflow.com/a/49627345
+        }
+    }
+}

public/sass_styles/_mainPomodoro.scss

@@ -0,0 +1,64 @@
+.main-pomodoro {
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    height: 68vh;
+
+    .timer {
+
+        display: flex;
+        justify-content: center;
+
+        @include bodyFont;
+        font-weight: bold;
+        font-size: 130pt;
+
+        color: $second-color;
+    }
+
+    .style-display {
+
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+
+        @include bodyFont;
+        
+        h4 {
+            font-size: 24pt;
+            
+            @include normalizeBody;
+            
+            color: $second-color;
+        }
+
+        h3 {
+            font-size: 30pt;
+
+            @include normalizeBody;
+
+            color: $second-color;
+
+            cursor: pointer;
+            user-select: none;
+        }
+    }
+
+    .start-pomodoro {
+        @include normalizeButton;
+        @include titleFont;
+
+        margin-top: 6vh;
+        width: 30vw;
+        height: 8vh;
+        
+        background: $second-color;
+        border-radius: 24px;
+
+        font-size: 5vh;
+        color: white;
+    }
+}

public/sass_styles/_styleSelector.scss

@@ -0,0 +1,87 @@
+.style-selector{
+
+    width: calc(20vw - 1px);
+    padding-left: 3vw;
+    padding-bottom: 12vh;
+    
+    position: absolute;
+
+    top: 29vh;
+    left: 77vw;
+
+    box-shadow: 1px 6px 15px #00000020;
+
+    z-index: 50;
+
+
+    h2 {
+        @include bodyFont;
+        color: $second-color;
+        font-size: 30pt;
+        text-align: center;
+
+        margin-top: 1vh;
+        margin-bottom: 3vh;
+    }
+
+    
+    
+    .style-container{
+        display: flex;
+        height: 10vh;
+        align-items: center;
+        
+        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;
+        }
+    }
+    
+    
+    .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 {
+        
+        background-color: $light-color;
+    }
+
+    // CREDITS TO https://moderncss.dev/pure-css-custom-checkbox-style/
+}

public/sass_styles/styles.scss

@@ -1,14 +1,8 @@
-html, body { 
-    margin: 0;
-    padding: 0;
-}
 
-body {
-    height: 100%;
-}
 
 @mixin titleFont {
     font-family: 'Raleway', sans-serif;
+    font-weight: 700;
 }
 
 @mixin bodyFont {
@@ -32,10 +26,25 @@ body {
     width: 8vw;
 }
 
+$background-color: #ffffff;
+
 $main-color: #62D2A2;
 $second-color: #1FAB89;
 $light-color: #9DF3C4;
 $lightest-color: #D7FBE8;
 
 @import 'header';
-@import 'banner-login';
+@import 'banner-login';
+@import 'mainPomodoro';
+@import 'styleSelector';
+@import 'goDownArrow';
+
+html, body { 
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    height: 100%;
+    background-color: $background-color;
+}