* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background-color: #1F2433;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-wrap {
  position: relative;
}

.title {
  position: absolute;
  left: -60px;
  top: 0;
  color: #fff;
  font-size: 28px;

  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);

  font-family: "Lucida Console", "Courier New", Consolas, monospace;
}

.name {
  position: absolute;
  left: 100%;      /* game-wrap right corner */
  bottom: 0;       
  margin-left: 12px;
  color: #fff;
  font-size: 28px;
  font-family: monospace;
}

.memory-game {
  display: grid;
  grid-template-columns: repeat(4, 384px);
  grid-template-rows: repeat(3, 256px);
  gap: 16px;
  perspective: 1000px;
}

@media (max-width: 1600px) {
  .memory-game {
    grid-template-columns: repeat(3, 384px);
  }
}

@media (max-width: 1200px) {
  .memory-game {
    grid-template-columns: repeat(2, 384px);
  }
}

@media (max-width: 800px) {
  .memory-game {
    grid-template-columns: repeat(1, 384px);
  }
}
@media (max-height: 900px) {
  body {
    align-items: flex-start;
    padding-top: 20px;
  }
}

.memory-card {
  border: 2px solid black;
  width: 384px;
  height:  256px;
  margin: 8px;
  /*margin: auto;*/
 /* display: inline-block; önemli */
  image-rendering: pixelated;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s;
}

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

.front-face,
.back-face {
  width: 100%;
  height: 100%;
  position: absolute;
  border: 2px solid black;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
  backface-visibility: hidden;
}

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

.card {
  width: 384px;
  height: 256px;
  image-rendering: pixelated;
  display: inline-block; /* önemli */
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.memory-card:not(.matched):hover {
  box-shadow:
    0 0 8px #FFD966,
    0 0 16px #FFD96688;
}

.memory-card.matched {
  box-shadow:
    0 0 8px #9b5cff,
    0 0 16px #9b5cff88;
}