@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');

* {
  font-family: 'Permanent Marker', cursive;
  background-color: black;
}

h1 {
  color: orange;
  text-align: center;
}

.board-container {
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.square {
  width: 200px;
  height: 200px;
  background: orange;
  border: 1px black solid;
  font-size: 8rem;
  text-align: center;
}

[data-player='X'] .square:hover {
  cursor: url('assets/X.png') 40 40, auto;
}

[data-player='O'] .square:hover {
  cursor: url('assets/O.png') 40 40, auto;
}

.winner {
  text-align: center;
  color: #6cff00;
  padding-bottom: 20px;
  font-size: 2.5rem;
}

.reset-button {
  text-align: center;
  font-size: 20px;
  color: orange;
  border: 1px solid orange;
  height: 45px;
  width: 80px;
  margin: 10px;
}

@media all and (max-width: 650px) {
  .board {
    width: 300px;
    height: 300px;
  }
}