@font-face {
  font-family: 'Automania';
  src: url('../fonts/AUTOMANI.TTF') format('truetype');
  font-style: normal;
  font-weight: 200;
}

@font-face {
  font-family: 'Clip';
  src: url('../fonts/Clip.ttf') format('truetype');
  font-style: normal;
  font-weight: 200;
}

.bodyDiv {
  background-image: url(../img/bg.jpg);
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row {
  margin: 0 3vw;
  min-width: 237px;
  max-width: 237px;
  display: flex;
  flex-wrap: wrap;
  border: 2px solid #cbdb82;
  box-shadow: 0 0 10px #d4f321,
  inset 0 0 10px #d4f321;
}

.row div {
  width: 75px;
  height: 75px;
  cursor: pointer;
  border: 2px solid #cbdb82;
  box-shadow: 0 0 10px #d4f321,
  inset 0 0 10px #d4f321;
}

.selected:after {
  display: block;
  text-align: center;
}

.selectedX:after {
  font-size: 48px;
  line-height: 75px;
  content: "\2715";
  color: #82b2db;
  text-shadow: 0 0 5px #2196f3, 0 0 10px #2196f3, 0 0 15px #2196f3;
}

.selectedO:after {
  font-size: 90px;
  line-height: 65px;
  content: "\25CB";
  color: #3ed377;
  text-shadow: 0 0 5px #4ef063, 0 0 10px #4ef063, 0 0 15px #4ef063;
}

.players {
  min-width: 296px;
  height: 220px;
  font-size: 80px;
  text-align: center;
  font-family: "Clip", "Automania";
  font-weight: lighter;
}

div h1 .O {
  font-size: 75px;
}

.playerX {
  color: #82b2db;
  text-shadow: 0 0 5px #2196f3, 0 0 10px #2196f3, 0 0 15px #2196f3;
}

.playerO {
  margin-left: -10px;
  color: #3ed377;
  text-shadow: 0 0 5px #4ef063, 0 0 10px #4ef063, 0 0 15px #4ef063;
}

.winner::after {
  color: #db8282;
  text-shadow: 0 0 5px #f32121, 0 0 10px #f32121, 0 0 15px #f32121;
}

.xWin {
  font-size: 100px;
  margin-top: 50px;
  color: #db8282;
  text-shadow: 0 0 5px #f32121, 0 0 10px #f32121, 0 0 15px #f32121;
}

.oWin {
  font-size: 80px;
  margin-top: 70px;
  color: #cbdb82;
  text-shadow: 0 0 5px #d4f321, 0 0 10px #d4f321, 0 0 15px #d4f321;
}