style.css

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: #666;
  font-family: "Gentium Basic", serif;
}

a {
  text-decoration: none;
  color: black;
}

h1,
h2 {
  font-family: "Jura", sans-serif;
  font-weight: bold;
}

h1 {
  color: cornflowerblue;
}

h2 {
  color: rgb(220, 86, 220);
}

button {
  border: 2px solid darkslategray;
  border-radius: 50px;
  padding: 1em;
  font-size: 1.2em;
  color: darkslategrey;
  background-color: white;
  cursor: pointer;
  margin: 1em;
  transform: scale(1);
  transition-property: transform, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.4);
}

#resetBtn {
  color: teal;
  border: 2px solid teal;
}

button:hover {
  transform: scale(0.95);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.4);
}

.container {
  position: relative;
  margin: auto auto;
  text-align: center;
}

#board {
  margin-top: 2em;
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
}

#msg-box {
  font-family: "cursive";
  font-size: 1.02em;
  font-weight: bolder;
  text-decoration: underline;
}

#msg-box.game-on {
  transition: 3s ease-in;
  color: darkslategray;
}

#msg-box.ai-won {
  transition: 2s ease-in-out;
  color: crimson;
}

#msg-box.draw {
  transition: 3s ease-in;
  color: green;
}

.cell,
.cell-x,
.cell-o,
.cell-disabled {
  border: 3px solid lightslategray;
  height: 5em;
  width: 5em;
  font-size: 2em;
  color: whitesmoke;
  cursor: not-allowed;
}

.cell {
  cursor: pointer !important;
  background-color: white;
  transform: scale(1);
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
}

.cell:hover {
  background-color: cornflowerblue;
}

.cell-x {
  background-color: cornflowerblue;
}

.cell-o {
  background-color: darkorange;
}

.cell-disabled {
  border: 0;
  background-color: lightgrey;
}