*,:after,:before{box-sizing:border-box}:root{--cell-size:150px;--mark-size:calc(var(--cell-size)*.9);--board-width:7;--board-height:7}body{margin:0}.board{place-content:center;place-items:center;width:100vw;height:100vh;display:grid}.board3wide{grid-template-columns:repeat(3,auto)}.board4wide{grid-template-columns:repeat(4,auto)}.board5wide{grid-template-columns:repeat(5,auto)}.board6wide{grid-template-columns:repeat(6,auto)}.board7wide{grid-template-columns:repeat(7,auto)}.board8wide{grid-template-columns:repeat(8,auto)}.board9wide{grid-template-columns:repeat(9,auto)}.board10wide{grid-template-columns:repeat(10,auto)}.cell{width:var(--cell-size);height:var(--cell-size);cursor:pointer;border:1px solid #000;justify-content:center;align-items:center;display:flex;position:relative}.board3wide .cell:nth-child(-n+3){border-top:none}.board3wide .cell:nth-last-child(-n+3){border-bottom:none}.board3wide .cell:nth-child(3n+1){border-left:none}.board3wide .cell:nth-child(3n+3){border-right:none}.board4wide .cell:nth-child(-n+4){border-top:none}.board4wide .cell:nth-last-child(-n+4){border-bottom:none}.board4wide .cell:nth-child(4n+1){border-left:none}.board4wide .cell:nth-child(4n+4){border-right:none}.board5wide .cell:nth-child(-n+5){border-top:none}.board5wide .cell:nth-last-child(-n+5){border-bottom:none}.board5wide .cell:nth-child(5n+1){border-left:none}.board5wide .cell:nth-child(5n+5){border-right:none}.board6wide .cell:nth-child(-n+6){border-top:none}.board6wide .cell:nth-last-child(-n+6){border-bottom:none}.board6wide .cell:nth-child(6n+1){border-left:none}.board6wide .cell:nth-child(6n+6){border-right:none}.board7wide .cell:nth-child(-n+7){border-top:none}.board7wide .cell:nth-last-child(-n+7){border-bottom:none}.board7wide .cell:nth-child(7n+1){border-left:none}.board7wide .cell:nth-child(7n+7){border-right:none}.board8wide .cell:nth-child(-n+8){border-top:none}.board8wide .cell:nth-last-child(-n+8){border-bottom:none}.board8wide .cell:nth-child(8n+1){border-left:none}.board8wide .cell:nth-child(8n+8){border-right:none}.board9wide .cell:nth-child(-n+9){border-top:none}.board9wide .cell:nth-last-child(-n+9){border-bottom:none}.board9wide .cell:nth-child(9n+1){border-left:none}.board9wide .cell:nth-child(9n+9){border-right:none}.board10wide .cell:nth-child(-n+10){border-top:none}.board10wide .cell:nth-last-child(-n+10){border-bottom:none}.board10wide .cell:nth-child(10n+1){border-left:none}.board10wide .cell:nth-child(10n+10){border-right:none}.cell.x,.cell.o{cursor:not-allowed}.cell.x:before,.cell.x:after,.cell.o:before{background-color:#000}.board.x .cell:not(.x):not(.o):hover:before,.board.x .cell:not(.x):not(.o):hover:after,.board.o .cell:not(.x):not(.o):hover:before{background-color:#d3d3d3}.cell.x:before,.cell.x:after,.board.x .cell:not(.x):not(.o):hover:before,.board.x .cell:not(.x):not(.o):hover:after{content:"";width:calc(var(--mark-size)*.15);height:var(--mark-size);position:absolute}.cell.x:before,.board.x .cell:not(.x):not(.o):hover:before{transform:rotate(45deg)}.cell.x:after,.board.x .cell:not(.x):not(.o):hover:after{transform:rotate(-45deg)}.cell.o:before,.cell.o:after,.board.o .cell:not(.x):not(.o):hover:before,.board.o .cell:not(.x):not(.o):hover:after{content:"";border-radius:50%;position:absolute}.cell.o:before,.board.o .cell:not(.x):not(.o):hover:before{width:var(--mark-size);height:var(--mark-size)}.cell.o:after,.board.o .cell:not(.x):not(.o):hover:after{width:calc(var(--mark-size)*.7);height:calc(var(--mark-size)*.7);background-color:#fff}.winning-message{color:#fff;background-color:#000000e6;flex-direction:column;justify-content:center;align-items:center;font-size:5rem;display:none;position:fixed;inset:0}.winning-message button{padding:.23em .5 em;cursor:pointer;background-color:#fff;border:1px solid #000;font-size:3rem}.winning-message button:hover{color:#fff;background-color:#000;border-color:#fff}.winning-message.show{display:flex}#boardWidth,#winLength{margin-top:25px}.label{font-size:1rem}
/*# sourceMappingURL=tictactoe.356fccc6.css.map */