body, html {
    margin:0px;
    padding:0px;
    background-color:#1E1E1E;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 21px;
    color:#EFEFEF;
    overflow: hidden;
}

div {
    box-sizing: border-box;
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}

form {
    margin:0;
    padding:0;
}

input {
    box-sizing: border-box;
    border:none;
    width:100%;
    line-height:5vh;
    font-size:4vh;
    margin-bottom:2vh;
    padding: 1vh;
    text-align:center;
}

#welcome {
    position: absolute;
    width:100vw;
    height:100vh;
    background-color:rgba(0, 0, 0, 0.5);    
}

#welcome div {
    width:40vw;
    text-align: center;
}

#welcome button {
    font-size:4vh;
    line-height:5vh;
    padding: 1vh 3vh;
}

.centered {
    position: relative;
    transform: translate(-50%,-50%);
    left:50%;
    top:50%;
}

#stage {
    visibility: hidden;
    position: absolute;
    background-color:#1E1E1E;
    transition: all 0.2s;
}

#channels, #chat {
    visibility: hidden;
    position: absolute;
    background-color:#252526;
    overflow: auto;
    transition: all 0.2s;
}

#menu {
    visibility: hidden;
    position: absolute;
    background-color:#333333;
    transition: all 0.2s;
}

#stage canvas {
    width:100%;
    height:100%;
}

#channels-header, #chat-header {
    position: relative;
    background-color: #007ACC;
    font-size: 1.6vh;
    line-height:2vh;
    font-weight: bold;
    padding: 1vh 2vh;
    border-bottom: 0.2vh solid #05A;
    text-transform: uppercase;
}

#channels-list-item-template {
    display:none;
}

#channels-list {

}

.channel-item {
    position: relative;
    display: block;
    margin-bottom: 1px;
    background-color: #2A2D2E;
    height: 5vh;
    cursor: pointer;
    transition: all 0.2s;
}

.channel-item:hover {
    background-color:#3F3F46
}

.channel-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 5vh;
    height: 5vh;
    padding: 1vh;
    background-color: #391;
}

.channel-name {
    position: absolute;
    left: 6vh;
    font-size: 2vh;
    line-height: 5vh;
}

@media screen and (orientation: landscape) {
    #stage {
        left:0;
        top:0;
        width:80vw;
        height:100vh;
    }
    
    #channels, #chat {
        right:0;
        top:0;
        width:20vw;
        height:80vh;
    }

    #channels-header .button {
        margin-top:1vw;
    }

    #menu {
        right: 0;
        bottom: 0vh;
        width: 20vw;
        height: 20vh;
        padding: 2vh;
    }

    button, .button {
        margin:0 auto 1vh auto;
    }    
}
  
@media screen and (orientation: portrait) {

    #welcome div {
        width:60vw;
    }

    #stage {
        left:0;
        top:5vh;
        height:65vh;
        width:100%;
        background-color:#000;
    }
    
    #channels, #chat {
        left:0px;
        bottom:0;
        width:100vw;
        height:30vh;
    }
    
    #channels-header .button {
        margin-left:4vw;
    }

    #menu {
        left: 0;
        top: 0;
        width: 100vw;
        height: unset;
        padding: 1vh;
        text-align: right;
    }

    button, .button {
        display: inline-block;
        margin: 0 1vh 0 0;
    }
}

button, .button {    
    border:none;
    color: #2A2D2E;
    background-color: rgb(223, 219, 25);   
    cursor: pointer; 
    font-weight: normal;
    font-size: 2vh;
    line-height:2.5vh;
    padding: 0.5vh 1vh;
    transition: all 0.2s;
}

button:hover, .button:hover {
    background-color:rgb(172, 169, 9);
}

#leave-match-button {
    visibility: hidden;
}