.showtimes {
  color: #FFB347;

  box-shadow: 0px 0px 10px #000000;
  line-height: 2cap;
  border-radius: 100px;
  padding: 2px 2px;
}

#times {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: lighter;
  font-size: x-large;
  color: #333333;
}

body {
  margin: auto;
  width: 50%;
  text-align: center;
  align-items: center;
  line-height: 2.5cap;
  background: #ffffff;
  color: #333333;
}

.button {
  border-radius: 10px;
  border-color: #FFB347;
  background-color: #A8E6CF;
  transition: 0.15s ease-in-out;
  border-width: 1px;
  padding: 10px 3px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: medium;
  color: #333333;
  cursor: pointer;
}

.button:hover {
  border-color: #A8E6CF;
  background-color: #ff9500;
  color: white;
  transform: scale(1.05);
}

#scoreshow {
  font-family: fantasy;
  font-style: italic;
  color: #ff9500;
  box-shadow: 0px 0px 10px #000000;
  border-radius: 100px;
  padding: 2px 2px;
}

#searchInput {
  border-radius: 10px;
  outline: 2px solid #4A90E2;
  border: 0;
  background-color: #FFF8E1;
  outline-offset: 3px;
  padding: 10px 1rem;
  transition: 0.25s;
  font-size: 16px;
  color: #333333;
  font-size: 18px;
}

#searchInput:hover {
  transform: scale(105%);
  outline-style: dashed;
}

#searchInput:focus {
  outline-offset: 5px;
  background-color: #A8E6CF;
  outline: 2px solid #4A90E2;
}



#progress-bar {
  text-align: center;
  align-items: center;
  margin: auto;
  width: 100%;
  height: 20px;
  border: 4px solid #2142ff;

  border-radius: 10px;
  background: #ff6600;

  box-shadow: 0px 0px 10px #000000;
}

#progress {
  height: 100%;
  background: #2142ff;

  transition: width 1s ease;
}

#xp-text {
  font-size: larger;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #333333;
  box-shadow: 0px 0px 10px #000000;
  border-radius: 100px;
  font-weight: 700;
}

#level {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: larger;
  color: #333333;
  font-weight: 900;
  font-size: xx-large;
  box-shadow: 0px 0px 10px #000000;
  border-radius: 100px;
  padding: 2px 2px;

}

#runner {
  position: absolute;
  top: 50px;
  left: 0;
  width: 80px;
  transition: left 0.8s ease;
  z-index: -1;
  width: 250px;
  height: 250px;
  opacity: 0.5;
  box-shadow: 0px 0px 100px #ffffff;
  animation: turn 1800s linear infinite;
}

@keyframes turn {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#input-number-button{
  padding: 10px 10px;
  border-radius: 20px;
  border-width: 0px;
  background-color: #ffb347;
}

#input-number{
  padding: 10px 20px;
  border-radius: 20px;
  background-color: #ff80007c;
  border-width: 2px;
  border-color: #ff8000;
  border-style: solid;
}
#input-number:focus{
  border-radius: 10px;
}

#timeAlert{
  color: #ffffff;
  display: none;
}


@keyframes firework {
  0% {
    transform: translate(var(--x), var(--initialY));
    width: var(--initialSize);
    opacity: 1;
  }

  50% {
    width: 0.5vmin;
    opacity: 1;
  }

  100% {
    width: var(--finalSize);
    opacity: 0;
  }
}


.firework,
.firework::before,
.firework::after {
  --initialSize: 0.5vmin;
  --finalSize: 45vmin;
  --particleSize: 0.2vmin;
  --color1: yellow;
  --color2: khaki;
  --color3: white;
  --color4: lime;
  --color5: gold;
  --color6: mediumseagreen;
  --y: -30vmin;
  --x: -50%;
  --initialY: 60vmin;
  content: "";
  animation: firework 2s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, var(--y));
  width: var(--initialSize);
  aspect-ratio: 1;
  background:


    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,

    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,

    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,

    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,

    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%;
  background-size: var(--initialSize) var(--initialSize);
  background-repeat: no-repeat;
}

.firework::before {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
  transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);

}

.firework::after {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;

  transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);

}

.firework:nth-child(2) {
  --x: 30vmin;
}

.firework:nth-child(2),
.firework:nth-child(2)::before,
.firework:nth-child(2)::after {
  --color1: pink;
  --color2: violet;
  --color3: fuchsia;
  --color4: orchid;
  --color5: plum;
  --color6: lavender;
  --finalSize: 40vmin;
  left: 30%;
  top: 60%;
  animation-delay: -0.25s;
}

.firework:nth-child(3) {
  --x: -30vmin;
  --y: -50vmin;
}

.firework:nth-child(3),
.firework:nth-child(3)::before,
.firework:nth-child(3)::after {
  --color1: cyan;
  --color2: lightcyan;
  --color3: lightblue;
  --color4: PaleTurquoise;
  --color5: SkyBlue;
  --color6: lavender;
  --finalSize: 35vmin;
  left: 70%;
  top: 60%;
  animation-delay: -0.4s;
}



.pauseplay-wrapper {
  --color: #ff8000;
  --size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: var(--size);
  fill: var(--color);
}

.pauseplay-wrapper .pauseplay-play {
  position: absolute;
  animation: keyframes-fill .5s;
}

.pauseplay-wrapper .pauseplay-pause {
  position: absolute;
  display: none;
  animation: keyframes-fill .5s;
}

.pauseplay-wrapper .pauseplay-input:checked ~ .pauseplay-play {
  display: none;
}

.pauseplay-wrapper .pauseplay-input:checked ~ .pauseplay-pause {
  display: block;
}

.pauseplay-wrapper .pauseplay-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

@keyframes keyframes-fill {
  0% {
    transform: rotate(-180deg) scale(0);
    opacity: 0;
  }

  50% {
    transform: rotate(-10deg) scale(1.2);
  }
}