body {
  background: black;
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}


.center {
  display: flex;
  flex-direction: column;
  margin: auto;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
}

#egg {
  display: block;
  position: relative;
  border: 2px solid white;
  width: 100px;
  height: 150px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

#egg_white {
  width: 100px;
  height: 150px;
  display: block;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transition: all 0.5s ease;
}

#egg_white.raw {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(2px);
}

#egg_white.soft {
  background: rgba(255,255,255,0.65);
}

#egg_white.jammy {
  background: rgba(255,255,255,0.85);
}

#egg_white.hard {
  background: white;
}


#yolk {
  width: 75px;
  height: 75px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-15%);
  border-radius: 50%;
  transition: all 0.5s ease;
}

#yolk.raw {
  background: radial-gradient(circle at 30% 30%,
  #ffd54f,
  #ff8f00);
  box-shadow: 0 0 20px orange;
}

#yolk.soft {
  background: radial-gradient(circle at 30% 30%,
  #ffeb3b,
  #ffb300);
}

#yolk.jammy {
  background: radial-gradient(circle at 30% 30%,
  #ffe082,
  #f9a825);
}

#yolk.hard {
  background: #f5f5a5;
  border: 3px solid #e6e66f;
}

#yolk.overcooked {
  background: #d8d89a;
  border: 4px solid #9e9e65;
}

#egg.overcooked::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 3px solid rgba(100,120,50,0.7);
}

#egg.ready {
  transform: rotate(-20deg);
}

#egg.ready #yolk {
  transform:
    translateX(-50%)
    translateY(-15%)
    scale(1.15);
}

.center button {
  background: white;
  border: none;
  font-size: 20px;
  border-radius: 10px;
  padding: 10px;
  margin: 25px auto;
  cursor: progress;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#timer {
  color: white;
  font-size: 20px;
  width: 200px;
}

#timer_value {
  font-size: 30px;
  color: white;
  position: relative;
}