more style changes

script.js

@@ -67,18 +67,20 @@ const nextButton = document.getElementById("next-button");
 const pauseButton = document.getElementById("pause-button");
 
 function updateDisplay() {
+  const affirmationContainer = document.getElementById("affirmation-container");
   const currentSection = affirmationSections[currentSectionIndex];
+
   if (currentPhraseIndex < currentSection.phrases.length) {
     displayElement.textContent = currentSection.phrases[currentPhraseIndex];
-    sectionNameElement.textContent = currentSection.section; // Set the section name
+    sectionNameElement.textContent = currentSection.section;
     countdownValue = 7;
-    displayElement.classList.remove("breathe");
+    affirmationContainer.classList.remove("breathe");
   } else {
     displayElement.textContent =
       "Place a hand on your heart and belly, and take three deep breaths.";
-    sectionNameElement.textContent = ""; // Clear the section name during the breathing part
+    sectionNameElement.textContent = "";
     countdownValue = 15;
-    displayElement.classList.add("breathe");
+    affirmationContainer.classList.add("breathe");
   }
 
   if (!isPaused) {

styles.css

@@ -53,9 +53,6 @@ h3 {
 #timer {
   font-size: 2rem;
   color: #e44d26;
-  border: 2px solid gray;
-  padding: 0px 20px;
-  border-radius: 10px;
 }
 #affirmation-container {
   display: flex;
@@ -81,10 +78,11 @@ h3 {
 }
 #section-name {
   font-size: 0.8rem;
-  align-self: flex-start;
-  /* margin-bottom: 10px; */
+  /* align-self: flex-start; */
+  text-align: center;
   color: #555;
 }
+
 /* Button container */
 .button-container {
   display: flex;
@@ -119,6 +117,10 @@ button:hover {
   text-decoration: none;
   font-size: 1.2rem;
 }
+#affirmation-container.breathe {
+  animation: breathe 15s ease-in-out 1;
+}
+
 @keyframes breathe {
   0%,
   100% {
@@ -128,7 +130,3 @@ button:hover {
     background-color: #00ff00;
   }
 }
-
-#affirmation-display.breathe {
-  animation: breathe 15s ease-in-out 1;
-}