body{
    margin: 0;
    background-color: black;
}

#supinspace-app {
    width: 100%;
    height: 100%;
    border: 0;
    position: absolute;
    background-color: black;

    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#supinspace-app #ui, 
#supinspace-app #canvas-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

#supinspace-app #ui {
    z-index: 10; 
    pointer-events: none;
}

#supinspace-app #canvas-container {
    z-index: 1;
}

/* UI */
#supinspace-app #ui > div{
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Score UI*/
#supinspace-app #ui #score {
    width: auto;
    height: auto;
    right: 10px; 
    bottom: 10px; 
    color: white; 
}

/* Loader UI*/
#supinspace-app #ui #loader {
}

#supinspace-app #ui #loader .label{
    left: 50%;
    top: 20%;
    width: 50%;
    margin-left: -25%;
    color: white;
    font-size: 80px;
    text-align: center;
    position: absolute;
}

#supinspace-app #ui #loader .bar,
#supinspace-app #ui #loader .bar-hider{
    width: 100%;
    height: 30%;
    top: 40%;
    position: absolute;
}
#supinspace-app #ui #loader .bar{
    /* red to green radient width orange fallback */
    background-color: orange;    
    background: -webkit-linear-gradient(left, #FF3700 , #26FF00);
    background: -o-linear-gradient(bottom right, #FF3700, #26FF00);
    background: -moz-linear-gradient(bottom right, #FF3700, #26FF00);
    background: linear-gradient(to right, #FF3700 , #26FF00);
}

#supinspace-app #ui #loader .bar-hider{
    background-color: black;
    right: 0;
    width: 100%;
}

/* GameOver UI*/
#supinspace-app #ui #game-over {
    opacity: 0;
    background-color: black;

    -webkit-transition: opacity 5s;
    transition: opacity 5s;
}

#supinspace-app #ui #game-over.show{
    opacity: 1;
}

#supinspace-app #ui #game-over p{
    color: white;
    text-align: center;
    font-size: 7vw; // BIG
    margin: 0;
    font-weight: bold;
    letter-spacing: 5px;

    -webkit-transition: margin-top 5s;
    transition: margin-top 5s;
}

#supinspace-app #ui #game-over.show p{
    margin-top: 20%;
}

/* PAUSE MENU */
#supinspace-app #ui #pauseMenu {
    width: 50%;
    left: 25%;
    top: -100%;

    color: white;

    -webkit-transition: top 0.5s;
    transition: top 0.5s;
}

#supinspace-app #ui #pauseMenu h2 {
    text-align: center;
    font-size: 3vw; // medium
}

#supinspace-app #ui #pauseMenu.show {
    top: 0;
}
#supinspace-app #ui #pauseMenu .main {
    z-index: 20;
    pointer-events: auto;
    position: absolute;

    top: 20%;
}

#supinspace-app #ui #pauseMenu .main .close-button {
    display: none;
}

/* Main Menu */
#supinspace-app #ui #main-menu {
    color: white;
    text-align: center;
    pointer-events: auto;
}

#supinspace-app #ui #main-menu h1 {
    font-size: 5vw;
}

#supinspace-app #ui #main-menu span {
    font-size: 3vw;
    cursor: pointer;
}