mandelbrot.css

body {
    font-family: Calibri, sans-serif;
    font-size: 10pt;
    margin: 0px;
}
canvas {
    position: absolute;
    top: 0;
    left: 0;
}

canvas#scaled {
    z-index: 0;
}

canvas#canvas {
    z-index: 1;
}
canvas#progress {
    z-index: 2;
}

* {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.toolbar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 3;
    font-size: 0;
    padding: 8px;
}

.toolbar-hidden button {
    opacity: 0.0;
}

button {
    font-size: 18pt;
    margin: 4px;
    word-spacing: -2px;
    padding: 0px 4px 2px 4px;
    opacity: 0.50;
    font-weight: bold;
    border-radius: 2px;
}
button:hover {
    opacity: 0.85;
}

#about {
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.75);
    border: 2px solid rgba(255,255,255,0.75);
    padding: 8px;
    border-radius: 8px;
    display: none;
}

#close-about-button {
    float: right;
}

p {
    /* padding: 0px; */
    /* margin: 0px; */
}

.notification {
    font-size: 38pt;
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    font-weight: bold;
    opacity: 0.75;
    color: white;
    pointer-events: none;
}

.perf-widget {
    width: 400px;
    height: 150px;
    font-size: 8pt;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
    background: rgba(0,0,0,0.50);
    color: white;
    display: none;
}

.perf-log {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: scroll;
    z-index: 4;
}

.perf-set-button {
    position: absolute;
    top: 0;
    right: 16px;
    z-index: 5;
    font-size: 12pt;
}