@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
    background-color: rgb(23, 23, 23);
    box-sizing: border-box;
    color: #fff;
    
}





/* navbar-content è il container esterno */
.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: baseline;
    width: 100%;
    align-content: center;
   
   
    
}

.navbar-content {
    width: 100%;
    display: flex;
    gap: 8rem;
    align-items: baseline;
    justify-content: space-evenly;
    background-color: rgb(36, 104, 127);
    border-bottom: 1px solid #fff;
   
    
    
}

/* nav links i figli di navbar e solo i link */
.nav-links {
    display: flex;
    flex-direction:row;
    align-items: baseline;
    gap: 20px;

}



li {
    list-style: none;
    display: inline;
    padding: 8px;
}

a{
    text-decoration: none;
    color: #fff;  
}

#grey {
    color: rgb(161, 159, 159);
}

input::placeholder {
    /* padding: 10px; */
    font-size: 12px;
    color: rgb(64, 63, 63);

}



input[type=text]{
    padding: 7px;
    /* margin: 5px 2px; */
    border: 2px solid #eee;
    border-radius: 5px;
    /* box-shadow: 0 0 15px 4px rgba(49, 199, 226, 0.6); */

}

/* drop down menu */
select {
    -webkit-appearance: none;
    background-color: rgb(36, 104, 127);
    color: rgb(161, 159, 159);
    border-radius: 8px;
    font-size: 15px; 
    appearance: none;
    cursor: pointer;
    outline: 0;
    color: rgb(161, 159, 159);
    border: none;
}

.select-box {
    display: block;
    overflow: hidden;
    z-index: 1;
}

i {
    color: rgb(161, 159, 159);
}




button :disabled{
    background-color: transparent;
    color: #eee;
}

form button {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 12px;
    border: none;
    background-color: rgb(68, 66, 66);
    color: rgb(35, 168, 8);
    border: solid 1px  rgb(6, 159, 62);
    border-radius: 4px;
    font-size: 12px;
    margin: 2px;
}

form button:hover {
    background-color: rgb(21, 94, 6);
    color: rgb(238, 241, 242);


}



button:disabled, 
button[disabled] {
    all: unset;
    background-color: rgb(36, 104, 127);
    color: #666666;
    
}
/* .disabled {
    background-color: rgb(35, 51, 54);
    border: none;
    color: lightgray;
} */


/* .bottom-line {
    background-color:#ffff ;
    width: 100%;
    height: 1px;
} */

.nav-mobile{
    display: none;
}

.mobile-bars {
    display: none;
    
}



@media screen and (max-width: 768px){
    .navbar-content {
        background-color: rgb(36, 104, 127);
       padding-bottom: 10px;
       
    }

    .nav-links {
        display: none;
    }

    .nav-mobile{
        display: block;
       font-size: 12px;
       padding-top: 10px;
       margin: 2px;
    }

    input, button{
        display: none;
    }

    .mobile-bars {
        display: block;
        color: white;
    }

    

}