style.css

.searchBox::-webkit-scrollbar{
    width: 0.5625em;
    background-color: lightgray;
    border-radius: 0.3125em;
    padding-right: 0.3125em;
}
.searchBox::-webkit-scrollbar-thumb{
    background-color: grey;
    border-radius: 0.5625em;
}
.searchBox{
    height: 37.5em;
    width: 28.125em;
    border: 0.25em solid black;
    margin: 1.5625em 0em 0em 2.5em;
    float: left;
   
    overflow-y: scroll;
    border-radius:0.625em;
}

.searchBar input[type=text]{
    margin: 0em 0em 0em 2.8125em;
    width: 9.375em;
}
.wluBuildingsItems > p{
    font-size: 0.5625em;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
/*
    WORK ON .FOOTER IN MAKING IT HAVE MULTIPLE PAGES: 
    maybe not a div?
*/
.mapboxgl-popup{
    max-width: 25em;
    font: 0.75em/1.25em 'Helvetica Neue', Arial, Helvetica, sans-serif;
}


#mapBox{
    border: 0.35em solid black;
    border-radius: 0.625em;
    width: 100em;
    height: 50.25em;
    padding-left: 50px;
    margin: 2em 2.5em;
    float: right;
}

#wluBuildingWrapper{
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    position: relative;
}
#wluBuildingsItemsContainer{
    position: relative;
    display: grid;
    right: 1.125em;
    
}

/*
mobile device section

each function counts as a break point
max-width = 0 - 2400 and so on and so forth

1. Make the .search box positioned in the center at the yellow border colour
2. make mapBox change div width when the window is resized
*/

@media screen and (max-width: 2400px) {
    .searchBox, #mapBox{
        border-color: blue;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (max-width: 1733px) {
    .searchBox, #mapBox{
        float: none !important;
        border-color: yellow;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (max-width: 1300px){
    .searchBox, #mapBox{
        float: none !important;
        border-color: red;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (max-width: 900px){
    .searchBox, #mapBox{
        float: none !important;
        border-color: green;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (max-width: 600px){
    .searchBox, #mapBox{
        float: none !important;
        border-color: pink;
        margin-left: auto;
        margin-right: auto;
    }
}