styles.css

*
{
    cursor: none !important;
}
body
{
    overflow-x: hidden;
    overflow-y: hidden;
    text-align: center;
}
iframe
{
    width: 100vw;
    height: 100vh;

    position: absolute;
    left: 0px;
    top: 0px;

    display: none;
}

.loading
{
    font-family: "Cabin", sans-serif;
    color: #52B547;
    font-size: 10em;
    font-weight: 700;

    width: 100vw;

    position: absolute;
    margin: 0px;
    top: calc(50vh - 97px);
    left: 0px;

    text-shadow: 0px 0px 10px #52B547;
}

.timerback
{
    width: 100vw;
    height: 10px;

    position: absolute;
    left: 0px;
    top: 100vh;
    z-index: 1;

    background-color: #CFD8DC;
}
.timer
{
    width: 0px;
    height: 100%;

    left: 0px;
    top: 0px;

    background-color: #F44336;

    animation: time 15s linear 0s infinite forwards;
}
@keyframes time
{
    from {width: 0vw;}
    to   {width: 100vw;}
}
.slideUp
{
    animation: timeSlideUp 2s ease 0s 1 forwards;
}
@keyframes timeSlideUp
{
    from {top: 100vh;}
    to   {top: calc(100vh - 10px);}
}

.transition
{
    width: 120vw;
    height: 100vh;

    position: absolute;
    top: 0px;
    left: 100vw;

    clip-path: polygon(10vw 0, 120vw 0, 110vw 100vh, 0 100vh);
}
.transition.back
{
    background-color: #27AD1A;
    z-index: 2;
}
.transition.back.slide
{
    animation: slidein  1s ease-in  0s 1 forwards,
               slideout 1s ease-out 1.4s 1 forwards;
}
.transition.front
{
    background-color: #35E522;
    z-index: 3;
}
.transition.front.slide
{
    animation: slidein  1s ease-in  0.2s 1 forwards,
               slideout 1s ease-out 1.2s 1 forwards;
}
.transition.front>img
{
    filter: brightness(0%) invert(100%);
    width: 500px;
    z-index: 4;

    position: absolute;
    top: calc(50vh - 250px);
    left: calc(60vw - 250px);
}
@keyframes slidein
{
    from {left: 100vw;}
    to   {left: -10vw;}
}
@keyframes slideout
{
    from {left: -10vw;}
    to   {left: -120vw;}
}