.tic-tac-toe-art{position:absolute;inset:55px 22% 60px;border:4px solid var(--black);background:var(--lilac-light);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);z-index:1}.tic-tac-toe-art:before,.tic-tac-toe-art:after{content:"";position:absolute;background:var(--black)}.tic-tac-toe-art:before{width:4px;height:100%;left:33.33%;box-shadow:calc(100% - 4px) 0 0 var(--black)}.tic-tac-toe-art:after{height:4px;width:100%;top:33.33%;box-shadow:0 calc(100% - 4px) 0 var(--black)}.tic-tac-toe-art span{position:absolute;font:700 42px Outfit,sans-serif;z-index:2}.tic-tac-toe-art .x{color:var(--black)}.tic-tac-toe-art .o{color:var(--lilac-dark)}.x-one{left:10%;top:3%}.o-one{left:42%;top:3%}.x-two{left:73%;top:35%}.o-two{left:9%;top:68%}.x-three{left:42%;top:68%}
.tic-tac-toe-grid{position:absolute;inset:62px 24% 70px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);z-index:1}.tic-tac-toe-grid i{display:block}
.tic-tac-toe-grid i{border-right:3px solid var(--black);border-bottom:3px solid var(--black)}.tic-tac-toe-grid i:nth-child(3n){border-right:0}.tic-tac-toe-grid i:nth-last-child(-n+3){border-bottom:0}
.tic-tac-toe-grid{position:relative}.tic-tac-toe-grid .grid-x{display:grid;place-items:center;color:var(--black);font:700 42px Outfit,sans-serif;line-height:1}.tic-tac-toe-grid:after{content:"";position:absolute;left:8%;top:49%;width:84%;height:4px;background:var(--lilac-dark);transform:rotate(45deg);transform-origin:center;border-radius:4px;z-index:3}
.tic-tac-toe-grid:after{display:none}
.notebook-card:hover .tic-tac-toe-grid:after{display:block;left:8%;top:49%;width:0;height:4px;background:var(--lilac-dark);transform:rotate(45deg);transform-origin:left center;animation:tic-line-draw .55s ease-out forwards;border-radius:4px;z-index:3}@keyframes tic-line-draw{to{width:84%}}
.notebook-card:hover .tic-tac-toe-grid:after{z-index:5}.tic-tac-toe-grid .grid-x{position:relative;z-index:4}
.tic-tac-toe-grid .winning-line{display:none;position:absolute;left:8%;top:49%;width:84%;height:5px;background:var(--lilac-dark);border-radius:5px;transform:rotate(45deg);transform-origin:left center;z-index:10}.notebook-card:hover .tic-tac-toe-grid .winning-line{display:block;animation:tic-line-overlay .55s ease-out forwards}@keyframes tic-line-overlay{from{width:0}to{width:84%}}
.tic-tac-toe-grid .winning-line{left:6%;top:6%;width:125%;height:5px;transform:rotate(45deg);transform-origin:left center}.notebook-card:hover .tic-tac-toe-grid .winning-line{animation:tic-line-correct .55s ease-out forwards}@keyframes tic-line-correct{from{width:0}to{width:125%}}
.notebook-card:hover .tic-tac-toe-grid:after{display:none}
.tic-tac-toe-grid .winning-line{display:none!important}
.notebook-card:hover .tic-tac-toe-grid:after{display:none!important}.notebook-card:hover .tic-tac-toe-grid .winning-line{display:block!important;left:6%;top:6%;width:125%;height:5px;background:var(--lilac-dark);border-radius:5px;transform:rotate(45deg);transform-origin:left center;z-index:10;animation:tic-line-final .55s ease-out forwards}@keyframes tic-line-final{from{width:0}to{width:125%}}
.tic-tac-toe-grid i:nth-child(n+7){border-bottom:0}
@media(max-width:760px){.notebook-card .tic-tac-toe-grid .winning-line{display:block!important;left:6%;top:6%;width:125%;height:5px;background:var(--lilac-dark);border-radius:5px;transform:rotate(45deg);transform-origin:left center;z-index:10;animation:tic-line-mobile .9s ease-out infinite alternate}@keyframes tic-line-mobile{from{width:0}to{width:125%}}}