:root {

    /* menu horizontal */
    /*--menu-backg: rgb(255, 255, 255);*/
    --menu-backg: transparent;
    /* color fondo */

    --menu-texto: rgb(0, 5, 29);
    /* color texto */
    --menu-texto-hov: rgb(255, 255, 255);
    /* color texto hover */

    --menu-backg-hov: #4a6196;
    /* color fondo hover */

    --menu-borde: rgb(0, 5, 29);
    /* color texto borde */
    --menu-borde-tam: 5px;
    /* tamaño borde */

    /* scrollbar */
    --scr-bar-hand: hsl(204, 23%, 91%);
    /* color barra */
    --scr-bar-hand-2: hsl(204, 30%, 43%);
    /* color barra hover */
    --scr-bar-backg: transparent;
    /* color fondo */

    --scr-bar-mar-bot: 5px;
    /* margen bottom scroll */    

}

.cont {
    display: flex;
    align-items: center;
    gap:10px;
    margin-bottom:5px ;
}

.flechas {    
    font-weight: bolder;
    cursor: pointer;
    border-radius: 10px;

    padding: 15px 5px;
    margin: 0px 5px;
}
.flechas:hover {
    background-color: var(--menu-backg-hov);
    
    color: var(--menu-texto-hov);

    -webkit-box-shadow: 0px 4px 1px 0px rgba(0,0,0,0.66);
    -moz-box-shadow: 0px 4px 1px 0px rgba(0,0,0,0.66);
    box-shadow: 0px 4px 1px 0px rgba(0,0,0,0.66);
}

.menu-scroll {
    /*background-color: #333;*/
    text-align: center;
    background: var(--menu-backg);
    overflow: auto;
    white-space: nowrap;
    padding: 5px 0px;
    margin: 0px;

    width: 0;
    animation: separator-width 1.5s ease-out forwards;

}

.menu-scroll ul {
    padding: 0px 0px;
    margin: 0px 0px;
}
.menu-scroll li {
    display: inline-block;
}
.menu-scroll a {
    display: inline-block;
    color: var(--menu-texto);
    text-align: center;
    font-size: 1em;

    text-decoration: none;
    border-radius: 10px;

    padding: 10px 10px;
    margin: 0px 10px;
}

.menu-scroll a:hover {
    background-color: var(--menu-backg-hov);
    
    color: var(--menu-texto-hov);

    -webkit-box-shadow: 0px 4px 1px 0px rgba(0,0,0,0.66);
    -moz-box-shadow: 0px 4px 1px 0px rgba(0,0,0,0.66);
    box-shadow: 0px 4px 1px 0px rgba(0,0,0,0.66);
    /*
    border-bottom: var(--menu-borde-tam) solid var(--menu-borde);
    /*font-weight: bolder;
    font-size: 0.8em;*/
}

/* SCROLL BAR */

/* width */
::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    /*background: #737373;*/
    background: var(--scr-bar-backg);

}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--scr-bar-hand);
    border-radius: 10px;
    margin-top: var(--scr-bar-mar-bot);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--scr-bar-hand-2);
}