*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--cell-size: 100px;--mark-size: calc(var(--cell-size) * .8);--clr-lightBlue: #63e9e4;--clr-lightBlueHover: #59d2cd;--clr-orange: #f2b036;--clr-orangeHover: #da9e31;--clr-darkNavy: #1a2a32;--clr-navy: #1f3741;--clr-silver: #a7bec8;--clr-silverHover: #dae7ec}body{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;font-family:Playfair Display,Georgia,Times New Roman,Times,serif;background-color:var(--clr-navy);color:var(--clr-silver)}h1{font-size:48px;text-align:center;margin-bottom:24px}button{font-family:inherit}.display{margin-bottom:48px;font-size:24px}.display span{font-weight:700}.board{display:grid;grid-template-columns:repeat(3,auto)}.cell{position:relative;width:var(--cell-size);height:var(--cell-size);border:2px solid #fff;border-radius:8px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all 1s ease-out}.cell:first-child,.cell:nth-child(2),.cell:nth-child(3){border-top:0}.cell:nth-child(3n + 1){border-left:0}.cell:nth-child(3n + 3){border-right:0}.cell:nth-last-child(1),.cell:nth-last-child(2),.cell:nth-last-child(3){border-bottom:0}.cell.x,.cell.o{position:relative}.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:"";position:absolute;width:calc(var(--mark-size) * .1);height:var(--mark-size);border-radius:4px}.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.x:before,.cell.x:after{background-color:var(--clr-lightBlue)}.board.x .cell:not(.x):not(.o):hover:before,.board.x .cell:not(.x):not(.o):hover:after{background-color:var(--clr-lightBlueHover)}.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:"";position:absolute;border-radius:50%}.cell.o:before{background-color:var(--clr-orange)}.cell.o:after{background-color:var(--clr-navy)}.cell.o:before,.board.o .cell:not(.x):not(.o):hover:before{width:calc(var(--mark-size));height:var(--mark-size)}.cell.o:after,.board.o .cell:not(.x):not(.o):hover:after{width:calc(var(--mark-size) * .8);height:calc(var(--mark-size) * .8)}.board.o .cell:not(.x):not(.o):hover:before{background-color:var(--clr-orangeHover)}.board.o .cell:not(.x):not(.o):hover:after{background-color:var(--clr-navy)}.player-x{color:var(--clr-lightBlue)}.player-o{color:var(--clr-orange)}.winning-msg-box{position:fixed;top:0;left:0;right:0;bottom:0;display:none;flex-direction:column;justify-content:center;align-items:center;background-color:#1f3741e6;font-size:60px;color:#fff}.winning-msg-box.show{display:flex}.restart{display:inline-flex;background-color:var(--clr-silver);padding:10px 16px;border-width:2px;outline:0;font-size:48px;border-radius:4px;margin-top:16px;transition:background-color .25s ease-out}.restart:hover{cursor:pointer;background-color:transparent;color:#fff;border-color:#000}