react-memory-game/dist/default-theme.css

A memory game engine.

.memory-game--memory-grid {
  width: 92vmin;
  height: 92vmin;
  margin: 0 auto;
  background: #666;
  padding: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2), -1px -1px 3px rgba(0, 0, 0, 0.1);
}

.memory-game--memory-slot {
  flex: 1 0 25%;
  padding: 5px;
}

.memory-game--memory-card {
  background: rgba(255, 255, 255, .8);
  color: #333;
  border-radius: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.memory-game--memory-card__closed {}

.memory-game--memory-card__open {}

.memory-game--memory-card__found {
  opacity: .6;
  filter: saturate(0%);
  transition: opacity .3s, filter .3s,
}

.memory-game--counter {
  min-width: 50px;
  text-align: center;
}

.memory-game--reset {
  padding: 10px 30px;
  border-radius: 3px;
}

/****
 * CSS below this point is structural,
 * change it only if you know what
 * you are doing
 ******/

.memory-game {
  box-sizing: border-box;
 }

.memory-game *,
.memory-game *:before,
.memory-game *:after {
  box-sizing: inherit;
}


.memory-game--memory-grid {
  display: flex;
  flex-wrap: wrap;
  user-select: none;
  border-radius: 10px;
}

.memory-game--memory-grid a {
  width: auto;
}

.memory-game--memory-slot {
  flex: 1 0 25%;
}

.memory-game--memory-card {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 100%;
}

.memory-game--memory-card--content {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.memory-game--memory-card__open .memory-game--memory-card--content,
.memory-game--memory-card__found .memory-game--memory-card--content {
  display: flex;
}