body, input, button {
  font-family: 'Chewy', cursive;
}

body {
  background-color: #d1f7ff;
  color: #3a3a3a;
  text-align: center;
  padding: 100px;
  position: relative;
}

#time {
  color: #333333;
  font-size: 10rem;
  margin-top: 10px;
  margin-bottom: 30px;
  -webkit-text-stroke: 9px white;
  font-weight: 500;
}

.controls {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

.controls input {
  width: 120px;
  padding: 8px;
  font-size: 1rem;
  border-radius: 20px;
  border: none;
}

#startControls,
#activeControls {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

#minutesInput {
  width: 120px;
}

.controls button {
  font-size: 1rem;
  padding: 10px 20px;
  margin: 8px;
  border: none;
  border-radius: 20px;
  background-color: #ffffff;
  color: #3a3a3a;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.controls button:hover {
  background-color: #d1f7ff;
}

#bubbleContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.bubble {
  position: absolute;
  left: -80px;
  top: 50%;
  width: 60px;
  animation-name: floatRightWavy;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  transform-origin: center;
}

@keyframes floatRightWavy {
  0%   { transform: translateX(0vw) translateY(0); }
  20%  { transform: translateX(20vw) translateY(-17px); }
  40%  { transform: translateX(40vw) translateY(17px); }
  60%  { transform: translateX(60vw) translateY(-17px); }
  80%  { transform: translateX(80vw) translateY(17px); }
  100% { transform: translateX(100vw) translateY(0); }
}

.paused {
  animation-play-state: paused;
}

.pop {
  animation: popAnim 0.4s forwards;
}

@keyframes popAnim {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.splash {
  transform-origin: center;
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

.shake {
  animation: shake 0.3s;
}