@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@600&family=Fraunces:wght@700;900&display=swap");

:root {
    --font1: "Fraunces", serif;
    --font2: "Barlow", sans-serif;
}

.menuContent a {
    font-size: 17px;
    text-decoration: none;
}

.menuContent a:hover {
    /* background-color: #0056b3; */
    background: transparent;
}

a.boton-desktop:hover {
    background-color: #0056b3;
}

.menuContent a.active {
    background-color: #FF6400;
    color: white;
}

.menuContent .icon {
    display: none;
}

@media screen and (min-width: 0px) and (max-width: 997px) {

    .menuContent a {
        display: none;
    }

    .menuContent a.icon {
        float: right;
        display: block;
        padding: 10px;
    }

    .menuContent .icon:hover {
        background-color: #070537;
    }

    .menuContent .icon:active {
        background-color: #070537;
    }

    .menuContent.responsive {
        position: absolute;
        background-color: #FF6400;
        display: flex;
        flex-direction: column;
        width: 100vw;
        text-align: center;
        left: 0;
        top: 0;
        height: 20vh;
        z-index: 100;
    }

    nav ul {
        flex-direction: column;
    }

    .menuContent.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .menuContent.responsive a {
        float: none;
        display: block;
        text-align: left;
        color: rgb(255, 255, 255);
    }

    .fa-navicon:before,
    .fa-reorder:before,
    .fa-bars:before {
        content: "\f0c9";
        color: white;
    }
}