html {
    height: 100%;
}

body {
    background-color: #280a28;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

#canvas, #canvas:focus {                
    background-color: #FFF;
    border: 0;
    outline: none;
    opacity: 0;
}

.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height : 100% !important;
    overflow: auto !important;
}

.start {
    -webkit-animation: start-anim 0.5s;
    animation: start-anim 0.5s;
    opacity: 1 !important;
}

@keyframes start-anim {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes start-anim {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.stop {
    -webkit-animation: stop-anim 0.5s;
    animation: stop-anim 0.5s;
    opacity: 0 !important;
}

@keyframes stop-anim {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@-webkit-keyframes stop-anim {
    from { opacity: 1; }
    to   { opacity: 0; }
}