@keyframes backgroundScrollUp {
    0% {
        top: 100vh;
    }
    100% {
        top: 0;
    }
}

@keyframes whiteDiamond {
    0% {
        width: 0;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    50% {
        opacity: 1;
    }
    75% {
        transform: translate(-50%, -50%) rotate(1485deg);
    }
    100% {
        width: 100%;
        transform: translate(-50%, -50%) rotate(1485deg);
    }
    
}

@keyframes handDown {
    0% {
        top: calc(-50% + -300px);
    }
    100% {
        top: calc(50% - 350px);
    }
}

@keyframes handShake {
    0% { transform: translate(calc(-50% + 1px), calc(-50% + 1px)) rotate(29deg); }
    10% { transform: translate(calc(-50% - 1px), calc(-50% - 2px)) rotate(30deg); }
    20% { transform: translate(calc(-50% - 3px), calc(-50% + 0px)) rotate(31deg); }
    30% { transform: translate(calc(-50% + 3px), calc(-50% + 2px)) rotate(30deg); }
    40% { transform: translate(calc(-50% + 1px), calc(-50% - 1px)) rotate(31deg); }
    50% { transform: translate(calc(-50% - 1px), calc(-50% + 2px)) rotate(29deg); }
    70% { transform: translate(calc(-50% + 3px), calc(-50% + 1px)) rotate(29deg); }
    60% { transform: translate(calc(-50% - 3px), calc(-50% + 1px)) rotate(30deg); }
    80% { transform: translate(calc(-50% - 1px), calc(-50% - 1px)) rotate(30deg); }
    90% { transform: translate(calc(-50% + 1px), calc(-50% + 2px)) rotate(31deg); }
    100% { transform: translate(calc(-50% + 1px), calc(-50% -2px)) rotate(30deg); }
}

@keyframes handUp {
    0% {
        top: calc(50% - 350px);
    }
    100% {
        top: -300px;
    }
}

@keyframes handDownExit {
    0% {
        top: calc(-50% + -300px);
    }
    100% {
        top: calc(50% - 350px);
    }
}

@keyframes handUpExit {
    0% {
        top: calc(50% - 350px);
    }
    100% {
        top: -100%;
    }
}

@media screen and (max-width: 640px) {
    @keyframes handDown {
        0% {
            top: calc(-50% + -300px);
        }
        100% {
            top: calc(50% - 300px);
        }
    }

    @keyframes handUp {
        0% {
            top: calc(50% - 300px);
        }
        100% {
            top: -300px;
        }
    }

    @keyframes handDownExit {
        0% {
            top: calc(-50% + -300px);
        }
        100% {
            top: calc(50% - 300px);
        }
    }

    @keyframes handUpExit {
        0% {
            top: calc(50% - 300px);
        }
        100% {
            top: -100%;
        }
    }
}

@keyframes headDown {
    0% {
        top: -50%
    }
    100% {
        top: 50%;
    }
}

@keyframes headUp {
    0% {
        top: 50%;
    }
    100% {
        top: -100%;
    }
}

@keyframes headShake {
    0% { transform: translate(calc(-50% + 1px), calc(-50% + 1px)) rotate(-1deg); }
    10% { transform: translate(calc(-50% - 1px), calc(-50% - 2px)) rotate(0deg); }
    20% { transform: translate(calc(-50% - 3px), calc(-50% + 0px)) rotate(1deg); }
    30% { transform: translate(calc(-50% + 3px), calc(-50% + 2px)) rotate(0deg); }
    40% { transform: translate(calc(-50% + 1px), calc(-50% - 1px)) rotate(1deg); }
    50% { transform: translate(calc(-50% - 1px), calc(-50% + 2px)) rotate(-1deg); }
    70% { transform: translate(calc(-50% + 3px), calc(-50% + 1px)) rotate(-1deg); }
    60% { transform: translate(calc(-50% - 3px), calc(-50% + 1px)) rotate(0deg); }
    80% { transform: translate(calc(-50% - 1px), calc(-50% - 1px)) rotate(0deg); }
    90% { transform: translate(calc(-50% + 1px), calc(-50% + 2px)) rotate(1deg); }
    100% { transform: translate(calc(-50% + 1px), calc(-50% -2px)) rotate(0deg); }
}

@keyframes circleGrow {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
    
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes menuUp {
    0% {
        top: 100%;
        transform: translate(-50%, 0%);
    }
    100% {
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

@keyframes menuDown {
    0% {
        top: 50%;
        transform: translate(-50%, -50%);
    }
    100% {
        top: 100%;
        transform: translate(-50%, 0%);
    }
}

@media screen and (max-width: 640px) {
    @keyframes menuUp {
        0% {
            top: 100%;
            transform: translate(0, 0%);
        }
        100% {
            top: 50%;
            transform: translate(0, -50%);
        }
    }
    @keyframes menuDown {
        0% {
            top: 50%;
            transform: translate(0, -50%);
        }
        100% {
            top: 100%;
            transform: translate(0, 0%);
        }
    }
}

@keyframes screenShake {
    0% { transform: translate(calc(-50% + 1px), calc(-50% + 1px)) rotate(-1deg); }
    10% { transform: translate(calc(-50% - 1px), calc(-50% - 2px)) rotate(0deg); }
    20% { transform: translate(calc(-50% - 3px), calc(-50% + 0px)) rotate(1deg); }
    30% { transform: translate(calc(-50% + 3px), calc(-50% + 2px)) rotate(0deg); }
    40% { transform: translate(calc(-50% + 1px), calc(-50% - 1px)) rotate(1deg); }
    50% { transform: translate(calc(-50% - 1px), calc(-50% + 2px)) rotate(-1deg); }
    70% { transform: translate(calc(-50% + 3px), calc(-50% + 1px)) rotate(-1deg); }
    60% { transform: translate(calc(-50% - 3px), calc(-50% + 1px)) rotate(0deg); }
    80% { transform: translate(calc(-50% - 1px), calc(-50% - 1px)) rotate(0deg); }
    90% { transform: translate(calc(-50% + 1px), calc(-50% + 2px)) rotate(1deg); }
    100% { transform: translate(calc(-50% + 1px), calc(-50% -2px)) rotate(0deg); }
}

@media screen and (max-width: 640px) {
    @keyframes screenShake {
        0% { transform: translate(1px, calc(-50% + 1px)) rotate(-1deg); }
        10% { transform: translate(-1px, calc(-50% - 2px)) rotate(0deg); }
        20% { transform: translate(-3px, calc(-50% + 0px)) rotate(1deg); }
        30% { transform: translate(3px, calc(-50% + 2px)) rotate(0deg); }
        40% { transform: translate(1px, calc(-50% - 1px)) rotate(1deg); }
        50% { transform: translate(-1px, calc(-50% + 2px)) rotate(-1deg); }
        70% { transform: translate(3px, calc(-50% + 1px)) rotate(-1deg); }
        60% { transform: translate(-3px, calc(-50% + 1px)) rotate(0deg); }
        80% { transform: translate(-1px, calc(-50% - 1px)) rotate(0deg); }
        90% { transform: translate(1px, calc(-50% + 2px)) rotate(1deg); }
        100% { transform: translate(1px, calc(-50% -2px)) rotate(0deg); }
    }
}

@keyframes screenHandUp {
    0% {
        top: calc(100% + 315px);
        transform: translate(-50%, 0%);
    }
    100% {
        top: calc(50% + 315px);
        transform: translate(-50%, -50%);
    }
}

@keyframes screenHandDown {
    0% {
        top: calc(50% + 315px);
        transform: translate(-50%, -50%);
    }
    100% {
        top: calc(100% + 315px);
        transform: translate(-50%, 0%);
    }
}

@keyframes screenHandUpExit {
    0% {
        top: calc(100% + 315px);
        transform: translate(-50%, 0%);
    }
    100% {
        top: calc(50% + 315px);
        transform: translate(-50%, -50%);
    }
}

@keyframes screenHandDownExit {
    0% {
        top: calc(50% + 315px);
        transform: translate(-50%, -50%);
    }
    100% {
        top: calc(100% + 315px);
        transform: translate(-50%, 0%);
    }
}

@keyframes screenHandShake {
    0% { transform: translate(calc(-50% + 1px), calc(-50% + 1px)) rotate(-1deg); }
    10% { transform: translate(calc(-50% - 1px), calc(-50% - 2px)) rotate(0deg); }
    20% { transform: translate(calc(-50% - 3px), calc(-50% + 0px)) rotate(1deg); }
    30% { transform: translate(calc(-50% + 3px), calc(-50% + 2px)) rotate(0deg); }
    40% { transform: translate(calc(-50% + 1px), calc(-50% - 1px)) rotate(1deg); }
    50% { transform: translate(calc(-50% - 1px), calc(-50% + 2px)) rotate(-1deg); }
    70% { transform: translate(calc(-50% + 3px), calc(-50% + 1px)) rotate(-1deg); }
    60% { transform: translate(calc(-50% - 3px), calc(-50% + 1px)) rotate(0deg); }
    80% { transform: translate(calc(-50% - 1px), calc(-50% - 1px)) rotate(0deg); }
    90% { transform: translate(calc(-50% + 1px), calc(-50% + 2px)) rotate(1deg); }
    100% { transform: translate(calc(-50% + 1px), calc(-50% -2px)) rotate(0deg); }
}

@media screen and (max-width: 640px) {
    @keyframes screenHandUp {
        0% {
            top: calc(100% + 250px);
            transform: translate(0, 0%);
        }
        100% {
            top: calc(50% + 250px);
            transform: translate(0, -50%);
        }
    }

    @keyframes screenHandDown {
        0% {
            top: calc(50% + 250px);
            transform: translate(0, -50%);
        }
        100% {
            top: calc(100% + 250px);
            transform: translate(0, 0%);
        }
    }

    @keyframes screenHandUpExit {
        0% {
            top: calc(100% + 250px);
            transform: translate(0, 0%);
        }
        100% {
            top: calc(50% + 250px);
            transform: translate(0, -50%);
        }
    }

    @keyframes screenHandDownExit {
        0% {
            top: calc(50% + 250px);
            transform: translate(0, -50%);
        }
        100% {
            top: calc(100% + 250px);
            transform: translate(0, 0%);
        }
    }

    @keyframes screenHandShake {
        0% { transform: translate(1px, calc(-50% + 1px)) rotate(-1deg); }
        10% { transform: translate(-1px, calc(-50% - 2px)) rotate(0deg); }
        20% { transform: translate(-3px, calc(-50% + 0px)) rotate(1deg); }
        30% { transform: translate(3px, calc(-50% + 2px)) rotate(0deg); }
        40% { transform: translate(1px, calc(-50% - 1px)) rotate(1deg); }
        50% { transform: translate(-1px, calc(-50% + 2px)) rotate(-1deg); }
        70% { transform: translate(3px, calc(-50% + 1px)) rotate(-1deg); }
        60% { transform: translate(-3px, calc(-50% + 1px)) rotate(0deg); }
        80% { transform: translate(-1px, calc(-50% - 1px)) rotate(0deg); }
        90% { transform: translate(1px, calc(-50% + 2px)) rotate(1deg); }
        100% { transform: translate(1px, calc(-50% -2px)) rotate(0deg); }
    }
}

@keyframes opacityFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes foliage-1 {
    0% {
        top: 100%;
    }
    100% {
        top: calc(100% - 25vw);
    }
}

@keyframes foliage-1Exit {
    0% {
        top: calc(100% - 25vw);
    }
    100% {
        top: 100%;
    }
}

@keyframes foliage-2 {
    0% {
        left: -150%;
    }
    100% {
        left: 0;
    }
}

@keyframes foliage-2Exit {
    0% {
        left: 0;
    }
    100% {
        left: -150%;
    }
}

@media screen and (max-width: 1250px) {
    @keyframes foliage-2 {
        0% {
            left: -100%;
        }
        100% {
            left: -15vw;
        }
    }

    @keyframes foliage-2Exit {
        0% {
            left: -15vw;
        }
        100% {
            left: -100%;
        }
    }
}

@media screen and (max-width: 968px) {
    @keyframes foliage-2 {
        0% {
            left: -100%;
        }
        100% {
            left: -30vw;
        }
    }

    @keyframes foliage-2Exit {
        0% {
            left: -30vw;
        }
        100% {
            left: -100%;
        }
    }
}

@media screen and (max-width: 768px) {
    @keyframes foliage-2 {
        0% {
            left: -120%;
        }
        100% {
            left: -45vw;
        }
    }

    @keyframes foliage-2Exit {
        0% {
            left: -45vw;
        }
        100% {
            left: -120%;
        }
    }
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(-1deg); }
    10% { transform: translate(-1px, -2px) rotate(0deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(1px, 2px) rotate(-1deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    60% { transform: translate(3px, 1px) rotate(0deg); }
    80% { transform: translate(-1px, -1px) rotate(0deg); }
    90% { transform: translate(1px, 2px) rotate(1deg); }
    100% { transform: translate(1px, -2px) rotate(0deg); }
}

@keyframes emailShake {
    0% { transform: rotate(-10deg); }
    10% { transform: rotate(0deg); }
    30% { transform: rotate(0deg); }
    40% { transform: rotate(10deg); }
    50% { transform: rotate(-10deg); }
    70% { transform: rotate(-10deg); }
    20% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    80% { transform: rotate(0deg); }
    90% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}

@keyframes flickerOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes aboutEntry {
    0% {
        top: 100%;
    }
    100% {
        top: 0;
    }
}

@keyframes popupBackgroundEntry {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes popupBackgroundExit {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes popupEntry {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes popupExit {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
}