From 43f50a35ae1ede3924ce4f8d173cd8de54c694f6 Mon Sep 17 00:00:00 2001
From: abutler911 <abutler911@gmail.com>
Date: Mon, 9 Oct 2023 22:34:22 -0600
Subject: [PATCH] more style changes

---
 script.js  | 10 ++++++----
 styles.css | 16 +++++++---------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/script.js b/script.js
index 0a85ed1..e111376 100644
--- a/script.js
+++ b/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) {
diff --git a/styles.css b/styles.css
index 760fc62..41ce6d6 100644
--- a/styles.css
+++ b/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;
-}