#form{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    margin: 40px;
    padding: 40px;
    border: solid 2px black;
    border-radius: 12px;
    background-color: bisque;
    max-width: fit-content;
    
}
#food-name{
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px;
}
    
#calories{
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px;
}

#calculate-btn{
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px;
    background-color: rgb(63, 243, 123);
}


#calculate-btn:hover{
    background-color: rgb(65, 209, 113);
    transform: scale(1.0);
transition-duration: 200ms;
   
}

#reset-btn{
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px;
    background-color: rgb(63, 243, 123);
}


#reset-btn:hover{
    background-color: rgb(238, 130, 97);
    transform: scale(1.0);
transition-duration: 200ms;
    
}
#h2{
    color: crimson;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 24px;
}
#total-calories{
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}