.canvas-container {
    width: 1000px; 
    height: 800px;
    justify-content: center;
    border: solid;
    background-color: transparent;
    position: relative;
}

.link {
    color: inherit;
    background: inherit;
    text-decoration: none;
}

.button {
    background: #5d84f7;
    color: white;
}

.button:hover {
    background: grey;
}

.canvas-container > canvas {
    position: absolute;
}

#filter-container {
    display: none;
}

#show-markers {
    display: block;
}

#mobile-zoom {
    display: none;
}

@media only screen and (max-width: 1100px) {
    .canvas-container {
        width: 1100px; 
        height: 800px;
    }

    #mobile-zoom {
        display: block;
    }
}

@media only screen and (max-width: 1000px) {
    .canvas-container {
        width: 1000px; 
        height: 800px;
    }

    #mobile-zoom {
        display: block;
    }
}

@media only screen and (max-width: 800px) {
    .canvas-container {
        width: 800px; 
        height: 800px;
    }

    #mobile-zoom {
        display: block;
    }
}

@media only screen and (max-width: 600px) {
    .canvas-container {
        width: 600px; 
        height: 600px;
    }

    #mobile-zoom {
        display: block;
    }
}

@media only screen and (max-width: 500px) {
    .canvas-container {
        width: 500px; 
        height: 500px;
    }

    #mobile-zoom {
        display: block;
    }
}

@media only screen and (max-width: 400px) {
    .canvas-container {
        width: 400px; 
        height: 400px;
    }

    #mobile-zoom {
        display: block;
    }
}