body{
    color: white;
    font-size: 15px;
    
    /*Avoid text selection*/
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}
  

main, #mainGameCanvas, #mainBG, #mainFG{
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

#mainBG{
    background-image: url(../images/bg/bgImage01.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: -10000;
}

#mainFG{
    pointer-events: none;
    background-image: url(../images/fg/border.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: -50;
}

main{
    z-index: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

header{
    text-align: center;
}

header #roomcodeDisplayer{
    font-size: 30px;
    font-weight: bold;
    color: rgb(248, 7, 224);
}


content{
    flex: 1;
    pointer-events: none;
}

header, footer{
    display: flex;
    flex-direction: row;
}

header .centerEmpty, footer .centerEmpty{
    flex: 1;
    pointer-events: none;
    font-weight: bold;
}

footer #inputDisplay{
    font-weight: bold;
}

#mainGameCanvas{
    z-index: -100;
}