@import "globals.scss";

countdownpanel {
  position: absolute;
  width: 100%;
  height: 100%;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;

  &.visible {
    opacity: 1;
  }

  .timerContainer {
    width: auto;
    height: 50px;
    top: 75px;
    min-width: 100px;
    justify-content: center;
    align-items: center;
    background-color: rgba(black, 35%);
    backdrop-filter: blur($back-blur-size);
    border-radius: 25px;
    border: 3px solid white;

    .timerText {
      margin: 20px;
      font-size: 30px;
      color: white;
      text-stroke: 4px black;
    }
  }
}