styles.css

* {
  font-family: 'Neucha', cursive;
}

body {
  display: flex;
  height: 100vh;
  margin: 0%;
  background-image: url("assets/paw-print-background.jpeg");
}

main {
  display: flex;
  flex: 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, .60);
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 4em;
  margin-top: 5%;
}

.hidden {
  display: none;
}

.title {
  font-size: 3em;
  color: orange;
  margin: 0;
}

.btn {
  border: 2px solid #000;
  float: left;
}

.spot1,
.spot3,
.spot7,
.spot9 {
  border-style: none;
}

.spot2,
.spot8 {
  border-style: none solid none solid;
}

.spot4,
.spot6 {
  border-style: solid none solid none;
}

.dog-side,
.cat-side {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 165, 0, .80);
}

.dog,
.cat {
  height: 40%;
}

.small-image {
  width: 10%;
  margin: 1%;
}

.game-piece {
  width: 70%;
}

.gameboard {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  width: 50%;
  height: 50%;/* may not need this */
  margin: 5%;
}

button {
  cursor: pointer;
  border: none;
  background-color: transparent;
  padding: 20% 0%;
}

.start-over {
  padding: 2% 5% 2% 5%;
  border: 2px solid #000;
  background-color: rgb(255 165 0 / 90%);
  border-radius: 1em;
  margin: 5%;
  font-size: 2em;
}

.start-over:hover {
  color: #FFF;
  background-color: #000;
}