/** [ GENERAL ] */
html,body{margin:0; padding:0;}
#page{position:absolute; width:100%; height:100%; margin:0; padding:0;}
#game{position:relative; width:500px; height:500px; margin:0 auto 0 auto; box-sizing:border-box;}
.show{display:block;}
.hide{display:none;}

/** [ FOOTER: MESSAGE ] */
footer{position:fixed; bottom:0px; left:0; width:100%; height:0; margin:0; padding:0; z-index:5;}
footer > .container{position:relative; top:50%; left:50%; width:100%; height:300px; transform:translate(-50%,-50%); background-color:grey; padding:20px; box-sizing:border-box; text-align:center;}
footer > .container > h1{position:relative; font-family:Arial; font-size:30px; font-weight:bold; color:white; margin:0 0 10px 0; padding:0; text-align:center;}
footer > .container > button{position:relative; width:300px; height:70px; background-color:white; border:1px solid grey; border-radius:40px; font-family:Arial; font-size:30px; font-weight:bold; opacity:0.8; outline:0;}
footer > .container > button:hover{opacity:1; cursor:default;}

/** [ SECTION: BOARD ] */
.board{position:relative; width:inherit; height:inherit; display:grid; grid-template-columns: auto auto auto; grid-template-rows:auto; grid-gap:10px; box-sizing:border-box; user-select:none;}
.board > div{position:relative; border:1px solid #333; box-sizing:border-box; user-select:none;}
.board > div > h1{position:absolute; width:100%; margin:0; padding:0; text-align:center; top:50%; transform:translateY(-50%); font-family:Arial; font-size:80px; font-weight:bold; user-select:none;}
.board > .p1{color:red;}
.board > .p2{color:blue;}

/** [ SECTION: PLAYER ] */
.player{position:relative; width:100%; height:80px; line-height:78px; text-align:center; vertical-align:middle; box-sizing:border-box; margin-right:auto; margin-left:auto; cursor:move; border:1px solid black;}
#player1{background-color:red; margin-bottom:5px}
#player2{background-color:blue; margin-top:5px;}
.player > div{position:absolute; top:0; left:50%; transform:translateX(-50%); font-family:Arial; font-size:80px; line-height:inherit; font-weight:bold; cursor:move; color:white; user-select:none; z-index:2; border-radius:20px;}
.player > h1{position:absolute; left:10px; color:white;}
#p1,#p2{text-shadow: -1px -1px 2px #000,1px -1px 2px #000,-1px 1px 2px #000,1px 1px 2px #000;}

/** [ SECTION: SCORE ] */
#score{position:relative; width:100%; height:100px; border:1px solid black; margin-bottom:5px; padding:10px; display:grid; grid-template-columns: 50% 50%; text-align:center; box-sizing:border-box;}
#score > div > h2{font-family:Arial; font-size:20px; font-weight:normal; margin:0; padding:0;}
#score > div > h1{font-family:Arial; font-size:50px; font-weight:bold; margin:0; padding:0;}