.sound-btn.active {        
    background-color: #f7c948; /* Soothing yellow */        
    color: #333;        
            
  }        
    .mid-main-div {            
    	box-shadow:0 4px 8px rgba(0,0,0,0.1) ;
      font-family: 'Segoe UI', sans-serif;            
      background: linear-gradient(to top, #e0f7fa, #e8f5e9);            
      color: #2e7d32;            
      text-align: center;            
      padding: 20px;        
 
border-radius:5px;

    }            
            
    h1 {            
      font-size: 2rem;            
      margin-bottom: 10px;            
    }            
            
   select#timerSelect {            
  padding: 10px 15px;            
  font-size: 1.1em;            
  border-radius: 10px;            
  background-color: #f1f7f4;            
  border: 2px solid #a5d6a7;            
  color: #2e7d32;            
  font-weight: bold;            
  width: 100%;            
  max-width: 300px;            
  margin: 20px auto;            
  display: block;            
  outline: none;            
  appearance: none;            
  -webkit-appearance: none;            
  -moz-appearance: none;            
  transition: border-color 0.3s, box-shadow 0.3s;            
}            
            
select#timerSelect:focus {            
  border-color: #81c784;            
  box-shadow: 0 0 5px rgba(129, 199, 132, 0.7);            
  background-color: #e8f5e9;            
}            
            
    .sound-buttons {            
      display: flex;            
      overflow-x: auto;            
      gap: 10px;            
      padding: 10px;            
      margin-bottom: 20px;            
      scroll-behavior: smooth;            
    }            
            
    .sound-buttons button {            
      flex: 0 0 auto;            
      padding: 10px 20px;            
      border-radius: 20px;            
      border: none;            
      background: #c8e6c9;            
      color: #1b5e20;            
      font-weight: bold;            
      cursor: pointer;            
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);            
      transition: background 0.3s;            
    }            
            
    .sound-buttons button.active {            
      background: #81c784;            
    }            
            
    #startBtn {            
      padding: 12px 25px;            
      font-size: 1.1rem;            
      background-color: #81d4fa;            
      color: #004d40;            
      border: none;            
      border-radius: 25px;            
      cursor: pointer;            
      font-weight: bold;            
      transition: 0.3s;            
    }            
            
    #startBtn:hover {            
      background-color: #4fc3f7;            
    }            
            
    #timerDisplay {            
      font-size: 2rem;            
      margin-top: 20px;            
    }            
    #resetBtn {      
  background-color: #ef9a9a; /* Soft red/pink */      
  border: none;      
  color: #fff;      
  padding: 10px 20px;      
  font-size: 16px;      
  margin-top: 15px;      
  margin-left: 20px;      
  border-radius: 8px;      
  cursor: pointer;      
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);      
  transition: background-color 0.3s, transform 0.2s;      
}      
      
#resetBtn:hover {      
  background-color: #e57373; /* Slightly darker on hover */      
  transform: scale(1.03);      
}