diff --git a/index.html b/index.html
index f3b27a0..5f3ccb0 100644
--- a/index.html
+++ b/index.html
@@ -9,13 +9,8 @@
-
diff --git a/timer.css b/timer.css
index 961c19f..ec696c1 100644
--- a/timer.css
+++ b/timer.css
@@ -1,35 +1,36 @@
:root {
- --break-color: #9020BA;
- --focus-color: #EED59F;
- --stage-color: var(--break-color);
- --clip-path: none;
+ --time-color: #453960;
+ --details-color: #403060;
+ --background-color: transparent;
+}
+
+html, body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ font-family: 'Inter', sans-serif;
+ background-color: var(--background-color);
+ overflow: hidden;
}
-.timer-box{
+.timer-box {
height: 175px;
width: 397px;
padding: 5px;
}
-
.timer-time {
- font-size: 100px;
- font-family: Inter;
+ font-size: clamp(6rem, 22vw, 16rem);
font-weight: 400;
- letter-spacing: 0%;
- text-align: center;
- color: #453960;
+ color: var(--time-color);
+ line-height: 1;
}
+
.timer-details {
display: fill;
- font-family: Inter;
font-weight: 600;
+ color: var(--details-color);
font-size: 16px;
- justify-content: space-between;
- align-items: center;
- text-align: center;
- width: 65%;
- margin: auto;
- color: #453960;
+ overflow-wrap: break-word;
}