@font-face {
    font-family: 'ComicSans';
    src: url('./fonts/comic-sans-ms.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@keyframes fast-flash {
    0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% {
        color: black;
        text-shadow: 0 0 4px white;
    }
    5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
        color: white;
        text-shadow: 0 0 4px black;
    }
    0%, 100% {background-color: #ff0000;}
    20% {background-color: #ffff00;}
    40% {background-color: #00ff00;}
    60% {background-color: #00ffff;}
    80% {background-color: #ff00ff;}
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    font-size: 10vw;    /*make text size responsive*/
    text-align: center;
    justify-content: center;
    align-items: center;
    animation: fast-flash 0.1s linear infinite;
    z-index: 9999;
}

@keyframes hue-rotate-bg {
    0% {
        filter: hue-rotate(0deg); /* No rotation */
    }
    100% {
        filter: hue-rotate(360deg); /* Full rotation */
  }
}
#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: conic-gradient(from 0deg, 
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%));
    animation: hue-rotate-bg 1s linear infinite;
  }

body {
    font-family: 'ComicSans', 'Comic Sans MS', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
    text-align: center;
    overflow: hidden;
}