* {
  font-family: "Indie Flower", cursive;
  user-select: none;
}
body {
  background-color: #000;
  height: 100dvh;
  margin: 0;
  background-blend-mode: multiply;
  background: radial-gradient(
      circle at 18% 25%,
      rgb(212, 0, 159),
      rgb(212, 0, 88),
      rgb(114, 0, 104),
      transparent
    ),
    radial-gradient(
      circle at 70% 70%,
      rgb(212, 0, 159),
      rgb(212, 0, 88),
      rgb(114, 0, 104),
      transparent
    ),
    linear-gradient(
      122deg,
      rgb(212, 0, 159),
      rgb(212, 0, 88),
      rgb(114, 0, 104),
      rgb(212, 0, 159),
      rgb(212, 0, 88),
      rgb(114, 0, 104)
    );
  overflow: hidden;
}

header {
  height: 10%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2vw;
  font-weight: bold;
  letter-spacing: 0.5rem;
}

.slider-container-3d {
  width: 100%;
  position: relative;
  perspective: var(--perspective);
  overflow: hidden;
  /* Additional style */
  height: 75%;
}

.slider-container-3d .slider-3d {
  width: 90%;
  height: 80%;
  position: absolute;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  transform-style: preserve-3d;
}

.slider-container-3d .slider-3d .card-3d {
  width: var(--card-width);
  height: var(--card-height);
  position: absolute;
  transform: rotateY(calc(var(--card-group-index) * var(--card-rotate)))
    translateZ(var(--translate-z));

  /* additional */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  color: rgb(255, 255, 255);
  font-family: "Courier New", Courier, monospace;
  border-top-left-radius: 2%;
  border-top-right-radius: 10%;
  border-bottom-right-radius: 2%;
  border-bottom-left-radius: 10%;
}

/* Navigate container */
.navigate-container {
  width: var(--nav-width);
  height: 10%;
  position: absolute;
  bottom: var(--btn-width);
  left: 50%;
  translate: -50% 0;
  z-index: 10;
}

.slider-container-3d .slider-prev-btn,
.slider-container-3d .slider-next-btn {
  width: var(--btn-width);
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  aspect-ratio: 1;
  cursor: pointer;
  opacity: var(--btn-opacity);
  user-select: none;
}

.slider-container-3d .slider-prev-btn {
  background: url(./images/arrows/slider-prev-btn.png);
  background-size: 100%;
  left: 1%;
}

.slider-container-3d .slider-next-btn {
  background: url(./images/arrows/slider-next-btn.png);
  background-size: 100%;
  right: 1%;
}

.slider-container-3d .slider-prev-group-btn,
.slider-container-3d .slider-next-group-btn {
  width: var(--btn-width);
  aspect-ratio: 1;
  position: absolute;
  cursor: pointer;
  border-radius: 50%;
  scale: 0.7;
  user-select: none;
}

.slider-container-3d .slider-prev-group-btn {
  background: url(./images/arrows/slider-prev-group-btn.png);
  background-size: 100%;
  left: 0;
}

.slider-container-3d .slider-next-group-btn {
  background: url(./images/arrows/slider-next-group-btn.png);
  background-size: 100%;
  right: 0;
}

/* Dots container */
.slider-container-3d .dots-container {
  width: 50%;
  height: 10%;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  column-gap: calc(var(--slides) * 2%);
}

.slider-container-3d .dot {
  width: calc(10% / var(--slides));
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--dot-color);
}

.slider-container-3d .active-dot {
  background-color: var(--active-dot);
}

/* Animations for slider rotation */
.always-rotate-on {
  animation: always-rotate-on var(--always-rotate-on-duration)
    calc(var(--transition)) infinite linear;
  cursor: pointer;
}

.always-rotate-off {
  animation: always-rotate-off 1s ease-out;
  cursor: pointer;
}

@keyframes always-rotate-on {
  from {
    transform: rotateY(var(--current-rotate-angel));
  }
  to {
    transform: rotateY(var(--full-round));
  }
}
@keyframes always-rotate-off {
  from {
    transform: rotateY(var(--slider-current-rotate));
  }
  to {
    transform: rotateY(var(--current-rotate-angel));
  }
}
/* Additional style for test */
.card-1 {
  background: url(./images/art-12.jpg);
}
.card-2 {
  background: url(./images/art-13.jpg);
}
.card-3 {
  background: url(./images/256.jpg);
}
.card-4 {
  background: url(./images/257.jpg);
}
.card-5 {
  background: url(./images/art-1.jpg);
}
.card-6 {
  background: url(./images/259.jpg);
}
.card-7 {
  background: url(./images/art-2.jpg);
}

.card-8 {
  background: url(./images/261.jpeg);
}

.card-9 {
  background: url(./images/art-3.jpg);
}

.card-10 {
  background: url(./images/art-4.jpg);
}

.card-11 {
  background: url(./images/art-6.jpg);
}
.card-12 {
  background: url(./images/art-7.jpg);
}
.card-13 {
  background: url(./images/art-10.jpg);
}
.card-14 {
  background: url(./images/art-11.jpg);
}
.card {
  background-size: 100% 100%;
}
@keyframes pointer {
  to {
    rotate: -20deg;
  }
}
.pointer {
  z-index: 1000;
  position: absolute;
  transform-origin: bottom left;
  width: 5vw;
  aspect-ratio: 1;
  top: 40%;
  left: 85%;
  animation: pointer 0.7s 2s 4 linear alternate;
}
.pointer img {
  width: 100%;
}
.setting {
  width: 75%;
  height: 15%;
  margin: 2rem auto auto;
  font-size: 3rem;
  display: flex;
  justify-content: center;
  column-gap: 3vw;
  translate: 0 1rem;
}
.setting a {
  color: #fff;
  transition: 0.5s;
}
.setting a:hover {
  color: #00e2ff;
}
.modals-con {
  position: absolute;
  width: 100%;
  height: 52%;
  translate: 0 50%;
  top: -12%;
  left: 0;
}
.modals-con > div {
  width: 60%;
  height: 100%;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
  background-color: #ffffffe3;
  color: #005b6b;
  border-radius: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 2vw;
  font-weight: bold;
}
.modals-con > div div {
  cursor: pointer;
  transition: 0.5s;
}
.modals-con > div div:not(.signature):hover {
  scale: 1.1;
}
.modals-con > div span {
  position: absolute;
  top: 5%;
  color: rgb(255, 135, 22);
}
.modals-con > div i {
  position: absolute;
  top: 5%;
  right: 5%;
  color: #919191;
  cursor: pointer;
}
.features-modal p {
  margin: auto;
  width: 90%;
  font-size: 1.1vw;
  line-height: 4rem;
}
.features-modal div:hover {
  scale: 1 !important;
}
.signature {
  width: 15vw;
  height: 14vh;
  position: absolute;
  left: 50%;
  bottom: 10%;
  translate: -50% 0;
  transition: 0.5s;
}
.signature a {
  background: url(./images/singature.png);
  background-size: 100% 100%;
}
@media (max-width: 767px) {
  header {
    width: 75%;
    margin: auto;
    text-align: center;
    font-size: 5vw;
  }
  .setting {
    margin-top: 0;
    font-size: 7vw;
    column-gap: 7vw;
  }
  .slider-container > div button {
    padding: 0.5rem;
    margin-bottom: 0;
    font-size: 1.2rem;
  }
  .modals-con {
    height: 70%;
    top: -25%;
  }
  .modals-con > div {
    width: 74%;
    margin-bottom: 20%;
    font-size: 6vw;
  }
  .modals-con > div i {
    top: 2%;
    right: 2%;
  }
  .features-modal p {
    margin: auto;
    width: 90%;
    font-size: 2.7vw;
    line-height: 1.3rem;
  }
  .signature {
    width: 60vw;
    scale: 0.8;
  }
  .pointer {
    width: 12vw;
    top: 70%;
    left: 43%;
  }
}