html, body { width: 100%; }
body { overflow-x: hidden; color: white; background: black; min-width: 800px; min-height: 640px; font-family: museo-sans }

.board { text-align: center; /*top: 30%; z-index: 2; -webkit-transition-property: all; -webkit-transition-duration: 1s;*/ }

#content, #more {
    text-align: center; position: absolute; width: 100%; top: 10%; z-index: 1; font-weight: bold; color: hsla(20,0%,80%,0.9);

    text-shadow: 0px 1px 0px rgba(255,255,255,0.1), 0px 1px 21px hsla(1095, 60%, 90%, 0.3), 0px 22px 20px hsla(0, 0%, 0%, 1), 0px 8px 10px hsla(0, 0%, 0%, 1);
}

#more {
    top: 100vh; width: 100%; text-align: center; font-weight: bold; background: rgba(0,0,0,0.8); padding: 3vh 0;

    box-shadow: 0 0 56px 50px hsla(0, 0%, 0%, 0.8);
}

#more p {
    font-size: 2.5vh; line-height: 4vh; font-family: Arial; letter-spacing: -1px; font-weight: normal; white-space:pre; color: rgba(255,255,255,0.8); margin-bottom: 4vh; -webkit-user-select: text;

    text-shadow: 0px 0px 4px hsla(0, 0%, 0%, 1), 0px 3px 12px hsla(0, 0%, 0%, 1);
}

#more a { color: rgba(236,64,64,0.6); }
#more a:hover { color: rgba(236,64,64,0.8); }

h1 { color: hsl(80, 51%, 90%); font-size: 12vh; font-weight: bold; margin-bottom: 5vh; }
h2 { color: hsl(80, 61%, 50%); font-size: 4vh; letter-spacing: -1px; margin-bottom: 2vh; }
h3 { font-size: 3vh; text-shadow: 0px 3px 6px hsla(0, 0%, 0%, 1); margin-bottom: 2vh; }
h3.trial { top: 40px; font-weight: 300; }

h3.trial, h2, .loginOptions {
    text-shadow: 0 0 10px hsl(0, 0%, 0%),0 0 40px hsl(0, 0%, 0%),0 0 30px hsl(0, 0%, 0%), 0 15px 16px black;
}

#controlPanel {
    z-index: 1; position: absolute; width: 100%; text-align: center; bottom: 10vh;
    -webkit-transform: translateZ(10px);
    -moz-transform: translateZ(10px);
}

#world { position: absolute; height: 100vh; width: 100%; -webkit-perspective: 1500px; -moz-perspective: 1500px; }

#bg {
    position: absolute; height: 200%; width: 100%; background: black;
    -webkit-transform: translateZ(-6000px);
    -moz-transform: translateZ(-6000px);
}

#box {
    height: 100%; width: 100%; top: 0; left: 0;

    -webkit-transform: translateZ(0px) translateY(-50%) rotateY(0deg) rotateX(-0deg);
    -moz-transform: translateZ(0px) translateY(-50%) rotateY(0deg) rotateX(-0deg);
}

.stage {
    bottom: 90px; width: 100%; position: absolute;

    -webkit-transform: rotateX(130deg) translateY(-60%) scale(0.6);
    -moz-transform: rotateX(130deg) translateY(-60%) scale(0.6);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
}

#floor, #wall {
    position: absolute; height: 100%; width: 100%; top: 0; left: 0;

    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
}

#floor {
    background-image:
        -webkit-radial-gradient(50% 50%, ellipse farthest-corner,
            rgba(0, 0, 0, 0) 30%,
            rgba(0, 0, 0, 0.9) 65%,
            rgba(0, 0, 0, 1) 80%),
            url('../images/floor.6.jpg');
    background-image:
        -moz-radial-gradient(50% 50%, ellipse farthest-corner,
            rgba(0, 0, 0, 0) 30%,
            rgba(0, 0, 0, 0.9) 65%,
            rgba(0, 0, 0, 1) 80%),
            url('../images/floor.6.jpg');
    background-size: 100%, 50%;
    background-position: center bottom;

    -webkit-transform: rotateX(-110deg);
    -moz-transform: rotateX(-110deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
}

#wall {
    background-image:
        -webkit-radial-gradient(50% 75%, circle closest-corner,
            transparent 60%,
            rgba(0, 0, 0, 0.8) 80%),
            -webkit-linear-gradient(rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,1) 100%),
        url('../images/floor.6.jpg');
    background-image:
        -moz-radial-gradient(50% 75%, circle closest-corner,
            transparent 60%,
            rgba(0, 0, 0, 0.8) 80%),
            -moz-linear-gradient(rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,1) 100%),
        url('../images/floor.6.jpg');
    background-color: #000000;
    background-position: center, center, bottom;
    background-size: 100%, 100%, 50%;
}

#controlButton { cursor: pointer; font-size: 6vh; color: rgba(255,255,255,0.6); }

#controlButton:hover { color: rgba(255,255,255,0.8) }

.sample, .linein { display: inline-block; font-family: museo-sans; font-size: 24px; margin: 0 2vh; cursor: pointer; color: rgba(255,255,255,0.6); }
.sample:hover, .sample.ready { color: rgba(255,255,255,0.8) }
.sample.on { color: rgba(255,255,255,0.9); }

.linein { color: rgba(236,64,64,1); cursor: pointer; font-weight: bold }
.linein:hover, .linein.ready { color: rgba(255,128,64,1); }
.linein.on { color: rgba(236,64,64,0.9);
    text-shadow: 0 0 10px red;
    -webkit-animation-name: glow;
    -moz-animation-name: glow;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
}

@-webkit-keyframes glow {
    0% { color: rgba(255,96,96,0.9); }
    100% { color: rgba(166,0,0,0.9); }
}

.social {
    z-index: 12; position: absolute; left: 20px; height: 100px; width: 200px; text-align: left; top: 20px;

    -webkit-transform: translateZ(12px);
    -moz-transform: translateZ(12px);
}

.loginOptions { font-size: 4vh; z-index: 2; }
.loginOptions a { text-decoration: none; }
.loginOptions .fb { color: hsl(221, 54%, 71%); }
.loginOptions .fb:hover { color: hsl(221, 54%, 91%); }

.legal {
    position: fixed; bottom: 2vh; left: 0; width: 100%; text-align: center;
    font-size: 1.6vh; z-index: 12; letter-spacing: .04em; color: hsla(20, 0%, 80%, 0.6);

    text-shadow: 0 0 10px hsl(0, 0%, 0%), 0 0 30px hsl(0, 0%, 0%);
}
.legal a { color: hsl(80, 20%, 78%); text-decoration: none; text-shadow: 0 0 10px hsl(0, 0%, 0%), 0 0 30px hsl(0, 0%, 0%); }
.legal a:hover { color: hsl(80, 30%, 94%); text-decoration: underline; }

.btn, .plus { cursor: pointer }

.uvOverlay1 { height: 100%; width: 100%; position: absolute!important; -webkit-transform: translateZ(10px)!important}

#noSupport { display: none }
#noSupport.active { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); color: white; font-size: 60px; text-align: center; font-weight: bold; z-index: 3243; padding-top: 20px;
    -webkit-animation-name: comeIn;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-direction: alternate;
    -moz-animation-name: comeIn;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: ease-out;
    -webkit-transform: translateZ(10000px);
}

#noSupport p { font-size: 40px; margin: 60px }

@-webkit-keyframes comeIn  {
    0% { -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%)
    }
    100% { -webkit-transform: translateY(0);
        -moz-transform: translateY(0) }
}

@-moz-keyframes comeIn {
    0% { -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%)
    }
    100% { -webkit-transform: translateY(0);
        -moz-transform: translateY(0) }
}