/* header */
#header {
  display: flex;
  margin:0 auto;
  flex-direction: column;
  align-items:flex-end ;
  width: 85%;
}
#header .title {
  display: flex;
  width:100%;
  justify-content: flex-end;
}
#header .title img {
  max-width: 5em;
}
#header .title h2 {
  padding-left: 0.5em;
}
#header .score {
  margin:0;
  color: #6c90ac;
}
#header .tried {
  margin-top: 0;
}


/* all cards */
#cards {
  /* 軸 - row */
  display: flex;
  flex-wrap: wrap;
  width: 85%;
  margin: 0 auto;  /* 置中*/
}
/* one card */
.card {
  box-sizing: border-box;
  /* 卡片在容器裡的排版,一排13張,共四排 */
  /* flex : flex-basis,flex-grow,flex-shirn k */
  flex: 7% 1 1 ;  /* 修改：卡片需要分配剩餘空間 */
  height: 8vw;
  border: 2px solid #e0e0e0;
  margin: 2px;
  /* 卡片在內部元素的排版 */
  display: flex;
  /* main axis */
  flex-direction: column;
  justify-content: space-around; 
  /* space-around左右margin一樣 */

}
.card img {
  max-width: 30%;
  align-self: center;
}
.card p {
  margin: 3px;
  font-size: 10px;
}
.card p:last-child {
  transform: rotate(180deg);
}
.back {
  background: url('https://assets-lighthouse.alphacamp.co/uploads/image/file/9222/ExportedContentImage_00.png');
  background-size: cover;
}
.paired {
  background-color: #dae0e3;
}

.wrong {
  animation: wrongAnimation 0.2s; /*帶入動畫名稱 幾秒*/
  animation-iteration-count: 5;  /*重複五次*/
}
/*錯誤提示*/
@keyframes wrongAnimation {
  to {
    border: 2px solid #f1c232 /*當動畫發生時，該元素要逐漸加上黃色邊框*/
  }
}

/*Game Finished*/
.completed {
  position: absolute;
  z-index: 999;
  top:33vh; /*位置置中*/
  background-color: RGBA(232,246,254,0.8);
  width: 100vw;
  padding: 50px 0;
}

.completed p {
  font-size: 1.5em;
  color: black;
  text-align: center;
  margin: 0;
}
.completed p:first-child {
  font-size: 3em;
  font-weight: 700;
  color: #758d9a;
}