* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

.atkinson-hyperlegible-mono-bc {
    font-family: "Atkinson Hyperlegible Mono", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body {
    display: flex;
    width: 100vw;
    height: 100vh;
    color: white;
    background-color: white;
    align-items: center;
    justify-content: space-evenly;
    animation: reveal 18s infinite steps(1);
}

.title {
    color:#fff;
    animation: treveal 24s infinite steps(1);
}

.clicker {
    color: cornflowerblue;
}

a {
    color:#fff;
    text-decoration: none;
}
a:hover {
    color:#e6e6e6;
    text-decoration: line-through;
}
a:visited {
    color:#e6e6e6;
    text-decoration: line-through;
}

.glitch {
    width: 300px;
    height: 300px;
    background-image: url('./images/Un-1.png');
    background-size: cover;
    animation: glitch 6s infinite steps(1);
}

@keyframes treveal {
    0%, 100% {
        color:#fff;
    }

    60% {
        color:#000;
    }

    65% {
        color:#fff;
    }

}

@keyframes reveal {
    0%, 100% {
        background-color: white;
    }

    40% {
        background-color: #ddd;
    }

    45% {
        background-color: white;
    }

    80% {
        background-color: #000;
    }

    88% {
        background-color: white;
    }
}

@keyframes glitch {
    0%, 100% {
        background-image: url('./images/Un-1.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    92.5% {
        background-image: url('./images/gi-1.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    21% {
        background-image: url('./images/un-2.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    93% {
        background-image: url('./images/gi-2.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    94% {
        background-image: url('./images/gi-3.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    90% {
        background-image: url('./images/gi-5.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    91% {
        background-image: url('./images/un-3.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    91.2% {
        background-image: url('./images/gi-23.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    95% {
        background-image: url('./images/gi-6.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    89% {
        background-image: url('./images/gi-7.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    88% {
        background-image: url('./images/gi-8.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    87% {
        background-image: url('./images/gi-9.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    86% {
        background-image: url('./images/gi-10.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .2;
    }

    85% {
        background-image: url('./images/gi-11.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .2;
    }

    97.5% {
        background-image: url('./images/gi-12.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .2;
    }

    98% {
        background-image: url('./images/un-3.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    30% {
        background-image: url('./images/gi-13.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .2;
    }

    32% {
        background-image: url('./images/gi-14.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .1;
    }

    34% {
        background-image: url('./images/gi-15.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .1;
    }

    34.5% {
        background-image: url('./images/un-4.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .3;
    }

    35% {
        background-image: url('./images/gi-16.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .1;
    }

    36% {
        background-image: url('./images/gi-17.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .1;
    }

    38% {
        background-image: url('./images/gi-18.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .1;
    }

    40% {
        background-image: url('./images/gi-19.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .1;
    }

    44% {
        background-image: url('./images/gi-20.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .1;
    }

    65% {
        background-image: url('./images/un-4.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .1;
    }

    72% {
        background-image: url('./images/un-5.png');
        background-size: cover;
        background-blend-mode: lighten;
        opacity: .1;
    }



}