:root {
    --lilas-nebuloso: rgba(212,198,212,1);
    --rosa-neve: rgba(243,239,239,1);
    --azul-nevoeiro: rgba(199,210,216,1);
    --bege-areia: rgba(226,216,195,1);
    --verde-salvia: rgba(138,163,155,1);

     /* Informaçoes da paleta de cores */
     --primary-color: var(--lilas-nebuloso);
     --secondary-color: var(--verde-salvia);
     --accent-color: var(--bege-areia);
     --background-color: var(--azul-nevoeiro);
     --text-color: var( --rosa-neve);
     --secondary-text-color: var(--verde-salvia);
    
     /*
     --error-color: var(--slate-gray);
     --success-color: var(--light-slate-gray);
     --warning-color: var(--periwinkle);
     --info-color: var(--ivory);
    */

     --font-family: 'Roboto', sans-serif;
     --heading-margin: 0 0 20px;
}

body{
    font-family: var(--font-family);
    background: var(--background-color);
    margin: 0;
    padding: 0;
}


/*              */
/*    TOP-BAR   */
/*              */


.top-bar{
    width: 100%;
    height: 80px;

    display: flex;
    flex-direction: row;

    background-color: var(--secondary-color);
}

.top-bar .branding{
    flex-grow: 4;
    display: flex;

    margin: 5px;

    align-items: center;
    justify-content: start;
} 
.top-bar .branding img{
    width: 80px;
    height: auto;
} 
top-bar .branding h1{
   font: var(--font-family);
   font-weight: 900;
   font-size: 36px;
} 


.top-bar .menu{
    flex-grow: 2;
    display: flex;
    
    margin: 5px;

    align-items: center;
    justify-content: center;
} 

.top-bar .menu-item{
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
} 

.menu .menu-item li {
    margin-right: 20px; 
}

.menu .menu-item li:last-child {
    margin-right: 0; 
}