main {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  container-type: inline-size;
  background: linear-gradient(135deg, #09002e 25%, #391f77 50%, #09002e 75%);
  align-content: center;
}

.memory-match-wrapper {
  width: clamp(21rem, 90svw, 50rem);
  aspect-ratio: 9 / 16;
  margin-inline: auto;

  > :first-child {
    text-align: center;
    font-size: 1.7rem;
    text-shadow: 1px 1px 3px azure;
  }

  .memory-match-design {
    height: 100%;
    padding: 0.7rem;
    margin-top: 0.7rem;
    display: grid;
    grid-template-columns: repeat(3, auto);
    place-items: center;
    background-color: rgb(55 55 55 / 0.3);
    backdrop-filter: blur(3px);
    border: 1px solid goldenrod;
    border-radius: 7px;
    box-shadow: inset 0 0 11px aliceblue;

    button,
    img {
      border-radius: 7px;
    }

    button {
      width: 6rem;
      aspect-ratio: 1 / 1;
      cursor: pointer;
      border: 2px solid gold;
      background-color: rgb(55 55 55 / 0.7);
      backface-visibility: hidden;

      &:disabled {
        opacity: 60%;
      }
    }

    img {
      transition: transform 2s ease;
      transform: rotateY(0deg);

      &.rotation {
        transform: rotateY(180deg);
      }

      &.match {
        animation: match 1s ease-in-out forwards;
      }

      &.no-match {
        animation: no-match 1s ease-in-out forwards;
      }
    }
  }

  .reset-design {
    text-align: center;

    > :first-child {
      margin-top: 0.7rem;
      padding: 0.3rem 1rem;
      border-radius: 7px;
      background: transparent;
      border: 2px solid rgba(13, 5, 248, 0.733);
      cursor: pointer;
      opacity: 0;
      transition: transform 1s ease, box-shadow 1s ease, opacity 1.3s ease;

      &:active {
        transform: translateY(4px);
        box-shadow: inset 0 0 9px 9px rgba(68, 30, 240, 0.456);
      }
    }
  }
}

@container (width >= 40rem) {
  .memory-match-wrapper {
    aspect-ratio: 5 / 4;
  }
}

@keyframes match {
  0%,
  100% {
    transform: rotateY(180deg) rotateZ(0deg);
  }
  33% {
    transform: rotateY(180deg) rotateZ(-10deg);
  }
  66% {
    transform: rotateY(180deg) rotateZ(10deg);
  }
}

@keyframes no-match {
  0%,
  100% {
    transform: rotateY(180deg) translateX(0);
  }
  33% {
    transform: rotateY(180deg) translateX(-10%);
  }
  66% {
    transform: rotateY(180deg) translateX(10%);
  }
}