@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet');
html, html * {
  margin: 0;
  font-family: "Montserrat", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: hsl(0, 25%, 35%);
}

#head {
  text-shadow: 0px 10px 10px orange;
  font-size: 2rem;
  font-weight: bold;
  color: antiquewhite;
  background: hsl(0, 25%, 35%);

  text-align: center;
  padding: 2rem;
}

#board {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 600px;;
  height: 600px;
  margin: 0;
  /* border: solid 1px black; */
}

#cards {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: center;
  align-content: center;

  /* padding: 70px; */
}

.card {
  /* height: 100px;
  width: 100px; */
  background-color: antiquewhite;
  font-size: 3rem;
  font-family: sans-serif;
  display: grid;
  justify-content: center;
  align-content: center;
  border-radius: 10px;
}

.card.face-down {
  background-color: #ffbd66;
  color: rgba(0, 0, 0, 0.2);
}

.card.matched {
  box-shadow: 0px 0px 15px 3px rgba(248, 238, 98, 0.75);
  pointer-events: none;
  animation: .3s pop forwards;
}

#button {
  align-content: center;
  justify-content: center;
}

@keyframes pop {
  0% { transform: scale(1) }
  70% { transform: scale(1.1); opacity: 1;}
  100% { transform: scale(0); opacity: 0;}
}

#display-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 30%;
  width: 100%;
}

#display-panel button {
  flex: 1 0;
  font-size: 3.5rem;
  align-self: stretch;
  margin: 2rem 0;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  outline: none;
  border-radius: 10px;
  background-color: blanchedalmond;
  color: #ffbd66;
  border: none;
}

.hidden {
  display: none !important;
}

#timer, #best-time {
  font-size: 3rem;
  font-family: sans-serif;
  color: blanchedalmond;
  padding: 1rem;
}