.arrow0 {
    background-image: url("../img/arrow0.svg");
    background-size: cover;
}

.arrow1 {
    background-image: url("../img/arrow1.svg");
    background-size: cover;
}

.arrow2 {
    background-image: url("../img/arrow2.svg");
    background-size: cover;
}

.arrow3 {
    background-image: url("../img/arrow3.svg");
    background-size: cover;
}

.arrowsize {
    width: 4.2vw;
    height: 4.2vw;
}

.entering {
    animation-name: enterAnimation;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

@keyframes enterAnimation {
    0% {
        transform: scale(1);
        border-radius: 0px;
    }

    25% {
        transform: scale(1.5);
        filter: invert(23%) sepia(11%) saturate(4889%) hue-rotate(115deg) brightness(95%) contrast(104%);
    }

    50% {
        transform: scale(2);
        border-radius: 100%;
        filter: invert(44%) sepia(91%) saturate(3801%) hue-rotate(135deg) brightness(92%) contrast(102%);
    }

    75% {
        transform: scale(1.5);
        filter: invert(23%) sepia(11%) saturate(4889%) hue-rotate(115deg) brightness(95%) contrast(104%);
    }

    100% {
        transform: scale(1);
        border-radius: 0px;
    }
}

.entering {
    animation-name: enterAnimation;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

@keyframes enterAnimation {
    0% {
        transform: scale(1);
        border-radius: 0px;
    }

    25% {
        transform: scale(1.5);
        filter: invert(23%) sepia(11%) saturate(4889%) hue-rotate(115deg) brightness(95%) contrast(104%);
    }

    50% {
        transform: scale(2);
        border-radius: 100%;
        filter: invert(44%) sepia(91%) saturate(3801%) hue-rotate(135deg) brightness(92%) contrast(102%);
    }

    75% {
        transform: scale(1.5);
        filter: invert(23%) sepia(11%) saturate(4889%) hue-rotate(115deg) brightness(95%) contrast(104%);
    }

    100% {
        transform: scale(1);
        border-radius: 0px;
    }
}

.leaving {
    animation-name: leaveAnimation;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

@keyframes leaveAnimation {
    0% {
        transform: scale(1) rotate(180deg);
        border-radius: 0px;
    }

    25% {
        transform: scale(1.5) rotate(180deg);
        filter: invert(12%) sepia(58%) saturate(4933%) hue-rotate(350deg) brightness(80%) contrast(87%);
    }

    50% {
        transform: scale(2) rotate(180deg);
        border-radius: 100%;
        filter: invert(18%) sepia(75%) saturate(1692%) hue-rotate(335deg) brightness(120%) contrast(98%);
    }

    75% {
        transform: scale(1.5) rotate(180deg);
        filter: invert(12%) sepia(58%) saturate(4933%) hue-rotate(350deg) brightness(80%) contrast(87%);
    }

    100% {
        transform: scale(1) rotate(180deg);
        border-radius: 0px;
    }
}