@import url(/www/base.css);
.memory-game {
  max-width: 400px;
  width: 100%;
  height: 100%;
  margin: auto;
  padding: 5rem 1rem 1rem 1rem;

}

.memoryContainer{
  position: relative;
  margin-bottom: 1rem;
}

.memoryContainer>div{
  position: relative;
  height: 100%;
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
}
.memoryContainer>div>div{
  width: 25%;
  flex-shrink: 0;
  position: relative;
  height: 0;
  padding-bottom: 25%;
}
.memory-card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform .5s;
  cursor: pointer;
  padding: 4px;
}

.memory-card:active {
  transform: scale(0.97);
  transition: transform .2s;
}

.memory-card.flip {
  transform: rotateY(180deg);
}


.memory-card>div{
  padding: 4px;
}


.front-face,
.back-face {
  width: 100%;
  height: 100%;
  padding: 2px;
  position: absolute;
  backface-visibility: hidden;
}
.back-face>div{
  width: 100%;
  height:100%; 
  border-radius: 4px;
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

.front-face >img{
  width: 100%;
  height: 100%;
  position: relative;
}

.front-face {
  transform: rotateY(180deg);
}

.reset{
  padding: 12px 0;
  display: flex;
  width: 100%;
  justify-content: center;
}
.count{
  height: 30px;
  font-size: 24px;
}


.rule-wrap {
  padding: 15px;
  color: #ccc;
  font-size: 15px;
}

.reStart{
  width: 100%;
}