@import url('https://fonts.googleapis.com/css2?family=Modak&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
body {
  background-color: #333;
  align-content: center;
}
header {
  text-align: center;
  font-family: 'Modak', cursive;
  font-size: 40px;
  line-height: 1;
  color: #0B3BCF;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}
button {
  display: block;
  min-width: 250px;
  max-width: 250px;
  height: 35px;
  margin: auto;
  border: 2px solid rgb(0,200,255);
  border-radius: 17px;
  background-color: #333;
  color:rgb(0,200,255);
  cursor: pointer;
  font-size: 15px;
  font-family: 'Roboto Slab', serif;
}
button:hover {
  transform: scale(1.05);
}
#board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 306px;
  margin:auto;
  border: 1px solid rgb(0,200,255);
  margin-top: 25px;
}
.square {
  width: 100px;
  height: 100px;
  border: 1px solid rgb(0,200,255);
  text-align: center;
}
.x {
  color: #0D9CAB;
  font-family: 'Modak', cursive;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  font-size: 90px;
  line-height: 100px;
}
.o {
  color: #ED26C0;
  font-family: 'Modak', cursive;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  font-size: 90px;
  line-height: 100px;
}
.active {
  background-color: #777;
}
h3 {
  color:rgb(0,200,255);
  text-align:center;
  font-size: 25px;
  margin-top: 75px;
  font-family: 'Roboto Slab', serif;
}