*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
}

.unlocked {
    border: dashed 10px red;
    background: rgba(255, 255, 255, 0.51) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4zjOaXUAAAAGZJREFUOE+ljEEOACEIA92f+f9XaQ822EUgajJJC4xtvu+BPnEXFSBff7Bk5N8yw8pgW2aojLwdRHhy+YOTjMzhiUgGDB6ZjMyiVGTAgeV0rB1wqMusL7iIjrVb0mPtypMMGC7k1geoEhcn0OEM6wAAAABJRU5ErkJggg==) no-repeat bottom right;
}

.container {
    height: 100%;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 50vh;
    font-family: fantasy;
    -webkit-text-stroke: 4vh black;
}

span {
    padding: 10px;
}

.h-m
{
     color: cyan;
}
.h-n
{
     color: darkgray;
}
.h-p
{
     color: red;
}


.unlocked .map > .content {
}