html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: #111;
    overflow: hidden;
}

#map-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#map {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.player-marker {
    position: absolute;
    /* Marker will move by chaning top & left positions. Make a smooth transition */
    transition: top 0.2s linear, left 0.2s linear;
}

.player-marker img {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    border: 1px solid #222;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    image-rendering: pixelated;
    transform: translate(-50%, -50%);
}