* {
  padding   : 0;
  margin    : 0;
  box-sizing: border-box;
}

:root {
  --dark-color  : #264653;
  --cyan-color  : #2A9D8F;
  --yellow-color: #E9C46A;
  --orange-color: #F4A261;
  --red-color   : #E76F51;
  --blue-color  : #0096c7;
}

.game {
  min-height     : 100vh;
  display        : flex;
  padding        : 2rem 1rem;
  justify-content: center;
  align-items    : center;
  background     : linear-gradient(to right, rgba(255, 255, 255, 0.5) 0 100%), url(./img/geometry.webp);
  flex-direction : column;
}

.header {
  margin-bottom: 2rem;
}

.header h1 {
  font-size  : 2rem;
  font-weight: 200;
  color      : var(--dark-color);
}

.interface {
  display       : flex;
  flex-direction: column;
  width         : min(100%, 864px);
}

.controlbar {
  display        : flex;
  justify-content: space-between;
  width          : 100%;
  align-items    : end;
  font-size      : 1.25rem;
  color          : var(--dark-color);
  padding        : 0.25rem 0.5rem;
}

.controlbar .fa-star {
  color: gold;
}

.reset {
  font-size : 1rem;
  border    : none;
  padding   : 0.5rem 1rem;
  background: orange;
  cursor    : pointer;
}

.reset:hover {
  background: rgb(238, 178, 12)
}

.cards {
  background           : linear-gradient(215deg, var(--orange-color), var(--yellow-color), var(--red-color));
  display              : grid;
  width                : 100%;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap                  : 2rem;
  padding              : 2rem;
  border-radius        : 0.5rem;
  box-shadow           : 4px 4px 4px 6px rgba(0, 0, 0, 0.1);
}

.card {
  padding         : 2.75rem;
  background-color: var(--dark-color);
}

.card {
  display        : flex;
  justify-content: center;
  align-items    : center;
  border-radius  : 0.5rem;
  box-shadow     : 3px 3px 4px 3px rgba(116, 104, 104, 0.2);
  cursor         : pointer;
}

.card .fas {
  color    : var(--dark-color);
  font-size: 2rem;
}

.open {
  cursor          : default;
  background-color: var(--blue-color);
}

.open .fas {
  color: white;
}

.show {
  background-color: var(--cyan-color);
}

@media (max-width: 540px) {
  .cards {
    gap                  : 1rem;
    padding              : 1rem;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  }

  .card {
    padding: 1.5rem;
  }

  .controlbar {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : 1rem;
  }

  .moves,
  .reset {
    justify-self: end;
  }
}