@keyframes flash-in-out {
    0%, 19%, 21%, 39%, 41%, 59%, 61%, 79%, 81%, 100% {
        opacity: 0;
    }
    20%, 40%, 60%, 80% {
        opacity: 1;
    }
}

@keyframes rainbow-bg {
    0% { background: red; }
    17% { background: orange; }
    33% { background: yellow; }
    50% { background: green; }
    67% { background: blue; }
    83% { background: indigo; }
    100% { background: violet; }
}

.flash-overlay {
  font-family: "TAN-NIMBUS", sans-serif;
  position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
}

.flash-overlay.active {
    animation: flash-in-out var(--flash-duration) ease-in-out forwards;
}

.flash-overlay.rainbow {
    animation: rainbow-bg 2s linear infinite, flash-in-out var(--flash-duration) ease-in-out forwards;
}

.flash-text {
    font-family: "TAN-NIMBUS", sans-serif;
    font-size: clamp(24px, 8vw, 48px);
    font-weight: bold;
    text-align: center;
    padding: 0 15px;
}