Structure of the pomodoros counter done

public/sass_styles/_mainPomodoro.scss

@@ -33,6 +33,8 @@
             @include normalizeBody;
             
             color: $second-color;
+            user-select: none;
+
         }
 
         h3 {

public/sass_styles/_pomodoro-counter.scss

@@ -0,0 +1,45 @@
+.pomodoro-counter {
+
+
+    position: absolute;
+    top: 29vh;
+
+    ul {
+
+        li {
+            display: flex;
+
+            @include bodyFont;
+
+            list-style-type: none;
+            margin-top: 2vh;
+
+            font-size: 15pt;
+
+            color: #00000070;
+
+            .separator {
+                user-select: none;
+                margin: 0px 0.5vw;
+            }
+            
+            .quantity {
+                @include titleFont;
+
+                user-select: none;
+                
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                
+                height: 30px;
+                width: 30px;
+
+                border-radius: 100%;
+
+                color: $second-color;
+                background-color: $light-color;
+            }
+        }
+    }
+}

public/sass_styles/styles.scss

@@ -49,6 +49,7 @@ $lightest-color: #D7FBE8;
 @import 'goDownArrow';
 @import 'aboutThis';
 @import 'historyButton';
+@import 'pomodoro-counter';
 
 html, body { 
     margin: 0;