main {
    padding: 1rem;
    grid-area: main;
    display: grid;
    grid-template-columns: 5% 290px 3% auto 5%;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
    ". .      . sort    ."
    ". filter . results ."
    ". .      . results ."
    ;
}

.entry {
    width: 100%;
    background-color: white;
    display: grid;
    grid-template-columns:  auto repeat(2, 1fr) 22.5%;
    grid-template-rows: repeat(3, 25%);
    grid-template-areas: 
    "img name name description"
    "img text text text"
    "img rating price address"
    ;
    margin: 0 0 1rem 0 ;
    padding: 1rem 1rem 0 1rem;
    border: 1px grey;
    border-style: solid;
}

.name, .text, .address, .rating, .num_reviews, .description, .price {
    margin-top: 0;
}

.price {
    grid-area: price;
}

.price p, .priceIcon {
    margin: 14% 0 0 0;
}

.priceIcon {
    width: 1.5rem;
    float: left;
}

.address {
    grid-area: address;
    width: auto;
}

.ratingDiv {
    grid-area: rating;
    width: 2rem;
    display: flex;
    height: 2rem;
    margin-top: 25px;
}

.ratingDiv p {
    margin: 15% 0 0 0;
}

.name{
    grid-area: name;
}

.description {
    grid-area: description;
    text-align: right;
}

.img {
    grid-area: img;
    border-style: solid;
    border-width: 1.5px;
    border-color: grey;
    width: 15rem;
    margin: 0 1rem 1rem 0;
}

.text {
    grid-area: text;
}

.num_reviews {
    width: auto;
    margin-bottom: 0;
}

#filter {
    grid-area: filter;
    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: auto min-content ;
    grid-template-areas: 
    "fieldset"
    "button"
    ;
}

#topButton {
    position: fixed;
    display: none;
    margin-top: 2rem;
    padding: 20px;
    border-radius: 50%;
    border-color: grey;
    background-color: grey;
    width: 2rem;
    z-index: 1;
    right: 5%;
    bottom: 5%;
    opacity: 80%;
}

#topButton:hover {
    cursor: pointer;
}

#rouletteButton {
    margin-top: 1rem;
    grid-area: button;
    text-align: center;
    text-decoration: none;
    border: solid 1px grey;
    background-color: rgb(255, 184, 51);
    padding: 1.5rem;
}

#rouletteButton:link, #rouletteButton:visited {
    color: black;
}

#fieldset {
    background-color: white;
    padding: 2rem;
    grid-area: fieldset;
}

input:hover, .labels:hover, select:hover, #formButton:hover, #favoritesButton:hover, #showAllButton:hover {
    cursor: pointer;
}

select {
    width: 100%;
    padding: 12px 20px;
    margin: 1vh 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#formButton, #favoritesButton, #showAllButton {
    margin-top: 1rem;
    width: 50%;
    padding: 12px 20px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#favoritesButton {
    width: 47.5%;
    float: left;
    margin: 0 0.5vh 1rem 0;
}
#showAllButton {
    background-color: rgb(255, 184, 51);
    width: 47.5%;
    float: right;
    margin: 0 0 1rem 0.5vh;
}

#formButton {
    float: right;
}

input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
}

input[type="checkbox"]:checked {
    accent-color: rgb(255, 184, 51);
}

#searchResults {
    grid-area: results;
}

#sort {
    grid-area: sort;
    width: min-content;
    margin-bottom: 0.5rem;
    background-color: white;
}

.locationIcon {
    padding: 1rem 0.5rem 0 0;
    float: left;
    width: 1.3rem;
}

#noResult {
    padding-top: 5rem;
    text-align: center;
    font-size: x-large;
}

.loadImg {
    width: 100px;
    padding-left: 450px;
    border: none;
}

#miniNavList {
    grid-area: menu;
}

@media screen and (max-width: 1200px) {
    main {
        padding: 0;
        grid-template-columns: 5% 290px 3% auto 5%;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
        "menu menu menu menu menu"
        ". .      . sort    ."
        ". filter . results ."
        ". .      . results ."
        ;
    }

    .entry {
        grid-template-columns:  auto repeat(2, 1fr) 22.5%;
        grid-template-rows: repeat(4, 25%);
        grid-template-areas: 
        "img name name description"
        "img text text text"
        "img rating . ."
        ". price address address"
        ;
    }
}
@media screen and (max-width: 1000px) {
    .entry {
        grid-template-columns:  auto auto;
        grid-template-rows: repeat(6, auto);
        grid-template-areas: 
        "img img"
        "img img"
        "name description"
        "text text"
        "price address"
        "rating ."
        ;
    }
}
@media screen and (max-width: 700px) {
    main {
        width: 100%;
        padding: 0;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: 
        "menu menu"
        "filter filter"
        "sort ."
        "results results"
        ;
    }

    #filter {
        position: relative;
        grid-area: filter;
        display: flex;
        flex-direction: column;
    }
    .entry {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        grid-template-columns:  50% 50%;
        grid-template-rows: repeat(6, auto);
        grid-template-areas: 
        "img img"
        "img img"
        "name description"
        "text text"
        "price ."
        "address ."
        "rating ."
        ;
    }
    .name, .text, .price, .address, .ratingDiv {
        margin-left: 1rem;   
    } 

    .text, .description {
        margin-right: 1rem;
    }

    .ratingDiv {
        margin-bottom: 1rem;
    }

    .img {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1rem;
    }
}

@media screen and (max-width: 500px) {
    .entry {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        grid-template-columns:  50% 50%;
        grid-template-rows: repeat(6, auto);
        grid-template-areas: 
        "img img"
        "img img"
        "name description"
        "text text"
        "price ."
        "address ."
        "rating ."
        ;
    }
}