@font-face {
    font-family: "Quintessential";
    src: url("Quintessential.ttf") format("truetype");
}

@keyframes flash {
    0%, 100% { color: red; }
    50%      { color: white; }
}

@keyframes fidgetRainbow {
    0%   { 
        transform: translate(0, 0) rotate(0deg); 
        background-position: 0% 50%;
    }
    25%  { 
        transform: translate(-5px, 3px) rotate(-2deg); 
        background-position: 75% 50%;
    }
    50%  { 
        transform: translate(5px, -3px) rotate(2deg); 
        background-position: 150% 50%;
    }
    75%  { 
        transform: translate(-3px, 5px) rotate(-1deg); 
        background-position: 225% 50%;
    }
    100% { 
        transform: translate(0, 0) rotate(0deg); 
        background-position: 300% 50%;
    }
}


* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.center {
    padding: 70px 0;
    text-align: center;
    position: absolute;
    inset: 0;
}

.physics-image {
    position: fixed;
    pointer-events: none;
    z-index: -99;
    transition: none;
  }

.strokeme {
    color: #000000;
}

.fidgetting {
    position: fixed;
    left: 50px;
    display: inline-block;
    font-size: 18px;
    color: white;

    background: linear-gradient(90deg, 
        #ff0000, #ff8800, #ffff00, 
        #00ff00, #0088ff, #8800ff, #ff0000
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* Animation */
    animation: fidgetRainbow 4s ease-in-out infinite;
}

.warning {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    text-align: center;
    font-weight: bold;
    animation: flash 0.5s infinite;
    z-index: 5;
}