styles.css

body {
  color: black;
  background-color: #feff5f;
  font-family: Georgia, "Times New Roman", Times, serif;
  /* background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238d8d8d' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */
}

.title {
  text-align: center;
  margin: 6rem 0 8rem;
}

ul {
  padding: 0;
  list-style: none;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

li {
  color: white;
  margin: 1rem 0.5rem;
  padding: 1rem;
  border: 10px solid purple;
  background-color: #a65c83;
  transform: rotate(3deg);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

li .text {
  line-height: 0.5rem;
  text-align: center;
  font-size: 2rem;
  /* text-decoration: underline wavy purple; */
}

button {
  background-color: transparent; /* Green */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 3px;
}

button:hover {
  margin-bottom: 0;
  border-bottom: 3px solid purple;
}

.buttons {
  text-align: right;
}

.hoverBoard {
  font-size: 1.5rem;
  position: fixed;
  z-index: 1;
  background: #ffff92;
  transform: rotate(3deg);
  right: 2rem;
  top: 2rem;
  display: flex;
  flex-direction: column;
}

.restart {
  height: 2rem;
  color: initial;
  box-sizing: content-box;
}

.scoring {
  display: flex;
}

@media screen and (max-width: 478px) {
  .title {
    text-align: left;
  }
  .scoring {
    font-size: 1rem;
  }
}

.score {
  text-align: center;
  padding: 1rem;
}

.team-active {
  background-color: #c8cc27;
}

.final-score {
  margin-top: 2rem;
  font-size: 3rem;
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% {
    -webkit-transform: perspective(120px);
  }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
  }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}