body {
            background: gray;
        }
        
        .tic-tac-toe table {
            width: 175px;
            height: 175px;
            font-size: 8px;
            line-height: 50px;
            border: 2px solid black;
            border-collapse: collapse;
        }
        
        .tic-tac-toe td {
            border: 1px solid black;
            height: 5em;
            position: relative;
            text-align: center;
            width: 5em;
        }
        
        .tic-tac-toe table:not(.game-over) td {
            cursor: pointer;
        }
        
        .tic-tac-toe td button {
            position: absolute;
            left: -100vw;
        }
        
        .tic-tac-toe .o {
	-webkit-transition: background 0.4s;
            background: #8f8;
            color: #8f8;
        }
        
        .tic-tac-toe .x {
	       -webkit-transition: background 0.4s;
            background: #f88;
            color: #f88;
        }
        
        .tic-tac-toe .o,
        .tic-tac-toe .x {
            z-index: -1;
        }
        
        .tic-tac-toe .o::after,
        .tic-tac-toe .x::after {
            color: black;
            display: block;
            font-size: 5em;
            position: absolute;
            width: 100%;
        }
        
        .tic-tac-toe .o::after {
            content: "o";
            top: -0.2em;
        }
        
        .tic-tac-toe .x::after {
            content: "x";
            top: -0.2em;
        }

        .tic-tac-toe .o.highlighted::after,
        .tic-tac-toe .x.highlighted::after {
            text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px white, 0 0 5px white, 0 0 6px white, 0 0 7px white;
        }
        
        .tic-tac-toe .game-over {
            border-color: red;
        }