* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

 :root{
  --bg-image: url('images/forest.jpg');
  --color-white: #F9F9ED;
  --color-light: #7eb147;
  --color-lightShadow: #5d8731;
  --color-mid: #206f4f;
  --color-shadow: #0f4f35;
  --color-dark: #233031;
}

.theme-ocean{
  --bg-image: url('images/ocean.jpg');
  --color-white: #F4F5EB;
  --color-light: #BEA699;
  --color-lightShadow: #927a6e;
  --color-mid: #4a95c5;
  --color-shadow: #375d75;
  --color-dark: #204252;
}

.theme-sunset{
  --bg-image: url('images/sunset.jpg');
  --color-white: #FFFFFF;
  --color-light: #E5978E;
  --color-lightShadow: #a46b65;
  --color-mid: #495876;
  --color-shadow: #37445e;
  --color-dark: #131117;
}

.theme-night{
  --bg-image: url('images/night.jpg');
  --color-white: #F0FAFE;
  --color-light: #34716c;
  --color-lightShadow: #24534f;
  --color-mid: #13497e;
  --color-shadow: #0d3964;
  --color-dark: #041B2D;
}

body {
  transition: background-image 0.5s ease;
  font-family: 'Short Stack', sans-serif;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--color-white);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}



#subheader {
  margin-top: 50px;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

#setTime {
  background-color: var(--color-mid);
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-radius: 15px;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  box-shadow: 0 6px 0 var(--color-shadow);
}

select {
  background-color: var(--color-light);
  color: var(--color-white);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 110%;
  font-weight: bold;
  border: none;
  
}

select:hover{
  cursor: pointer;
}

.customizations{
  width: 100%;
  display: flex;
  justify-content: space-between;
  
}

.custom-box{
  display: flex;
  flex-direction: column;
  margin-left: 15%;
  margin-right: 15%;
  justify-content: center;
  align-items: center;
  width: 170px;
  padding: 20px;
  background-color: var(--color-mid);
  border-radius: 15px;
  box-shadow: 0 6px 0 var(--color-shadow);
}

.theme-buttons, .sound-buttons{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding-top: 15px;
}

select:focus {
  outline: none;
}


button{
  background-color: var(--color-light);
  border: none;
  padding: 5px;
  color: var(--color-white) !important;
  box-shadow: 0 3px 0 var(--color-lightShadow);
  border-radius: 5px;
}

button, select, input {
  font-family: inherit;
  
}
button.active{
  box-shadow: none !important;
  transform: translateY(2px);
  background-color: var(--color-lightShadow) !important;
}

#timerDiv{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height:300px;
}

#timer{
  position: relative;
  margin: 80px;
  width: 300px;
  height: 300px;
  background-color: var(--color-mid);
  box-shadow: 0 7px 0 var(--color-shadow);
  border-radius: 10%;
}

#baseCircle{
  stroke: var(--color-light);
  fill: none;
  stroke-width: 20px;
}

#timerCircle {
  stroke: var(--color-white);
  fill: none;
  stroke-width: 12px;
  stroke-dasharray: 471;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
}

#timerText {
  fill: var(--color-white);
  font-size: x-large;
  font-family: 'Short Stack', sans-serif;
}

#sipCounter {
  fill: var(--color-white);
  font-size: x-small;
  font-family: 'Short Stack', sans-serif;
  transform: translate(0%, -16%);
}

#button{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 150%);
  width: 70px;
  height: 25px;
}

#button:active {
  box-shadow: none !important;
  transform: translate(-50%, 150%) translateY(2px);
  background-color: var(--color-lightShadow) !important;
}

#selectSoundAlert{
  display: flex;
  position: fixed;
  width: 220px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  color: var(--color-dark);
  bottom: 325px;
  right: 0%;
  margin-right: 225px;
  border-radius: 15px;
}


#selectSoundAlert::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--color-white);
}

#selectSoundAlert {
  opacity: 0;
  transition: opacity 0.5s ease;
}

#selectSoundAlert.visible {
  opacity: 1;
  font-weight: bold;
}

select:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

@keyframes wobble {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

#selectSoundAlert.visible p {
  animation: wobble 0.4s ease 3;
}

/* footer{
  height: 200px;
  width: 100%;
  background-color: var(--color-mid);
} */

@media screen and (max-width: 1200px){
  .custom-box{
    margin-left: 10%;
    margin-right: 10%;
  }
}