* {
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #e9ecef; /* Soft background color */
  color: #343a40; /* Dark text for readability */
  margin: 0;
  padding: 0;
}

.container {
  max-width: 600px; /* Maximum width for the container */
  margin: 50px auto; /* Center the container */
  background: white; /* White background for the container */
  padding: 30px; /* Padding inside the container */
  border-radius: 15px; /* Rounded corners */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* Deeper shadow for depth */
  text-align: center; /* Center text */
}

h1 {
  color: #007BFF; /* Blue color for the main title */
  margin-bottom: 20px; /* Space below the title */
  font-size: 2.5em; /* Larger font size for the title */
  font-weight: bold; /* Bold title */
}

h2 {
  color: #495057; /* Darker color for section titles */
  margin-bottom: 10px; /* Space below section titles */
  font-size: 1.5em; /* Slightly larger font size for section titles */
}

.breathing-exercise, .timer, .quote, .journal-entry {
  margin: 20px 0; /* Space around each section */
  padding: 20px; /* Padding inside each section */
  border-radius: 10px; /* Rounded corners for sections */
  background-color: #f8f9fa; /* Light background for sections */
  transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for sections */
}

.breathing-exercise:hover, .timer:hover, .quote:hover, .journal-entry:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
}

button {
  display: block; /* Make buttons block elements */
  width: 100%; /* Full width for buttons */
  padding: 12px; /* Padding inside buttons */
  margin-top: 10px; /* Space above buttons */
  background-color: #007BFF; /* Blue background for buttons */
  color: white; /* White text for buttons */
  border: none; /* Remove default border */
  border-radius: 5px; /* Rounded corners for buttons */
  font-size: 16px; /* Font size for buttons */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transition for background color */
}

button:hover {
  background-color: #0056b3; /* Darker blue on hover */
  transform: scale(1.05); /* Slightly enlarge button on hover */
}

input, textarea {
  width: 100%; /* Full width for input fields */
  padding: 12px; /* Padding inside input fields */
  margin-top: 10px; /* Space above input fields */
  border: 1px solid #ced4da; /* Light border for input fields */
  border-radius: 5px; /* Rounded corners for input fields */
  font-size: 16px; /* Font size for input fields */
  transition: border-color 0.3s; /* Smooth transition for border color */
}

input:focus, textarea:focus {
  border-color: #007BFF; /* Change border color on focus */
  outline: none; /* Remove default outline */
}

#timer-display {
  font-size: 24px; /* Larger font size for timer display */
  text-align: center; /* Center text in timer display */
  margin-top: 10px; /* Space above timer display */
  color: #28a745; /* Green color for timer display */
  font-weight: bold; /* Bold timer display */
}

#entry-status {
  margin-top: 10px; /* Space above entry status */
  color: #28a745; /* Green color for success messages */
  font-weight: bold; /* Bold status messages */
}