:root{--x-color: 0, 255, 0;--o-color: 255, 0, 0;--full-color: 230, 230, 20}.app{display:flex;justify-content:center;align-items:center;height:100vh;flex-direction:column}.grid-container{position:relative;display:flex;width:fit-content;height:fit-content;justify-content:center;padding:10px}.grid{display:grid;grid-template-columns:repeat(3,1fr);border:min(.2vh,.2vw) solid #222}.sub-grid{border:1px solid #999}.sub-grid-container{position:relative;display:flex;justify-content:center;align-items:center;font-size:min(20vh,20vw);font-family:Verdana,Geneva,Tahoma,sans-serif}.sub-grid-container:after{content:attr(data-symbol);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sub-grid-container.x{background-color:rgba(var(--x-color),.5);color:rgb(var(--x-color))}.sub-grid-container.o{background-color:rgba(var(--o-color),.5);color:rgb(var(--o-color))}.sub-grid-container.full{background-color:rgba(var(--full-color),.5);color:rgb(var(--full-color))}.cell{display:flex;align-items:center;justify-content:center;width:min(8vh,8vw);height:min(8vh,8vw);font-size:min(5vh,5vw);font-family:Verdana,Geneva,Tahoma,sans-serif;border:1px solid #ccc;cursor:pointer}.cell.nextSubGrid{background-color:#6cb8f2}.cell:hover{background-color:#f0f0f0}.game-over-modal{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:9}.game-over-content{background:white;padding:10px;border-radius:10px;text-align:center}.game-over-content button{background-color:#6cb8f2;border:none;color:#fff;padding:12px 24px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;cursor:pointer;border-radius:4px;transition-duration:.4s;-webkit-user-select:none;user-select:none}.game-over-content button:hover{background-color:#78c8ff}.computer-play-content button{background-color:#666;border:none;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;cursor:pointer;border-radius:4px;transition-duration:.4s}.computer-play-content.game-over button{background-color:#fff;border:none;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;cursor:default;border-radius:4px;transition-duration:.4s;-webkit-user-select:none;user-select:none}.computer-play-content button:hover{background-color:#aaa}