.bg-cartoon-foods {
    background: url(images/foods-with-gap.jpg); 
    background-size: cover;
    background-position: center; 
    padding: 200px 10px; 
}

.bg-cartoon-foods span{
    padding: 10px 20px;
    display: inline-block;
    border-radius: 10px;
}
body {
    background-color: rgb(255, 213, 168);
}

#lastAnswerRow {
    color: rgb(204, 13, 179);
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}
#lastAnswerFoodA {
    color:rgb(108, 195, 213);
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-size: 20px;
}
#lastAnswerFoodB {
    color:rgb(241, 67, 96);
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-size: 20px;
}

#lastAnswerNutrient {
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-style: italic;
    font-size: 14px;
    color: rgb(255, 120, 81);
}
p#lastAnswerFoodAValue {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
}

p#lastAnswerFoodBValue {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
}

#nutrient {
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-weight: lighter;
    font-size: 35px;
}
.AnswerPortion {
    color: rgb(86, 204, 157);
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: bold;
}

button#foodA {
   font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-size: 12px; 
    font-style: italic;
}

button#foodB {
   font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-size: 12px;
    font-style: italic;
}

.display-4 {
   font-family: 'Montserrat', sans-serif;
    font-size: 45px;    
}

#data-link {
    font-family: 'Montserrat', sans-serif;
}


@media(max-width: 700px){
    .bg-cartoon-foods {
        background: url(images/foods.jpg);
        padding: 150px 10px;
        background-position: center;
        
    }
    
    .app-container {
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden;
    }
}