/* CSS styles for heading and paragraphs */
        h2,
        h3 {
            margin: 10px;
            font-size: 18px;
        }

        h3 {
            font-size: 16px;
        }

        p {
            margin: 10px;
        }

        /**
        * Create a position for the map
        * on the page */
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
        }

        /**
        * Set rules for how the map overlays
        * (information box and legend) will be displayed
         on the page. */
        .map-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            background: rgba(255, 255, 255, 0.8);
            border-style: solid;
            border-width: 1px;
            border-color: rgba(0, 0, 0, 0.2);
            margin-left: 20px;
            font-family: Arial, sans-serif;
            overflow: auto;
            border-radius: 3px;
        }

        #features {
            top: 0;
            height: 100px;
            margin-top: 20px;
            width: 250px;
        }

        #legend {
            padding: 10px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            line-height: 18px;
            height: 180px;
            margin-bottom: 40px;
            width: 150px;
        }

        .legend-key {
            display: inline-block;
            border-radius: 20%;
            width: 10px;
            height: 10px;
            margin-right: 5px;
        }

        .mapboxgl-canvas-container.mapboxgl-interactive,
        .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
            cursor: unset;
        }