diff --git a/index.html b/index.html
index 1b4efeb..db42179 100644
--- a/index.html
+++ b/index.html
@@ -27,14 +27,17 @@
-
+
+
+
+
diff --git a/styles.css b/styles.css
index 9d8e4bd..2554452 100644
--- a/styles.css
+++ b/styles.css
@@ -21,7 +21,7 @@
body {
font-family: "Cinzel", serif;
- background-color: var(--black);
+ background-color: var(--white);
color: #333;
margin: 0;
padding: 0;
@@ -30,24 +30,30 @@ body {
align-items: center;
justify-content: center;
min-height: 100vh;
- animation: backgroundFade 10s infinite alternate;
}
.header,
.header p {
text-align: center;
padding: 20px;
- color: var(--white);
- font-size: var(--font-medium);
+ color: var(--black);
+ font-size: 0.8rem;
line-height: 1.5;
margin: 0;
}
.header h1 {
- font-size: var(--font-large);
+ font-size: 3rem;
color: var(--green);
}
+.affirmation-header {
+ text-align: center;
+ padding: 20px;
+ color: var(--black);
+ font-size: 3rem;
+ line-height: 1.5;
+}
#timer-container {
display: flex;
justify-content: center;
@@ -55,9 +61,8 @@ body {
width: 100%;
}
-#timer,
-button {
- font-size: var(--font-large);
+#timer {
+ font-size: 5rem;
color: var(--green);
}
@@ -65,12 +70,12 @@ button {
display: flex;
flex-direction: column;
align-items: center;
- width: 80%;
+ width: 90%;
min-height: 20vh;
- background-color: var(--white);
+ background-color: var(--light-blue);
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- padding: 20px;
+ padding: 10px;
margin-top: 20px;
margin: 20px auto;
}
@@ -82,10 +87,11 @@ button {
align-items: center;
justify-content: center;
text-align: center;
+ font-size: 2rem;
}
#section-name {
- font-size: var(--font-small);
+ font-size: 1rem;
text-align: center;
color: #555;
}
@@ -96,7 +102,7 @@ button {
}
button {
- background-color: #8e44ad;
+ background-color: var(--dark-blue);
color: var(--white);
border: none;
padding: 10px 20px;
@@ -105,6 +111,7 @@ button {
cursor: pointer;
transition: background-color 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ font-size: 1.3rem;
}
button:hover {