/* html, */
/* body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: sans-serif;
    font-size: 20px;
    color: #000;
    text-align: center;
    -webkit-font-smoothing: subpixel-antialiased;
} */

/* p {
    margin: 0;
    font-size: 12px;
} */

canvas {
    border: 1px solid black;
}

.holder {
    position: relative;
    width: 100%;
    /* height: 100%; */
    background-color: #f9f9f9;
}

.holder:before {
    /* content: attr(data-title); */
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    visibility: visible;
}

.holder:after {
    /* content: 'click to activate'; */
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    visibility: visible;
}

#content {
    text-align: center;
    visibility: visible;
}
    /* 
    body.active .holder:before,
    body.active .holder:after {
        visibility: visible;
    }

    body.active #content {
        visibility: visible;
    } */
.hideit{
    visibility: hidden;
}