:root{
    /*
    | CORES RUFUS
    */
    --ketchup: #e23427;
    --salsa: #1d6640;
    --lapela:#8b8c89;
    --mostarda: #e5af17;
    --tela: #f8f4e3;
    --lente:#2d2d2d;

    /*
    | VARIÁVEIS DE AMBIENTE
    */
    --font-main: 1rem;
    --font-second: 1.5rem;
    --font-third: 2rem;
    --font-tiny: .8rem;
}

#section-navigation{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 15px;
    position: fixed;
    bottom: 0;
    z-index: 9;
}
.contacts-icon{
    background: #00000036;
    padding: 10px 15px;
    border-radius: 10px;
}
.contacts-icon i{
    padding: 10px;
    background: var(--mostarda);
    color: var(--tela);
    border-radius: 100px;
}

#head-navbar{
    background: #2d2d2da8;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

#head-navbar ul{
    display: flex;
    justify-content: center;
    width: 100%;
}

#head-navbar li a{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
}

#head-navbar li{
    border-radius: 10px;
    padding: 5px 20px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width:756px) {
    #section-navigation{
        width: 100dvw;
    }

    #head-navbar{
        width: 99%;
        flex-direction: column;

    }
}