.navigation {
    display: block;
    padding: 0.1%;
    line-height: 24px;
    background-color: #e1e9d0;
    margin: 0.1% auto;
}

@media screen and (max-width: 400px) {
    .navigation {
        display: flex;
        flex-direction: row;
        line-height: 1.3;
        font-size: 10px;
    }
    .navigation__unorderedList {
        display: flex;
        flex-direction: row;
        padding-left: 5%;
        margin: 0 auto;
    }
}

.navigation__unorderedList {
    display: flex;
    justify-content: space-evenly;
    position: relative;
}

.navigation__element {
    position: relative;
    list-style-type: none;
    font-size: 120%;
    margin: 0.1%;
    left: -2%;
}

.navigation__link {
    text-decoration: none;
    color: rgb(83, 83, 83);
    font-weight: 700,;
}

.link:focus {
    outline: 2px solid  rgb(40, 40, 40);
}

.navigation__link:hover {
    color: rgb(17, 17, 17);
}