body {
    background-image: url(img/background.png);
    color: #F4EFE5;
    margin: 0%;
    padding: 0%;
}

navbarown {
    position: absolute;
    margin-top: -56.5%;
    z-index: 1s;
    width: 100%;
}

.ul {
    justify-content: center;
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.8);
}

.menu_lines {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, black, orange, black);
}

.li {
    text-align: center;
}

.li-a {
    display: block;
    color: rgb(255, 255, 255, 0.8);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: bold;
}

.li-a:hover {
    color: white;
    text-decoration: none;
}

.li-a::before {
    content: url(img/left-arrow.png);
    left: -5px;
    margin: 0%;
    color: orange;
    position: relative;
    opacity: 0%;
}

.li-a:hover::before {
    opacity: 100%;
    animation-name: duckl;
    animation-duration: 1s;
}

.li-a::after {
    content: url(img/right-arrow.png);
    right: -5px;
    margin: 0%;
    color: orange;
    position: relative;
    opacity: 0%;
}

.li-a:hover::after {
    animation-name: duckr;
    animation-duration: 1s;
    opacity: 1000%;
}


@media only screen and (max-width: 1920px) {
    .imgsocial {
        width: 8vw;
        margin: 1%;
    }
}

@media only screen and (max-width: 1280px) {
    .imgsocial {
        width: 13vw;
        margin: 1%;
    }

}


@media only screen and (max-width: 1080px) {
    .imgsocial {
        width: 15vw;
        margin: 1%;
    }

}

@keyframes duckl {
    0% {
        left: -30px;
        opacity: 0%;
    }

    100% {
        left: -5px;
        opacity: 100%;
    }
}

@keyframes duckr {
    0% {
        right: -30px;
        opacity: 0%;
    }

    100% {
        right: -5px;
        opacity: 100%;
    }
}