body {
    margin: 0;
    background-color: #000;
    color: #fff;
    font-family: Monospace;
    font-size: 13px;
    line-height: 24px;
    overscroll-behavior: none;
}

a {
    color: #ff0;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    cursor: pointer;
    text-transform: uppercase;
}

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
    pointer-events: auto;
}

.lil-gui {
    z-index: 2 !important; /* TODO Solve this in HTML */
}

@media all and ( max-width: 640px ) {
    .lil-gui.root { 
	right: 0;
	top: 0;
	max-height: 50%;
	max-width: 80%;
    }
}

#overlay {
    position: absolute;
    font-size: 16px;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(0,0,0,0.7);
}

#overlay button {
    background: transparent;
    border: 0;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 4px;
    color: #ffffff;
    padding: 12px 18px;
    text-transform: uppercase;
    cursor: pointer;
}

#notSupported {
    width: 50%;
    margin: auto;
    background-color: #f00;
    margin-top: 20px;
    padding: 10px;
}

#gbactrls {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    display:none;
}

#joystickctrls{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50%;
    display:none;
}

.joystickctrl-leftstick-container{
    position:absolute;
    bottom:0;
    left:0;
    width:50%;
    height:100%;
    background-color:orange;
    opacity:0.5;
}

.joystickctrl-leftstick{
    position:relative;
    top:0%;
    left:0%;
    background-color:green;
    opacity:0.5;
}

.joystickctrl-jump-container{
    display:none;
    position:absolute;
    bottom:0;
    right:0;
    width:50%;
    height:100%;
}

.joystickctrl-btn-jump{
    position:absolute;
    left:50%;
    top:50%;
    background-color:orange;
    opacity:0.4;
}

.joystickctrl-rightstick-container{
    position:absolute;
    bottom:0;
    right:0;
    width:50%;
    height:100%;
    background-color:pink;
    opacity:0.5;
}

.joystickctrl-rightstick{
    position:relative;
    top:0%;
    right:0%;
    background-color:purple;
    opacity:0.5;
}

#stickLeft{
    width:100%;
    height:100%;
}

#stickRight{
    width:100%;
    height:100%;
}

#Space2{
    width:25%;
    height:25%;
}

.gbactrls-padding{
    padding:25px;
}

.gbactrl-btn{
    display:block;
    position:absolute;
    width:50px;
    height:50px;
    background-color:blue;
    text-align: center;
    line-height:50px;
    user-select: none;
}

.gbactrl-btns-container{
    position:absolute;
    bottom:25px;
    left:25px;
    width:150px;
    height:150px;
}

.gbactrl-jump-container{
    position:absolute;
    bottom:25px;
    right:25px;
    width:150px;
    height:150px;
}

.gbactrl-btn-left{
    top:50px;
    left:0;
}

.gbactrl-btn-right{
    top:50px;
    left:100px;
}

.gbactrl-btn-top{
    top:0px;
    left:50px;
}

.gbactrl-btn-down{
    top:100px;
    left:50px;
}

.gbactrl-btn-jump{
    top:50px;
    left:50px;
}

#debugbox{
    font-family: "Courier New";
    font-size:10px;
    background-color:black;
    color:green;
    display:none;
    position:absolute;
    bottom:200px;
    left:0;
    width:100%;
    padding-left:0;
    height:50px;
    line-height:10px;
}

.debugbox-code-container{
    padding:10px;
}