body,html{background-color:#080023}*{padding:0;margin:0;box-sizing:border-box;color:#d0d0d0}.play{display:flex;flex-direction:column;justify-content:center;align-items:center;height:80vh}.play .play-text{font-size:6vw;margin-bottom:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(90deg,#004fe1,#22d9f9,#03e5fe);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-moz-text-fill-color:transparent;-ms-text-fill-color:transparent;-o-text-fill-color:transparent}.play .btn{margin:10px 0;display:flex;justify-content:center;align-items:center}.play .btn:hover p{color:#fff}.play .btn p{transition:.5s;margin:0 10px;color:#07a965}@media screen and (max-width:500px){.play .play-text .btn{width:100px;font-size:20px}}.history .title{margin:20px}.history .score,.history .title{text-align:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.history .score{font-size:18px}.history table{width:40%;border-collapse:collapse;margin:auto;box-shadow:0 0 5px #fff}.history table th{background-color:#003662;font-size:20px}.history table td,.history table th{border:1px solid #fff;padding:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.history table td.winner{font-weight:700}.history table tr.user{background-color:#064f32}.history table tr.computer{background-color:#620000}.history table tr.draw{background-color:#626200}nav{background-color:#03335a;display:flex;justify-content:space-between;padding:0 20px}nav .logo{font-size:1.5rem;text-decoration:none;display:flex;align-items:center}nav .logo .title{color:gold}nav .links-div{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}nav .links-div .menu{cursor:pointer}nav .links-div .links{display:flex;align-items:center;font-size:1.2rem}nav .links-div .links a{color:#fff;margin:0 10px;text-decoration:none;transition:1s;font-weight:700;font-family:sans-serif}nav .links-div .links a.active,nav .links-div .links a:hover{color:#00ff8c}nav .links-div .links.responsive{position:absolute;top:130%;right:-30%;flex-direction:column;background-color:#03335a;padding:20px;border-radius:5px;z-index:2000;box-shadow:0 0 5px #fff;transform-origin:top;transform:scaleY(0);transition:.5s}nav .links-div .links.responsive a{margin:10px 0}nav .links-div .links.active{transform:scaleY(1)}.header{text-align:center;margin:15px 30px;font-family:Courier New,Courier,monospace;display:flex;justify-content:space-between;align-items:center}.header .user{color:aqua}.header .opponent{color:#f0f}.board{position:relative}.board .row{flex-direction:row;flex-wrap:wrap;align-content:center}.board .cell,.board .row{display:flex;justify-content:center;align-items:center}.board .cell{background-color:#0d054f;border:1px solid #fff;margin:1px;border-radius:5px;transition:.5s}.board .cell:not(.disabled):hover{cursor:pointer;background-color:#0a388e}.board .cell.user{color:aqua}.board .cell.opponent{color:#f0f}.board .cell-size-3{width:150px;height:150px;font-size:100px}.board .cell-size-4{width:140px;height:140px;font-size:90px}.board .cell-size-5{width:115px;height:115px;font-size:80px}.board .cell-size-6{width:100px;height:100px;font-size:70px}@media screen and (max-width:700px){.board .cell-size-6{width:80px;height:80px;font-size:60px}}@media screen and (max-width:600px){.board .cell-size-4{width:100px;height:100px;font-size:50px}.board .cell-size-5{width:90px;height:90px;font-size:40px}}@media screen and (max-width:500px){.board .cell-size-3{width:100px;height:100px;font-size:50px}.board .cell-size-5{width:70px;height:70px;font-size:30px}.board .cell-size-6{width:60px;height:60px;font-size:30px}}@media screen and (max-width:450px){.board .cell-size-4{width:80px;height:80px;font-size:40px}.board .cell-size-5{width:60px;height:60px;font-size:30px}.board .cell-size-6{width:50px;height:50px;font-size:20px}}@media screen and (max-width:350px){.info-value .play-button{width:80px;font-size:15px}.board .cell-size-3{width:80px;height:80px;font-size:40px}.board .cell-size-4{width:60px;height:60px;font-size:30px}.board .cell-size-6{width:40px;height:40px;font-size:20px}}.result-popup{position:fixed;display:flex;flex-direction:column;justify-content:center;align-items:center;top:10px;left:50%;transform:translateX(-50%);padding:30px 150px;border-radius:5px;box-shadow:0 0 5px #fff;z-index:100;font-size:30px;background-color:#2a0764;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;text-shadow:0 0 1px #000}.result-popup button{margin-top:30px}.result-popup.draw .text{color:#ff0}.result-popup.user .text{color:#01c1c5}.result-popup.computer .text{color:red}@media screen and (max-width:1200px){.result-popup{padding:30px 100px;font-size:25px}}@media screen and (max-width:1000px){.result-popup{padding:25px 50px;font-size:20px}}@media screen and (max-width:900px){.result-popup{top:60px}}@media screen and (max-width:400px){.result-popup{padding:20px 30px;font-size:15px}.result-popup button{margin-top:20px;font-size:20px;width:150px}}#popup{position:fixed;display:flex;flex-direction:column;justify-content:center;align-items:center;top:10px;left:50%;transform:translateX(-50%);padding:30px 150px;border-radius:5px;box-shadow:0 0 5px #fff;z-index:100;background-color:#2a0764}#popup .text{font-size:30px;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;text-shadow:0 0 1px #000}@media screen and (max-width:1200px){#popup{padding:30px 100px;font-size:25px}}@media screen and (max-width:1000px){#popup{padding:25px 50px;font-size:20px}}@media screen and (max-width:900px){#popup{top:60px}}@media screen and (max-width:400px){#popup{padding:20px 30px;font-size:15px}#popup button{margin-top:20px;font-size:20px;width:150px}}#confirm-popup{position:fixed;display:flex;flex-direction:column;justify-content:center;align-items:center;top:10px;left:50%;transform:translateX(-50%);padding:30px 150px;border-radius:5px;box-shadow:0 0 5px #fff;z-index:100;background-color:#2a0764}#confirm-popup .text{font-size:30px;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;text-shadow:0 0 1px #000}#confirm-popup .options{margin-top:30px;display:flex;justify-content:space-between}#confirm-popup .options button{margin:0 10px}@media screen and (max-width:1200px){#confirm-popup{padding:30px 100px;font-size:25px}}@media screen and (max-width:1000px){#confirm-popup{padding:25px 50px;font-size:20px}}@media screen and (max-width:900px){#confirm-popup{top:60px}}@media screen and (max-width:400px){#confirm-popup{padding:20px 30px;font-size:15px}#confirm-popup button{margin-top:20px;font-size:20px;width:150px}}#room-join{height:70vh}#room-join,#room-join .form{display:flex;flex-direction:column;align-items:center;justify-content:center}#room-join .form{width:350px;padding:20px;border-radius:10px;background-color:#012152;box-shadow:0 0 10px 0 hsla(0,0%,46%,.969);margin:20px 0}#room-join .form .text{color:#fff;font-size:2rem;margin-bottom:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}#room-join .form input{width:100%;border-radius:5px;border:none;padding:10px;margin-bottom:10px;font-size:1.2rem;background-color:#04419d;color:aqua}#room-join .form button{font-size:1.2rem}#waiting{display:flex;flex-direction:column;align-items:center;justify-content:center;height:70vh}#waiting .heading-text{color:#fff;font-size:2rem;margin-bottom:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}#waiting .text{color:hsla(0,0%,100%,.6);font-size:1.2rem;margin-bottom:5px;font-family:monospace}#waiting .id{color:aqua;font-size:1.5rem;margin-bottom:10px;font-family:Arial,Helvetica,sans-serif;background-color:#012150;padding:10px;border-radius:5px}#waiting .share button{font-size:1.2rem;padding:5px 20px;margin:5px 10px}#request-waiting{display:flex;flex-direction:column;align-items:center;justify-content:center;height:70vh}#request-waiting .heading-text{color:#fff;font-size:2rem;margin-bottom:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}#request-waiting button{font-size:1.2rem;padding:5px 20px;margin:5px 10px}.btn{font-size:25px;display:inline-block;background-color:transparent;padding:10px 25px;border-radius:5px;cursor:pointer;transition:.5s;font-weight:700;text-shadow:0 0 2px #000;text-decoration:none;text-align:center;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif}.green{color:#07a965;border:3px solid #07a965}.green:hover{background-color:#07a965;border-color:#07a965;color:#fff}.red{color:#cb1445;border:3px solid #cb1445}.red:hover{background-color:#cb1445;border-color:#cb1445;color:#fff}.blue{color:#0283bf;border:3px solid #0283bf}.blue:hover{background-color:#0283bf;border-color:#0283bf;color:#fff}