body {
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: url("https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExcTAxdjg5dHJzaXhscnd4enZpd3h6MHlrY3RsZHNobmdmMmd0aGNqNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xThtav6J5dTdhU45AQ/giphy.gif")
    no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  /*   background-color: #555; */
}

h1,
h2,
h3 {
  display: flex;
  justify-content: center;
}

h1 {
  font-family: "Creepster", cursive;
  color: darkgoldenrod;
  font-size: 2.4rem;
  margin-bottom: -10px;
}

h2 {
  font-family: "Eater", cursive;
  color: chartreuse;
  transition: 0.4s ease;
}

h3 {
  color: tomato;
  font-size: 1.8em;
}

p {
  display: flex;
  justify-content: center;
}

main {
  display: flex;
  align-content: space-around;
  justify-content: space-evenly;
  align-items: center;
}

.player-one {
  justify-content: flex-start;
  width: 30%;
  align-items: flex-start;
  color: chartreuse;
}

.player-two {
  width: 30%;
  align-items: flex-end;
  color: chartreuse;
}

.token-one,
.token-two {
  margin-bottom: 10px;
  font-size: 6em;
}

.center-container {
  display: flex;
  width: 40vw;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}

.game-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 90%;
}

.boxes {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33%;
  height: 15vh;
  font-size: 4em;
}

.a2,
.c2 {
  border-left: 1.5px solid purple;
  border-right: 1.5px solid purple;
}

.b1,
.b3 {
  border-bottom: 1.5px solid purple;
  border-top: 1.5px solid purple;
}

.b2 {
  border: 1.5px solid purple;
}

.player-one-wins,
.player-two-wins {
  font-size: 2em;
}

.hidden {
  display: none;
}