html,


body {
    height: 100%;
}

.bg-blue {
    /* baby blue to fit colour palette of map style */
    background: rgb(167, 218, 250);
}

.map-container {
    /* want the map to fill the container i created for it */
    height:100%
}

.legend {
    /* used the legend properties very similar to one shown in class because it was nice*/
    position: relative;
    background-color: aliceblue;
    bottom: 10;
    right: 10;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px gray;
    min-height: 240px;
    max-width: 80%;
    max-height: 90%;
}

.legend span {
    display: inline-flexbox;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin-right: 5px;
}

.legend-colcircle {
    display: inline-block;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin-right: 5px;
    background-color: var(--legendcolour); /* the colour is a variable that it will fetch later from the legend class*/
}