@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap);@import url(https://fonts.googleapis.com/css2?family=VT323&display=swap);*{box-sizing:border-box;margin:0;padding:0}body{background:#222;font-family:VT323,monospace}.tic-tac-toe{margin:40px auto;text-align:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.tic-tac-toe h1{color:#eee;font-size:3em}.tic-tac-toe button{background:transparent;border:2px solid #eee;border-radius:5px;color:#eee;cursor:pointer;font-family:Poppins,sans-serif;font-weight:700;margin:25px;padding:8px 12px;transition:.2s;width:125px}.tic-tac-toe button:hover{background:#49ffea;color:#222}.tic-tac-toe .game{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}.turn{border-radius:10px;display:flex;justify-content:center;margin:15px auto;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.turn .square,.winner .square{border-color:transparent;height:70px;pointer-events:none;width:70px}.turn .square span.x:after,.turn .square span.x:before{background:#222;transition:.2s}.turn .square span.o{border-color:#222;transition:.2s}.turn:after{background:#49ffea;border-radius:9px;content:"";height:100%;position:absolute;top:0;transition:.2s;width:50%;z-index:-1}.turn.left:after{left:0}.turn.left span.o{border-color:#eee}.turn.right span.x:after,.turn.right span.x:before{background:#eee}.turn.right:after{left:50%}.winner{background-color:rgba(0,0,0,.7);display:grid;height:100vh;left:0;place-items:center;position:absolute;top:0;width:100vw}.winner .text{align-items:center;background:#111;border:2px solid #eee;border-radius:10px;display:flex;flex-direction:column;gap:20px;height:300px;justify-content:center;max-width:400px;width:70%}.winner .text h2{color:#eee;font-size:2.5em;margin:15px 0}.winner .win{border:2px solid #f9abff;border-radius:10px;display:flex;gap:15px;margin:0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.square{border:2px solid #baaaaa;border-radius:5px;cursor:pointer;display:grid;height:100px;place-items:center;width:100px}.square span{border:8px solid transparent;border-radius:50%;display:block;height:70%;position:relative;width:70%}.square span.x:after,.square span.x:before{background:#62fffc;border-radius:5px;content:"";height:8px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg);width:150%}.square span.x:after{opacity:1;-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.square span.o{border-color:#fff305}
/*# sourceMappingURL=main.0e6e8e9b.css.map*/