#app_title
{
    text-align: center;
    border: 1px solid gainsboro;
    background-image: url("https://images.unsplash.com/photo-1521805103424-d8f8430e8933?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

#content
{
    padding-top: 50px; 
    background-image: url("https://wallpaperaccess.com/full/460951.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    height: 100%;
    padding-bottom: 50px;
}


#app_title_text
{
    margin: 3% 25%;
    background-color: rgba(3, 3, 3, 0.486);
    letter-spacing: 8px;
    word-spacing: 10px;
}


#foods_info
{
    font-size: 15px;
    background-color: rgba(230, 13, 13, 0.466);
    color: white;
    font-weight: 500;
    font-family: sans-serif;
    margin-top: 20px;
}

.main_divs
{
    margin-bottom: 30px;
    text-align: center;
    
}

#form_1
{
    margin-bottom: 30px;
    
}

#form_1 label
{
    margin-right: 3%;
    font-size: 20px;
}

#form_1 label>select, input
{
    font-size: 15px;
}

#form_1>button
{
    padding: 5px 20px;
    font-size: 15px;
    font-weight: 600;
    background-color: rgba(98, 248, 11, 0.911);
    color: white;
    border: 1px solid rgb(214, 214, 214);
}

#form_1>*
{
    font-family: sans-serif;
}

#form_2
{
    display: flex;
    flex-direction: row;
    margin: 2% 2% 2% 15%;
    
}

#form_2>*
{
    margin-right: 20px;
}

#display_things
{
    display: flex;
    flex-direction: row;
}

#display_things>div
{
    border: 1px solid rgba(146, 145, 145, 0.815);
    margin-right: 10px;
    flex: 1;
}


#display_res
{
    display: flex;
    flex-direction: row;
    text-align: center;
}

#display_res>*
{
    flex: 1;
    
}

#user_maintain_calories
{
    width: 250px;
}


.deleteV2, .deleteVl
{
    float: right;
    border-radius: 100px;
    font-size: 10px;
    background-color: rgba(250, 43, 43, 0.904);
    color: white;
}

.class_wrkt_name, .class_cal_brnd, .class_food_calories, .class_food_name
{
    margin-bottom: 12px;
    color: white;
    font-weight: 600;
    background-color: rgba(3, 3, 3, 0.486);
}

.titles
{
    font-size: 20px;
    color: white;
    font-weight: 600;
    background-color: rgba(3, 3, 3, 0.486);
    font-family: sans-serif;
}


#result_btns
{
    display: flex;
}

#result_btns>button
{
    padding: 5px 20px;
    font-size: 15px;
    background-color: rgba(230, 13, 13, 0.842);
    color: white;
    font-weight: 600;
    border: 1px solid gray;
    flex: 1;
    margin-right: 2%;
    margin-left: 2%;

}

input, select
{
    background-color: rgba(3, 3, 3, 0.486);
    color: white;
}

::placeholder
{
    color: white;
}


.main_input_fields>input
{
    margin-bottom: 20px;
}


@media (min-width: 641px) and (max-width: 1170px){

    #form_2
    {
        margin: 2% 2% 2% 11%;
    }

    .main_input_fields> input
    {
        font-size: 12px;
    }

    .titles
    {
        font-size: 14px;
        background-color: rgba(3, 3, 3, 0.7);
       
    }

    #result_btns>button
    {
        font-size: 12px;
    }

    .display_res>h1, h2
    {
        font-size: 14px;
    }

    #form_1 label>select, input
    {
        width: 60%;
    }
   
}

@media (min-width: 240px) and (max-width: 640px){

    #form_2
    {
        margin: 2% 2% 2% 11%;
    }

    .main_input_fields> input
    {
        font-size: 12px;
    }

    .titles
    {
        font-size: 14px;
        background-color: rgba(3, 3, 3, 0.7);
       
    }

    #result_btns>button
    {
        font-size: 12px;
    }

    .display_res>h1, h2
    {
        font-size: 17px;
    }

    #form_1 label
    {
       
        font-size: 14px;
    }

    #form_1 label>select, input
    {
        font-size: 14px;
    }   

    #fitness_goals
    {
        text-align: left;
        margin-left: 3%;
    }

    #form_1 label>select, input
    {
        width: 90%;
    }
}