@keyframes lanim1 {
    0% {
        transform: translate(0);
    }
    100% {
        transform: translate(1vw);
        width: 11vw;
        color: #6a8cd6;
    }
}

@keyframes lanim2 {
    0% {
        transform: translate(1vw);
        width: 11vw;
        color: #6a8cd6;
    }
    100% {
        transform: translate(0);
    }
}

@keyframes planim1 {
    0% {
        transform: translate(0);
    }
    100% {
        transform: translate(5vw);
        width: 85vw;
        color: #6a8cd6;
    }
}

@keyframes planim2 {
    0% {
        transform: translate(5vw);
        width: 85vw;
        color: #6a8cd6;
    }
    100% {
        transform: translate(0);
    }
}

.navigation a {
    animation: lanim2 0.2s linear alternate forwards;
}

.navigation a:hover {
    animation: lanim1 0.2s linear alternate forwards;
}

@media screen and (max-width: 500px) {
    .navigation a {
        animation: planim2 0.2s linear alternate forwards;
    }
    .navigation a:hover {
        animation: planim1 0.2s linear alternate forwards;
    }
}