html, body {
    height: 100%;
    width: 100%;
}
body {
    margin: 0;
    font-family: open_sansbold, Calibri, Arial, Helvetica, sans-serif;
    -webkit-perspective: 300;
    -webkit-user-select: none;
}
i {
    display: none;
    position: relative;
    top: 50%;
    text-align: center;
    font-size: 10px;
    font-style: normal;
}
p {
    position: absolute;
    margin: 8px 0 0 8px;
    font-size: 10px;
}
canvas {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    margin-left: -110px;
    margin-top: -110px;
    -webkit-box-reflect: below 0 -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.5) 100%);
    -webkit-transform: rotateY(45deg);
}


body.a {
    background-image: -webkit-radial-gradient(circle cover, rgba(127,127,127,1), rgba(30,30,30,1));
    color: rgba(43,43,43,1);
}
body.a i {
    color: rgba(43,43,43,1);
}
body.a p {
    color: rgba(136,136,136,1);
}

body.b {
    background-image: -webkit-radial-gradient(circle cover, rgba(90,0,0,1), rgba(30,0,0,1));
}
body.b i {
    color: rgba(255,255,255,0.3);
}
body.b p {
    color: rgba(255,255,255,0.4);
}

body.c {
    background-color: rgba(0,0,0,1);
}
body.c i {
    color: rgba(255,255,255,0.8);
}
body.c p {
    color: rgba(255,255,255,0.8);
}