html {
    height: 100%;
    background-color: #000000;
    overflow: initial;
}
body {
    margin: 0;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000000;
    font-family: Helvetica, arial, sans-serif;
    position: relative;
    width: 100%;
}

#application-canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#application-canvas.fill-mode-NONE {
    margin: auto;
}
#application-canvas.fill-mode-KEEP_ASPECT {
    width: 100%;
    height: auto;
    margin: 0;
}
#application-canvas.fill-mode-FILL_WINDOW {
    width: 100%;
    height: 100%;
    margin: 0;
}

canvas:focus {
    outline: none;
}

#rotate-screen {
    position: absolute;
    width: 100% ;
    height: 100% ;
    top: 0;
    z-index: 2147483647;
    background-color: #000000;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../images/platform/rotate_overlay.png');
}

#no-webgl{
    position: relative;
    width: 100% ;
    height: 100% ;
    top: 50%;
    left: 50%;
    z-index: 2147483647;
    color: red;
    text-align: center;
    font-size: 4vw;
    vertical-align: middle;
    -ms-transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, -20%);
}

#brim {
    background-color: #000000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 99999999px;
    z-index: 2147483648;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url('../images/platform/brim.png');
}