diff --git a/index.html b/index.html
index 1da4876..024e1be 100644
--- a/index.html
+++ b/index.html
@@ -8,12 +8,12 @@
-
+
diff --git a/styles.css b/styles.css
index 94bfce2..079105d 100644
--- a/styles.css
+++ b/styles.css
@@ -5,11 +5,14 @@
}
.circ {
+ z-index: 1;
background-color: transparent;
- margin-top: vh;
+ margin-top: s0vh;
+ margin-left: 3vw;
position: absolute;
width: 100vw;
height: 80vh;
+ pointer-events: none;
}
.container {
@@ -24,7 +27,7 @@
.counter {
- margin-bottom: 5vh;
+ margin-bottom: 2vh;
justify-content: center;
}
@@ -40,31 +43,50 @@
color: white;}
#increment-btn {
- margin-top: 0vh;
- height: 20vh;
- width: 85vw;
+ border-radius: 0px;
+ font-size:0;
+ margin-left: 1.5vw;
+ margin-top: -5vh;
+ height: 50vh;
+ width: 105vw;
+ transition: background-color 0.1s;
+
+}
+
+#increment-btn:active {
+ background-color: purple;
}
#decrement-btn {
- margin-top: 3vh;
- height: 20vh;
- width: 85vw;
+ margin-left: 1.5vw;
+ height: 50vh;
+ width: 105vw;
+ transition: background-color 0.1s;
}
+#decrement-btn:active {
+ background-color: red;
+}
#reset {
- padding: 0 20px;
- font-size: 20px;
+ border-radius: 20px;
+ border: 5px solid white;
+ height: 140px;
+ width: 930px;
+ font-size: 100px;
}
#counter-value {
+ position: absolute;
+ z-index: 2;
border: 1px solid white;
- height: 50px;
- min-width: 120px;
- border-radius: 10px;
- margin-top: 20px;
+ height: 1px;
+ background-color: transparent;
+ border: 0 !important;
+ margin-top: 7.5vh;
+ margin-left: 28.5vw;
color: white;
- font-family:Georgia, 'Times New Roman', Times, serif;
- font-size: 30px;
+font-family: 'Courier New', Courier, monospace;
+ font-size: 400px;
display: flex;
justify-content: center;
align-items: center;