ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

h1 {
  margin: 0;
  line-height: 1.5;
  color: black;
  font-size: 32px;
  font-weight: bold;
}

#game-container {
  max-width: 500px;
  margin: 20px auto;

  
  display: inline-block;
}

#game-container header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#dashboard {
  background: #94dbf7;
  margin: 10px 0 0;
  padding: 5px 10px;
  border-radius: 100vw;
  font-weight: bold;
}

#dashboard li {
  display: inline-block;
}

#dashboard li span {
  margin: 0 10px 0 0;
}

#dashboard li:last-child span {
  margin: 0;
}

#board {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  grid-template-rows: 80px;
  grid-auto-rows: 80px;
  gap: 10px;
  margin: 15px 0;
}

#board.compare {
  pointer-events: none;
}

#board li {
  border: 2px solid black;
  border-radius: 6px;
  background-color: #94dbf7;
  cursor: pointer;
  transform: rotateY(180deg);
  /* transform-style: preserve-3d; */
  font-size: 0;
  transition: transform 300ms;
  background-size: cover;
}

#board li img {
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 300ms, visibility 300ms;
}

#board li.open,
#board li.flip {
  transform: rotateY(0deg);
  pointer-events: none;
}

#board li.open img,
#board li.flip img {
  visibility: visible;
  opacity: 1;
}

#restart {

}

#restart:hover {
  transform: translateY(-4px);
}