estilos.css

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
 --celeste: #29ddfd;
 --negro: #000;
 --blanco: #fff;
 --hover: #222;
}  

body {
  background-color: var(--negro);
}

.color {
  background-color: var(--celeste);
  width: 100px;
  height: 25px;
  color: var(--negro);
  cursor: pointer;
}

.contenedor {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

h3 {
  color: var(--celeste);
}

.puntajes {
  height: 25px;
  width: 100%;
  background:  var(--negro);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.tablero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  height: 350px;
  width: 350px;
  padding: 5px;
  background-color: var(--negro);
  border: 3px solid var(--celeste);
  user-select: none;
  font-size: 70px;
  text-align: center;
}

.uno { grid-area: 1 / 1 / 2 / 2; }
.dos { grid-area: 1 / 2 / 2 / 3; }
.tres { grid-area: 1 / 3 / 2 / 4; }
.cuatro { grid-area: 2 / 1 / 3 / 2; }
.cinco { grid-area: 2 / 2 / 3 / 3; }
.seis { grid-area: 2 / 3 / 3 / 4; }
.siete { grid-area: 3 / 1 / 4 / 2; }
.ocho { grid-area: 3 / 2 / 4 / 3; }
.nueve { grid-area: 3 / 3 / 4 / 4; }

.casilla{
  background-color: var(--blanco);
  border: solid 3px var(--celeste);
  display: flex;
  justify-content: center;
  align-items: center;
}

.casilla:hover {
  box-shadow: 5px 5px 25px var(--celeste) inset;
}

.casilla:active {
  box-shadow: 5px 5px 50px var(--celeste) inset;
}

.btn {
  width: 100%;
  height: 50px;
  display: flex;;
  justify-content: center;
}

.jugar, .reiniciar {
  background-color: var(--negro);
  color: var(--celeste);
  border: 5px solid var(--celeste); 
  width: 100px;
  height: 50px;
}   

.reiniciar:hover, .jugar:hover {
  cursor: pointer;
  background-color: var(--hover);
}

.reiniciar:active, .jugar:active {
  background-color: var(--celeste);
  border-color: var(--negro);
  color: var(--negro);
}

.reiniciar {
  position: absolute;
  justify-content: space-evenly;
    top: -9999px;
    left: -9999px;
  }


  .show {
    position: relative;
    top: 0;
    left: 0;
  }

  .puntosX, .puntosO {
    display: flex;
    width: 200px;
    height: 25px;
    background-color: var(--negro);
    border: 3px solid var(--celeste);
    justify-content: center;
    color: var(--celeste);
  }

  .texto {
  position: absolute;
  left: -999999999px;
  top: -99999999999px;
}