*{margin:0;padding:0;box-sizing:border-box}html{background-color:#f5f5f5}body{height:100%}#new-game-dialog{position:fixed;left:50%;top:20%;transform:translate(-50%,-50%);border:2px solid gainsboro;box-shadow:15px 15px 15px #000;padding:10px}#new-game-form{display:flex;flex-flow:column}#new-game-form>p{display:flex;align-items:center;flex-flow:column}.game-container{display:grid;justify-content:center;grid-template-columns:1fr 1fr 1fr}.player{display:grid;justify-content:center;text-align:center}.player>span{font-size:2.5rem}.player.middle{align-self:center}.player.middle>span[class$=winner]:after{content:"TIE!"}.player>span[class$=winner]:after{content:" WINS!"}.player.o{grid-column:3}.controls{grid-row:5;grid-column:2;text-align:center;display:grid;grid-auto-flow:row}#new-game-form>button,.controls>button{border:none;box-shadow:0 0 2px gray;background-color:#687e7e;padding-top:20px;padding-bottom:20px;margin:10px}#new-game-form>button,.controls>button:active{box-shadow:inset 0 0 2px gray}.game-grid{margin:50px;grid-row:2;grid-column:1 / span 4;text-align:center}.game-grid{display:grid;grid-template-columns:100px 100px 100px;grid-template-rows:100px 100px 100px;justify-content:center;gap:20px}.game-grid>button[class=grid-space]{background-color:#dcdcdc;border:none;box-shadow:0 0 15px gray;width:100%;font-size:4rem}.game-grid>button[class=grid-space]:active{box-shadow:inset 0 0 10px gray}.game-grid>button[class=grid-space]:disabled{background-color:#f08080;box-shadow:none}.mark-O{color:#960000}.mark-X{color:#000096}