/*****design for mobile here, section for larger screens below*****/
*{
    box-sizing: border-box;
}

/***fonts and sizes***/
h2, h3, h4, button, input, label{
    font-family: 'Oswald', Sans-Serif;
    text-transform: uppercase; 
    line-height: 1;
}

h2{
    font-size: 4em;
}

h3{
    font-size: 3em;
}

h4{
    font-size: 2em;
}

p, sup{
    font-family: 'Open Sans', Serif;
}

p, ol{
    font-size: 1.7em;
}

.instructions p{
    font-size: 1.5em;
}

input, label, select{
    font-size: 1.5em;
}

input.location, select{
    font-size: 0.8em;
}

.location input[type="text"]{
    width: 70%;
    height: 20%;
}

sup{
    font-size: 0.8em;
}

.instructions b, .subtitle b{
    font-weight: 900;
    font-size: 1.4em;
}

/*center text and remove default padding*/
body{
    margin: 0px auto 20px auto;
    padding: 0;
    background-color: #ffe64e;
    text-align: center;
}

/*need to center legend like this or else centering won't work on firefox*/
legend{
    display: block;
    margin: auto;
}

legend h2{
    margin: 10px; /*reset default margins*/
}

/***form styles***/
/*turn labels into boxes/buttons*/
.multi-choices label{
    text-transform: uppercase;
    display: block;
    margin: auto;
    padding: 5px 5px 5px 25px; /*for some reason it's off center unless this happens*/
    border:1px solid #fff; 
    border-radius: 5px;
    background: #fff;
    cursor:pointer;
    width: 65%;
    color: #000;
}

/*hide checkbox/radio buttons from user but still keep them accesible*/
/*only for food preferences forms*/
.multi-choices input[type="checkbox"]{
    opacity:0.011;
    z-index:100;
}

/*highlight answers selected by user*/
.multi-choices input[type="checkbox"]:checked + label{
    background: #620D7D;
    border:1px solid #620D7D; 
    color: #fff;
}

.multi-choices label:hover{
    transform: scale(1.03); 
    transition-duration: 0.3s;
}

/*style buttons throughout the app */
input[type="submit"], button{
    display: block;
    margin: 5px auto 2px auto;
    width: 70%;
    background-color: #000;
    border: 1px solid #000;
    color: white;
    font-size: 2em;
    border-radius: 20px;
    padding: 10px 0px 12px 7px; /*for some reason, left and topis off center*/
}

input[type="submit"]:hover, button:hover{
    cursor: pointer;
    background-color: #620D7D;
    transform: scale(1.01); 
    transition-duration: 0.3s;
}

fieldset{
    border: 0;
}

/*style input boxes when user is selecting city*/
.location label{
    display: block;
    padding-bottom: 5px;
}

.text-inputs label{
    margin-top: 5px;
}

/*center image*/
.food-choices img, header img{
    display: block;
    margin: auto;
}

.food-choices img{
    max-height: 80%;
    max-width: 80%;
}

header img{
    width: 80%;
    margin-bottom: 20px;
}

/*some form elements need to be hidden by default*/
/*also hide any sections that don't need to be shown*/
.hidden{
    overflow: hidden;
    opacity: 0;   
    max-height: 0;
}

/***colors for each section***/
.title, .instructions{
    background-color: #ffe64e; 
    color: #3b3838;
}

.instructions i{
    display: block;
}

.subtitle{
    background-color: #620D7D;
    color: #fff;
    padding: 30px 20px;
}

.start-button{
    padding: 9px 0px;
}

.next-buttons{
    display: flex;
    justify-content: space-around;
    padding: 9px 0px;
}

.next-buttons button{
    width: 45%;
}

.loading h3{
    padding-top: 5em;
}

/****desktop/larging screen styling****/
@media only screen and (min-width: 900px){
    input[type="submit"], button{
        width: 30%;
    }

    header{
        position: relative;
        margin-bottom: 60px;
    }

    header img{
        float: right;
        width: 40%;
        margin-right: 75px;
    }

    .subtitle{
        background-color: #ffe64e;
        color:#3b3838;
        padding: 0px 0px 0px 70px;
        width: 60%;
    }

    .instructions{
        background-color: #620D7D;
        color: #fff;
        padding: 20px 20px;
        position: relative;
        line-height: 1.5;
        filter: drop-shadow(0 0 0.1rem black);
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
        z-index: 1;
        width: 100%;
    }

    .instructions p{
        width: 33%;
    }

    .food-choices {
        width: 80%;
        margin: 0px auto;
    }

    .location input[type="text"] {
        width: 30%;
    }

    legend{
        width: 80%;
    }
    
}

/*to help image adjust better on larger screens*/
@media only screen and (min-width: 1200px){
    header img{
        width: 35%;
    }
}