@import "tailwindcss";

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.bg-game-show {
  background: repeating-conic-gradient(
    from var(--angle),
    var(--color-sky-500) var(--angle) calc(var(--angle) + 30deg),
    var(--color-sky-700) calc(var(--angle) + 30deg) calc(var(--angle) + 60deg)
  );
}

.bg-game-show.animate {
  animation: rotate_bg 1.5s ease-in-out;
}

@keyframes rotate_bg {
  from {
    --angle: 00deg;
  }
  to {
    --angle: 30deg;
  }
}

.play:before {
  content: "▶️";
}
.pause:before {
  content: "⏸";
}

.text-outline {
  -webkit-text-stroke: 2px black;
}

.text-outline-small {
  -webkit-text-stroke: 1px black;
}

iframe {
  position: absolute;
  top: -1000px;
}