* {
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
}

body {
  background: linear-gradient(to bottom, #a1c4fd, #c2e9fb);
  margin: 0; /* Remove default margin */
  min-height: 100vh; /* Ensure gradient covers full height */
}

#meditation-app {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; /* Will be overridden by max-width for larger screens */
  max-width: 600px;
  /* margin: auto; /* Not needed with absolute positioning + transform */
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

#instruction {
  font-size: 70px; /* Adjusted font size */
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.2; /* Added line-height */
  color: #444; /* Added color */
  animation: breathing 3s ease-in-out infinite; /* Added breathing animation */
}

/* Adjustments for medium-sized screens */
@media screen and (max-width: 1024px) {
  #instruction {
      /* Adjust styles here for medium screens */
      font-size: 56px; /* Adjusted for new base size */
  }
}

/* Adjustments for small screens */
@media screen and (max-width: 768px) {
  #instruction {
      /* Adjust styles here for small screens */
      font-size: 42px; /* Adjusted for new base size */
  }
}

/* Adjustments for small screens */
@media screen and (max-width: 480px) {
  #meditation-app {
    padding: 20px; /* Reduced padding for very small screens */
  }
  #instruction {
      /* Adjust styles here for small screens */
      font-size: 34px; /* Adjusted for new base size */
  }
  h1 {
    font-size: 28px; /* Reduced font size for h1 on very small screens */
  }
  button {
    padding: 10px 20px; /* Reduced padding for buttons on very small screens */
  }
}

button {
  font-size: 18px; /* Adjusted font size */
  padding: 12px 30px; /* Adjusted padding */
  cursor: pointer;
  border: 0;
  border-radius: 25px; /* Added border-radius */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Added box-shadow */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Added transition */
}

button:hover {
  transform: translateY(-2px); /* Added hover transform */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* Enhanced hover box-shadow */
}

.hidden {
  display: none;
}

#start-btn {
  background-color: #28a745; /* Updated background color */
  color: white;
}

#start-btn:hover {
  background-color: #218838; /* Darker shade for hover */
}

#stop-btn {
  background-color: #dc3545; /* Updated background color */
  color: white;
}

#stop-btn:hover {
  background-color: #c82333; /* Darker shade for hover */
}

h1 {
  font-size: 36px; /* Adjusted font size */
  color: #333; /* Adjusted color */
  margin-bottom: 30px; /* Adjusted margin-bottom */
}

/* Keyframes for the breathing animation */
@keyframes breathing {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}