/*To Fix:
-remove css animation on map modal
-fix zoom in/out buttons in js
-disclaimer
*/





body{
    background-color: lightblue;
    overflow: visible;
}

*{
    scroll-behavior: smooth;
}


#disclaimer {
    background-color: white;
    text-align: center;
    width: auto;
    height: auto;
    float: center;
}


.description {
    border: none;
    padding: none;
    text-align: center;
}



#map {
    height: 400px;
    position: relative;
    float: right;
}



#grid {
    background-color: white;
    padding: none;
    display: grid;
    position: relative;
    float: left;
    overflow-y: auto;
    overflow: scroll;
    height: 800px;
    width: 400px;
}

#grid:hover {
    color: none;
}


@media screen and (min-width: 450px) {
    #grid {
        grid-template-columns: 1fr 1fr;
    }
}




#adventure {
    background-color: #0896D7;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#sakura {
    background-color: #F7BFED;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#metro {
    background-color: #DF8600;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#kimberley {
    background-color: #191C76;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#kelsea {
    background-color: #00B251;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#waterfront {
    background-color: #00EEFF;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#market {
    background-color: #A2A2A2;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#forrest {
    background-color: #0E4E16;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#sunnyside {
    background-color: #F0CE15;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#westisland {
    background-color: #AE9519;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#aurora {
    background-color: #9768EE;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#eastisland {
    background-color: #FF0000;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#heritage {
    background-color: #BD1038;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#rose {
    background-color: #FF00BB;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#airport {
    background-color: black;
    text-align: center;
    color: white;padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#mira {
    background-color: #E5E69E;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#speedway {
    background-color: #79BDE9;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#lavender {
    background-color: #B57EDC;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#savannah {
    background-color: #CFE4A7;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#boreal {
    background-color: #0502AC;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#island {
    background-color: #7FFF5C;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#atoll {
    background-color: #5F3402;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#coast {
    background-color: #748325;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#crystal {
    background-color: #66FFC4;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}




#footer {
    position: fixed;
    bottom: 0;
    z-index: 100;
}