*,:before,:after{box-sizing:border-box;margin:0;padding:0}img{max-width:100%}body{background-color:#000;font-family:Courier New,Courier,monospace;font-size:24px}.hidden{display:none!important}.mode{color:#cdcdcd;z-index:100;background-color:#000;flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex;position:absolute;top:0;bottom:0}h1{margin-bottom:.2em;font-size:60px;font-weight:700}.modeSelect{flex-wrap:wrap;justify-content:center;align-items:center;width:80%;display:flex}.modeSelect input[type=radio]{display:none}.modeSelect #solo:checked~.modeSelectors>label[for=solo],.modeSelect #versus:checked~.modeSelectors>label[for=versus]{background-color:#fff9;border:2px solid #457400}.modeSelect .player[data-player=second]{height:0;transition:height .25s ease-in;overflow:hidden}.modeSelect #versus:checked~.players .player[data-player=second]{height:33px}.modeSelect .modeSelectors{font-size:0}.modeSelect .modeSelectors>label{cursor:pointer;background-color:#fff3;border-radius:10px;padding:5px;font-size:20px;transition:background-color .25s ease-in-out;display:inline-block}.modeSelect .modeSelectors>label:first-of-type{margin-right:1em}.modeSelect .modeSelectors>label:hover{background-color:#fff9}.modeSelect .modeSelectors>label img{height:5em}.modeSelect .players{flex-direction:column;flex:100%;justify-content:center;align-items:center;margin-top:30px;display:flex}.modeSelect .player{margin-bottom:20px}.modeSelect .players label{border-radius:0;font-size:20px}.modeSelect .players input{appearance:none;background-color:#fff9;border:none;outline:none;padding:5px;font-family:inherit;font-size:20px;font-weight:700}.modeSelect button{appearance:none;text-transform:uppercase;cursor:pointer;border:none;border-radius:5px;outline:none;padding:.3em;font-family:inherit;font-size:30px;font-weight:700}.modeSelect button:hover{background-color:#050}.canvas{justify-content:center;align-items:center;width:100%;display:flex;position:absolute;top:0;bottom:0}.pauseOverlay{color:#cdcdcd;z-index:100;background-color:#000c;flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex;position:absolute;top:0;bottom:0}.pauseOverlay h2{margin-bottom:20px}.pauseOverlay .info{text-align:center;width:90%;max-width:900px;line-height:1.5em}.pauseOverlay .info span{color:#adff2f;font-weight:700}.pauseOverlay .info p:last-child,.pauseOverlay .buttons{margin-top:20px}.pauseOverlay button{appearance:none;color:#fff;text-transform:uppercase;cursor:pointer;background-color:#fff3;border:none;outline:none;padding:.5em;font-family:inherit;font-size:16px;font-weight:700;transition:all .25s ease-in-out}.pauseOverlay button:hover{color:#2c2c2c;background-color:#fff9}.gameOver{z-index:100;background-color:#000000e6;justify-content:center;align-items:center;width:100%;display:flex;position:absolute;top:0;bottom:0}.gameOver .finalResult{color:#cdcdcd;flex-wrap:wrap;justify-content:center;align-items:center;width:90%;display:flex}.gameOver h2{text-align:center;text-transform:uppercase;flex:100%;margin-bottom:1em;font-size:36px;font-weight:700}.gameOver .winner{text-align:center;flex:100%;margin-bottom:.5em}.gameOver .winner span{text-transform:uppercase;color:#adff2f;font-weight:700}.gameOver .player{text-align:center;background-color:#4d0101;border:1px solid #333;flex:50%;padding:5px}.gameOver .player .name{margin-bottom:.3em;font-size:28px;font-weight:700}.gameOver .player .score span{font-weight:700}.gameOver .winner[data-won=playerOne]~#playerOne,.gameOver .winner[data-won=playerTwo]~#playerTwo{background-color:#014d12}.gameOver .winner[data-won=draw]~#playerOne,.gameOver .winner[data-won=draw]~#playerTwo{background-color:#000}.gameOver .buttons{text-align:center;flex:100%;margin-top:15px}.gameOver button{appearance:none;color:#fff;text-transform:uppercase;cursor:pointer;background-color:#fff3;border:none;outline:none;padding:.5em;font-family:inherit;font-size:16px;font-weight:700;transition:all .25s ease-in-out}.gameOver button:hover{color:#2c2c2c;background-color:#fff9}