/* space-grotesk-latin-wght-normal */
@font-face {
  font-family: "Space Grotesk Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/space-grotesk:vf@latest/latin-wght-normal.woff2)
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Space Grotesk Variable";
}

body {
  background: #020617;
  background: linear-gradient(
    to bottom right,
    #020617 0%,
    #071022 25%,
    #0f172a 40%,
    #0f172a 60%,
    #071022 75%,
    #000000 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: white;
  z-index: -1;
  animation: twinkle 3s infinite alternate;
  box-shadow: 12vw 8vh white, 28vw 15vh white, 45vw 5vh white, 62vw 18vh white,
    78vw 12vh white, 85vw 25vh white, 95vw 10vh white, 5vw 22vh white,
    18vw 35vh white, 35vw 28vh white, 52vw 42vh white, 68vw 38vh white,
    82vw 45vh white, 92vw 32vh white, 8vw 48vh white, 25vw 55vh white,
    42vw 52vh white, 58vw 48vh white, 75vw 58vh white, 88vw 55vh white,
    15vw 65vh white, 32vw 72vh white, 48vw 68vh white, 65vw 75vh white,
    80vw 70vh white, 95vw 78vh white, 3vw 75vh white, 20vw 82vh white,
    38vw 85vh white, 55vw 88vh white, 72vw 82vh white, 87vw 85vh white,
    10vw 92vh white, 27vw 95vh white, 45vw 92vh white, 62vw 96vh white,
    78vw 93vh white, 90vw 97vh white, 2vw 88vh white, 17vw 78vh white,
    33vw 62vh white, 50vw 15vh white, 67vw 25vh white, 83vw 8vh white,
    7vw 38vh white, 23vw 42vh white, 40vw 38vh white, 57vw 62vh white,
    73vw 48vh white, 13vw 52vh white, 30vw 48vh white, 47vw 78vh white,
    63vw 42vh white, 85vw 62vh white, 37vw 8vh white, 53vw 35vh white,
    70vw 88vh white, 6vw 15vh white, 22vw 25vh white, 38vw 18vh white,
    54vw 75vh white, 71vw 5vh white, 86vw 38vh white, 14vw 88vh white,
    31vw 85vh white, 46vw 45vh white, 64vw 65vh white, 81vw 78vh white;
}

.memory-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0 30px 0;
}

.title h1 {
  margin: 20px 0 10px;
  color: #dbdbdb;
  font-weight: 100;
  font-size: 24px;
  text-align: center;
}

.title .title-line {
  width: 96px;
  height: 2px;
  margin: auto 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    oklch(65.6% 0.241 354.308) 50%,
    transparent 100%
  );
}

.statistics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
  color: #dbdbdb;
  font-size: 14px;
}

button {
  appearance: none;
  background-color: transparent;
  border: 2px solid #ccc;
  border-radius: 15px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  text-decoration: none;
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
  touch-action: manipulation;
}

button:hover {
  color: #fff;
  background-color: oklch(65.6% 0.241 354.308 / 0.2);
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.memory-game {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.memory-card {
  width: 70px;
  height: 100px;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s;
  color: rgb(204, 204, 204);
}

.memory-card:hover {
  transform: scale(1.05);
  z-index: 20;
}

.memory-card .front-face,
.memory-card .back-face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff08;
  backdrop-filter: blur(8px);
  border: 1px solid #ffffff23;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  gap: 10px;
  backface-visibility: hidden;
  transition: all 300ms ease;
}

.memory-card .front-face:hover {
  background-image: linear-gradient(
    to bottom right,
    oklch(65.6% 0.241 354.308 / 0.2),
    oklch(62.7% 0.265 303.9 / 0.2)
  );
}
.memory-card.flip {
  transform: rotateY(180deg);
}

.memory-card .back-face {
  transform: rotateY(180deg);
  background-image: linear-gradient(
    to bottom right,
    oklch(62.7% 0.265 303.9 / 0.2),
    oklch(65.6% 0.241 354.308 / 0.2)
  );
}

.memory-card .front-face img {
  width: 60px;
}

.memory-card .back-face img {
  width: 50px;
  height: 50px;
}

.message {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-top: 10px;
}

@media (min-width: 640px) {
  .memory-card {
    width: 150px;
    height: 200px;
  }

  .statistics {
    font-size: 18px;
  }

  .title {
    padding: 20px 0 60px 0;
  }

  .title h1 {
    font-size: 32px;
    font-weight: 100;
  }

  button {
    font-size: 16px;
    padding: 16px 24px;
  }

  .memory-wrapper {
    gap: 30px;
  }

  .memory-card .front-face img {
    width: 100px;
  }

  .memory-card .back-face img {
    width: 100px;
    height: 100px;
  }

  .memory-card .front-face,
  .memory-card .back-face {
    font-size: 20px;
  }
}