*{
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: Google Sans Display,Arial,Helvetica,sans-serif;
}
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/*navbar*/
nav{
    background-color: #ff6f61;
    padding: 10px 5px;
    display: flex;
    flex-direction: row;
}
nav h1{
    margin-right: 10px;
    color: black;
    font-weight: 700;
}
.fa-dumbbell{
    display: flex;
    align-items: center;
    color: black;
    padding: 5px;

}
/*main*/
main{
    flex-grow: 1;
    margin: 20px auto;
    padding: 20px;
    max-width: 600px;
}
.css-form{
    padding: 10px;
    border: 1px solid white;
    border-radius: 8px;
    box-shadow: -3px 9px 8px rgba(0, 0, 0, 0.17);
}
form{
    display: grid;
    grid-template-areas: 
        'a a a b'
        'c c c c'
    ;
    gap: 10px;
}
#add-food{
    grid-area: a;
}
#search{
    border: 1px solid black;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    gap: 10px;
    cursor: pointer;
}
input{
    border: none;
    outline: none;
    flex: 1;
}
#add-calories{
    grid-area: b;
    border: 1px solid black;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
}
#submit{
    grid-area: c;
    padding: 10px;
    width: 100%;
    border: 1px solid black;
    border-radius: 8px;
    transition: transform 0.3s ease-in;
    &:hover{
        transform: scale(1.03);
    }
}
.items-calories{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    width: fit-content;
    margin-top: 20px;
}
#display{
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid white;
    border-radius: 8px;
    box-shadow: -3px 9px 8px rgba(0, 0, 0, 0.17);
}
#display h3{
    text-align: center;
}
#total-calories{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#reset-list{
    padding: 5px;
}

#reset-list button{
    margin-top: 20px;
    padding: 10px;
    padding: 10px;
    border: 1px solid black;
    border-radius: 8px;
    transition: transform 0.3s ease-in;
    &:hover{
        transform: scale(1.03);
    }
}
/*footer*/
footer{
    background-color: #ff6f61;
    color: black;
    font-size: large;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}