html{
    min-height: 100%;
}
p { text-transform: capitalize; }
body{
    width: 100%;
    height:100%;
    background: rgb(159,159,159);
    background: -webkit-linear-gradient(top, rgba(159,159,159,0) 0%, rgba(244,244,244,0.7819502801120448) 9%, rgba(255,145,0,1));
}
#searchBar{
    padding-top: 5%;
    padding-right: 10%;
    padding-left: 20%;  
}
#addBar{
    padding-left: 25%;
    padding-top: 15%;
    padding-right: 10%;
}
#results{
    padding-top: 5%;
    padding-right: 30%;
    padding-left: 30%;
}
#allResults{
    padding-top: 5%;
    padding-left: 15%;
    padding-right: 10%;
}
#cardResults{
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 10%;
}
#inputSearch{
    margin: 0;
}
#inputSubmit{
    margin: 0;
}
#thanks{
    margin-top: 10%;
}
#imgExpensive {
    border-radius:4%;
    max-width:100%;
    height:auto;
}
#imgCheap{
    border-radius: 4%;
    max-width:100%;
    height:auto;
}

#titleBar{
    padding-top: 5%;
    padding-right: 10%;
    padding-left: 18%;  
    font-size: larger;
}
#suggestBar{
    font-size: medium;
    font-weight: 500;
}
#tut{
    padding-left:3%;
    padding-top:3%
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;

    }
@media(min-width:480px){
        body{
            background: rgb(159,159,159);
            background: -webkit-linear-gradient(top, rgba(159,159,159,0) 0%, rgba(244,244,244,0.7819502801120448) 9%, rgba(255,145,0,1));
    }
    #imgExpensive{
        width: 50%;
    }
    #imgCheap{
        width: 50%;
    }
    #searchBar{
        padding-left: 30%;
        padding-right: 30%;
    }
    #inputSearch{
        width: 85%;
    }
    #addBar{
    padding-left: 35%;
    }
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    
        }
}