Finished the pomodoro timer

except for a sound, the settings and perfect centering on mobile devices

src/app/pages/modus/focus/focus.component.css

@@ -9,8 +9,11 @@ app-tusha-page {
   justify-content: space-between;
 }
 
-.countdown-box {
+.fullwidth {
   width: 320px;
+}
+
+.countdown-box {
   height: 320px;
   border: 2px solid;
   padding: 0.5em 0.5em 0.5em 0.5em;
@@ -30,31 +33,31 @@ app-tusha-page {
   color: darkred;
 }
 
-.countdown-state-short-break-box {
-  background-color: lightgreen;
+.countdown-state-short_break-box {
+  background-color: lightcyan;
   border-color: darkgreen;
 }
 
-.countdown-state-short-break-text {
+.countdown-state-short_break-text {
   color: darkgreen;
 }
 
-.countdown-state-long-break-box {
+.countdown-state-long_break-box {
   background-color: peachpuff;
   border-color: orangered;
 }
 
-.countdown-state-long-break-text {
+.countdown-state-long_break-text {
   color: orangered;
 
 }
 
-.countdown-state-in-focus-box {
+.countdown-state-in_focus-box {
   background-color: lightblue;
   border-color: darkblue;
 }
 
-.countdown-state-in-focus-text {
+.countdown-state-in_focus-text {
   color: darkblue;
 }
 
@@ -72,6 +75,19 @@ app-tusha-page {
   background-color: lavender;
 }
 
+.countdown-text {
+  position: relative;
+  transform: translate(25%, -225%);
+  font-size: 4em;
+  color: var(--ion-color-primary);
+}
+
+ion-button {
+  position: relative;
+  width: 120px;
+}
+
+
 
 
 
@@ -98,21 +114,9 @@ app-tusha-page {
   background-color: beige;
 }
 
-ion-button {
-  position: relative;
-  left: 50%;
-  margin-top: 20px;
-  transform: translate(-50%, 0%);
-}
 
-.countdown-text {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 4em;
-  color: var(--ion-color-primary);
-}
+
+
 
 .timer {
   width: 350px;