@import"https://fonts.googleapis.com/css2?family=Roboto&display=swap";:root{font-size:16px;--primary-100:#FF6F61;--primary-200:#dd5147;--primary-300:#8f0010;--accent-100:#5BC0EB;--accent-200:#006288;--text-100:#333333;--text-200:#5c5c5c;--bg-100:#F7F7F7;--bg-200:#ededed;--bg-300:#c4c4c4;background-color:var(--bg-100)}*{margin:0;font-family:Roboto;color:var(--text-100);font-size:1rem}#gameBoard{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}canvas{width:62.5rem;height:37.5rem}#gameCodeContainer{display:flex;justify-content:center;align-content:center;font-size:1.25rem}#gameCode{position:relative;font-size:1.25rem;cursor:pointer;padding:.5rem;margin:.5rem}#gameCode:before{content:attr(data-tooltip);position:absolute;top:-50%;left:50%;white-space:nowrap;transform:translate(-50%);background-color:var(--bg-300);padding:.25rem;font-size:.9rem;font-weight:200;border-radius:.2rem;transition:.2s;opacity:0;color:var(--text-200);font-weight:900}#gameCode:hover:before{opacity:1}#initialScreen{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30rem;height:20rem;display:flex;flex-direction:column;justify-content:space-between;align-items:center;background-color:var(--bg-300);border-radius:.5rem}#tabChange{height:4rem;width:100%;display:flex}#tabChange *{flex-grow:1;height:100%;text-align:center;line-height:4rem;font-size:1.25rem;border-bottom:.15rem solid var(--primary-200);transition:.2s;cursor:pointer}.activeTabStyles{color:var(--bg-100);background-color:var(--primary-200)}#joinGame{border-radius:.5rem 0 0;font-weight:700}#createGame{border-radius:0 .5rem 0 0;font-weight:700}#joinGame:hover,#createGame:hover{background-color:var(--primary-200);color:var(--bg-100);font-weight:700}form#startGame{display:flex;min-width:25rem;height:15rem;flex-direction:column;justify-content:space-evenly}form#startGame label,form#startGame input,form#startGame button{display:block;border:0}form#startGame label{padding:.25rem;font-size:1.5rem;text-align:center}form#startGame input{font-size:2rem;padding:.25rem .5rem;border-radius:.25rem;background-color:var(--bg-100);text-align:center}form#startGame input:focus{outline:none}form#startGame input::-webkit-input-placeholder{opacity:.7;text-align:center}form#startGame button{cursor:pointer;border-radius:.25rem;font-size:1.5rem;padding:.5rem;background-color:var(--primary-200);transition:.3s;font-weight:700;color:var(--bg-200)}form#startGame button:hover{cursor:pointer;background-color:var(--accent-200)}#scoreBoard{display:flex;justify-content:space-between;padding:2rem}#scoreBoard>div{height:8rem;min-width:12rem;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;border-radius:.5rem}#player1{background-color:var(--accent-200)}#player2{background-color:var(--primary-100)}#scoreBoard>div>div{font-size:2rem;color:var(--bg-100);text-align:center}#gameOverScreen{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30rem;height:20rem;display:flex;flex-direction:column;justify-content:space-around;align-items:center;background-color:var(--bg-300);border-radius:.5rem;z-index:2}#gameOverScreen>div{width:100%;display:flex;justify-content:space-evenly}#waiting{min-height:1rem}#gameOverMessage{font-size:3rem;font-weight:700;color:var(--text-100)}#gameOverActions>button{cursor:pointer;min-height:4rem;flex-grow:1;background-color:var(--primary-200);border:0;max-width:10rem;border-radius:.25rem;font-size:1.5rem;transition:.3s;color:var(--bg-100);font-weight:700}#gameOverActions>button:hover{color:var(--bg-100);background-color:var(--accent-200);font-weight:700}@media only screen and (max-width: 900px){canvas{width:40rem;height:24rem}}