@font-face {
  font-family: 'LiteraturnayaC';
  src: url('assets/LiteraturnayaC.2bbbe3143b8933deb9e34ca770fdb010.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Apply the custom font to the body */
body {
  background-color: #393939;
  font-family: 'LiteraturnayaC', serif;
  touch-action: none;
  /* Fallback to sans-serif if the custom font fails to load */
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* Prevent scrolling */
}

#logocontainer {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the content horizontally */
  justify-content: center; /* Center the content vertically */
  margin: 0 auto;
  padding: 5%;
  position: absolute;
  width: 90%;
  z-index: 1000;
  gap: 20px;
}

#logo {
  /* display: none; */
  /* padding-top: 32px; */
  max-height: 28px;
  color: white;
  height: auto;
  /* margin-bottom: 20px;  */
}

#buttonContainer {
  display: flex;
  flex-direction: row;
  align-items: center; /* Center the buttons horizontally */
  justify-content: center; /* Center the buttons vertically */
  width: 100%;
}

#refreshContainer {
  position: absolute;
  bottom: 5%;
  width: 100%;
  display: flex;
  justify-content: center; /* Centers the button horizontally */
  z-index: 1000;
}

#refresh {
  margin: 0 auto;
}


#gameTitle {
  font-size: 20px;
  font-family: 'LiteraturnayaC', serif;
  color: #fff;
  z-index: 1000;
  flex-grow: 1;
  text-align: center;
}

button {
  position: relative;
  font-size: 20px;
  /*   font-family: serif; */

  font-family: 'LiteraturnayaC', serif;
  color: #fff;
  border: none;
  background-color: transparent;
  padding: 8px 16px;
  margin: 8px 0;
  z-index: 1000;
}

button::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background-color: rgb(255, 255, 255);
  filter: blur(24px); /* Adjust the blur radius as needed */
  z-index: -1; /* Ensure the blur stays behind the button content */
  transition: opacity 0.3s;
  opacity: 0;
}

button:hover {
  cursor: pointer;
}

button:hover::before {
  opacity: 0.3;
}

button:focus::before {
  opacity: 0;
}

button:active::before {
  opacity: 0.5;
}


#card-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
  transition: transform 1s ease-in-out;
  transform-origin: center;
  /*   height: 500px; Adjust as needed */
}

.card {
  position: absolute;
  background-size: 100%;
  background-position: center;
  background-image: url(assets/back.png);
  width: 100px; /* Adjust as needed */
  height: 165px; /* Adjust as needed */
  border-radius: 6px;
  padding: 0px;
  border: 0.5px solid black;
  user-select: none;
  overflow: hidden;
  transform-style: preserve-3d;
  transform:  perspective(400px);
  /* rotate: 0; */
  --translate-x: 0px;
  --translate-y: 0px;
  --rotate: 0deg;
  --start-x: 0px;
  --start-y: 0px;
  --start-rotate: 0deg;
  --end-x: 0px;
  --end-y: 0px;
  --end-rotate: 0deg;
  --diff-x: 0px;
  --diff-y: 0px;
  --diff-w: 0deg;
  --peak-height: 0px;
  transition: transform 0.6s;
}

@keyframes rotateBack {
  0% {
    translate: var(--translate-x) var(--translate-y);
    transform: rotateZ(var(--rotate)) rotateY(0deg);
    transform-origin: center;
    animation-timing-function: ease-in;
  }
  50% {
    translate: var(--translate-x) var(--translate-y);
    transform: rotateZ(var(--rotate)) rotateY(-90deg);
    transform-origin: left;
    animation-timing-function: ease-out;
  }
  100% {
    translate: var(--translate-x) var(--translate-y);
    transform: rotateZ(var(--rotate)) rotateY(-180deg);
    transform-origin: center;
  }
}

@keyframes rotateForward {
  0% {
    translate: var(--translate-x) var(--translate-y);
    transform: rotateZ(var(--rotate)) rotateY(-180deg);
    transform-origin: center;
    animation-timing-function: ease-in;
  }
  50% {
    translate: var(--translate-x) var(--translate-y);
    transform: rotateZ(var(--rotate)) rotateY(-90deg);
    transform-origin: left;
    animation-timing-function: ease-out;
  }
  100% {
    translate: var(--translate-x) var(--translate-y);
    transform: rotateZ(var(--rotate)) rotateY(0deg);
    transform-origin: center;
  }
}

@keyframes parabolic-move {
  0% {
    translate: var(--start-x) var(--start-y);
    transform: rotateZ(var(--start-rotate));
    animation-timing-function: ease-in;
  }
  25% {
    translate: calc(var(--start-x) + 0.25 * var(--diff-x)) calc(var(--start-y) + 0.25 * var(--diff-y) - var(--peak-height));
    transform: rotateZ(calc(var(--start-rotate) + 0.25 * var(--diff-w)));
    animation-timing-function:linear;
  }
  50% {
    translate: calc(var(--start-x) + 0.5 * var(--diff-x)) calc(var(--start-y) + 0.5 * var(--diff-y) - var(--peak-height) * 1.5);
    transform: rotateZ(calc(var(--start-rotate) + 0.5 * var(--diff-w)));
    animation-timing-function:linear;
  }
  75% {
    translate: calc(var(--start-x) + 0.75 * var(--diff-x)) calc(var(--start-y) + 0.75 * var(--diff-y) - var(--peak-height));
    transform: rotateZ(calc(var(--start-rotate) + 0.75 * var(--diff-w)));;
    animation-timing-function: ease-out;
  }
  100% {
    translate: var(--end-x) var(--end-y);
    transform: rotateZ(var(--end-rotate));
  }
}




/* .card .front {
  transform: rotateY(0deg);
}

.card .back {
  transform: rotateY(180deg);
}

.card.flipped .front {
  transform: rotateY(180deg);
}

.card.flipped .back {
  transform: rotateY(0deg);
} */

.card.opening {
  animation: rotateForward 0.6s forwards;
}

.card.open {
  transform: rotateY(0deg);

}

.card.closing {
  animation: rotateBack 0.6s forwards;

}

.card.closed {
  transform: rotateY(-180deg);

}

.picture {
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: center;
  background-size: 110px;
  /* transform: rotateY(180deg); */
}




.active {
  /*   z-index: 1000; /* Ensures the active card is above others */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.6s;
    /* transform: scale(2.05); */
}

.card.clone {
  /*   z-index: 500; Below active cards but above static cards */
  /* transition: none; */
}