:root {
  --bs-dark-rgb: rgb(24, 17, 60);
}

body {
  background-color: #08001c;
  background-image: url('../assets/images/katina-bg-gradient-2.png');
  background-image: url('bg.png');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
}

*,
*::before,
*::after {
  font-family: inherit;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5% !important;
}


html.generate body.generate {
  font-size: 1rem;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: poppins, sans-serif;
  color: #fff;
}


html,
body {
  font-size: 1.6rem;
  margin: 0;
  justify-content: center;
  font-family: poppins, sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1 {
  margin: 0.2em 0;
}

.text-center {
  text-align: center;
}

.top-bar {
  position: absolute;
  width: 90%;
  top: 0;
  left: 0;
  text-align: center;
  padding: 30px;
  z-index: 2;
  left: 0;
  right: 0;
  margin: auto;
}

.main-text {
  position: absolute;
  width: 100%;
  height: 120px;
  top: 120px;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  z-index: 2;
  display: none;
}

.container {
  max-width: 600px;
  width: 85%;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 100px;
  padding: 20px;
  font-size: 1.6rem;
}

.container p {
  margin-bottom: 20px;
}

.container-content {
  position: relative;
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 1;
  max-width: 1000px;
}

.container-content p {
  margin-bottom: 20px;
  line-height: 1.6;
}


.cardCounters {
  margin-top: 20px;
}

.cardCounter {
  bottom: 20px;
  left: 20px;
  color: #fff;
  font-size: 2rem;
  z-index: 2;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 40px;
  width: 40px;
  border-radius: 50%;
  padding: 10px;
  text-align: center;
  line-height: 2;
  transition: all 1s;
}

.cardCounter.selected {
  background-color: #754ffe;
  color: #fff;
}


h1 {
  font-size: 3.4rem;
}

h2 {
  font-size: 2rem;
  font-weight: 300;
  margin-top: 0px;
}

.top-bar img {
  max-width: 200px;
}


ul {
  list-style: none;
}

ul li {
  opacity: 0;
}

a,
a:link,
a:visited {
  text-decoration: none;
}


@-webkit-keyframes hover {
  to {
    translate: 0px 30px;
  }
}

@keyframes hover {
  to {
    translate: 0px 30px;
  }
}

canvas {
  z-index: -1;
}

.hands {
  --cards: 32;
  --curvature: 80deg;
  counter-reset: cards;
  position: absolute;
  height: 100%;
  bottom: -100px;
  width: 100%;
  display: flex;
  justify-content: center;
  transformx: translateY(10vmin);
  transform-style: preserve-3d;
}

.hands>* {
  --hue: calc(360deg / var(--cards) * var(--index));
  --curve: calc(var(--curvature) * ((var(--index) - (var(--cards) - 1) / 2) / var(--cards)));
  position: absolute;
  counter-increment: cards;
  flex: 0 0 auto;
  width: 12vw;
  max-width: 15vh;
  aspect-ratio: 2/3;
  transform-origin: 50% 100%;
  transform: rotate(var(--curve)) translateY(-225%);
  transition: all 0.3s;
  position: absolute;
  cursor: pointer;
  font-size: 7vmin;
  transform-style: preserve-3d;
  bottom: -450px;
}

.hands>*::before {
  content: " ";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  color: hsl(var(--hue), 50%, 30%);
  font-weight: bold;
  width: 100%;
  height: 100%;
  border: solid 1px hsla(var(--hue), 50%, 40%, 1);
  background-color: #ccc;
  background-image: url("../assets/images/card-back-katina-white.png"), linear-gradient(to bottom right, hsl(var(--hue), 20%, 20%), hsl(calc(var(--hue) - 45deg), 40%, 50%));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.3s, translate 0s;
  box-shadow: 0px 4px 10px hsla(var(--hue), 80%, 80%, 0);
  border-radius: 8px;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.hands>*:hover {
  -webkit-animation: hover 1s ease-in-out infinite alternate forwards;
  animation: hover 1s ease-in-out infinite alternate forwards;
}

.hands>*:hover::before {
  transform: translateY(-42.5%) rotate(calc(var(--curve) * -1)) scale(1.2);
  transition-duration: 0.2s, 0s;
  box-shadow: 0px 4px 15px hsla(var(--hue), 80%, 70%, 0.6);
  border: solid 2px hsla(var(--hue), 80%, 70%, 1);
  color: hsl(var(--hue), 60%, 80%);
  translate: 0px 0px 1px;
}

@media (max-width: 600px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .hands {
    bottom: 300px;
  }

  .top-bar {
    padding: 0;
    padding-top: 20px;
  }

  .hands {
    --cards: 16;
    --curvature: 180deg;
  }

  body.generate,
  html.generate {
    overflow: hidden !important;
    width: 100vw !important;
    height: 100vh !important;
    position: relative !important;
  }


  .hands>* {
    width: 20vw;
    max-width: 20vh;
    font-size: 5vmin;
  }
}

.continue-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  z-index: 997;
  display: none;

}

.continue-button {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  background-color: #754ffe;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 2.6rem;
  cursor: pointer;
  transition: all 0.3s;
  width: 220px;
  height: 40px;
  text-align: center;
  z-index: 998;
  box-shadow: 0px 0px 100px 5px hsla(0, 0%, 0%, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: none;
  transition: all 0.3s;
}

.continue-button:hover {
  transform: scale(1.05);
}




.continue-cancel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  color: #fff;
  display: none;
  width: 200px;
  height: 90px;
  z-index: 999;
  text-align: center;
  font-size: 1.5rem;
  transform: translateY(100px);
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.3s;
}

.continue-cancel:hover {
  opacity: 1;
}


.tarot-form {
  position: absolute;
  display: none;
  width: 400px;
  height: min-content;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 28px;
  background: linear-gradient(345deg, rgb(34, 34, 34) 0%, rgba(34, 34, 34, 1) 100%);
  border-radius: 16px;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset;
}

.form-control {
  margin: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  margin-bottom: 16px;
  font-size: 2rem;
  max-width: 376px;
  border: none;
  padding: 10px 12px;
  border-radius: 8px;
}

.btn-submit {
  background-color: #754ffe;
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 2.6rem;
  cursor: pointer;
  transition: all 0.3s;
  width: 376px;
  height: 40px;
  border: none;
}

.btn-submit:hover {
  color: #fff;
  outline: none;
  transform: scale(1.05);
}


.loading-pulse {
  position: relative;
  width: 6px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-animation: pulse 750ms infinite;
  animation: pulse 750ms infinite;
  -webkit-animation-delay: 250ms;
  animation-delay: 250ms;
  border-radius: 10px;
  left: 0;
  right: 0;
  margin: auto;
}

.loading-pulse:before,
.loading-pulse:after {
  content: "";
  position: absolute;
  display: block;
  height: 16px;
  width: 6px;
  background: rgba(255, 255, 255, 0.2);
  top: 50%;
  border-radius: 10px;
  transform: translateY(-50%);
  -webkit-animation: pulse 750ms infinite;
  animation: pulse 750ms infinite;
}

.loading-pulse:before {
  left: -12px;
}

.loading-pulse:after {
  left: 12px;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}

.form-loading {
  display: none;
  width: 100%;
  height: 100%;
  padding: 100px 20px;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 300px;
}

.form-loading p {
  margin-top: 20px;
  font-size: 2rem;
}

.form-loading p span {
  display: block;
  font-size: 1.4rem;
  opacity: 0.5;
}


@-webkit-keyframes pulse {
  50% {
    background: white;
  }
}

@keyframes pulse {
  50% {
    background: white;
  }
}

.hands:has(li:nth-child(1)) {
  --cards: 1;
}

.hands>*:nth-child(1) {
  --index: 0;
}

.hands:has(li:nth-child(2)) {
  --cards: 2;
}

.hands>*:nth-child(2) {
  --index: 1;
}

.hands:has(li:nth-child(3)) {
  --cards: 3;
}

.hands>*:nth-child(3) {
  --index: 2;
}

.hands:has(li:nth-child(4)) {
  --cards: 4;
}

.hands>*:nth-child(4) {
  --index: 3;
}

.hands:has(li:nth-child(5)) {
  --cards: 5;
}

.hands>*:nth-child(5) {
  --index: 4;
}

.hands:has(li:nth-child(6)) {
  --cards: 6;
}

.hands>*:nth-child(6) {
  --index: 5;
}

.hands:has(li:nth-child(7)) {
  --cards: 7;
}

.hands>*:nth-child(7) {
  --index: 6;
}

.hands:has(li:nth-child(8)) {
  --cards: 8;
}

.hands>*:nth-child(8) {
  --index: 7;
}

.hands:has(li:nth-child(9)) {
  --cards: 9;
}

.hands>*:nth-child(9) {
  --index: 8;
}

.hands:has(li:nth-child(10)) {
  --cards: 10;
}

.hands>*:nth-child(10) {
  --index: 9;
}

.hands:has(li:nth-child(11)) {
  --cards: 11;
}

.hands>*:nth-child(11) {
  --index: 10;
}

.hands:has(li:nth-child(12)) {
  --cards: 12;
}

.hands>*:nth-child(12) {
  --index: 11;
}

.hands:has(li:nth-child(13)) {
  --cards: 13;
}

.hands>*:nth-child(13) {
  --index: 12;
}

.hands:has(li:nth-child(14)) {
  --cards: 14;
}

.hands>*:nth-child(14) {
  --index: 13;
}

.hands:has(li:nth-child(15)) {
  --cards: 15;
}

.hands>*:nth-child(15) {
  --index: 14;
}

.hands:has(li:nth-child(16)) {
  --cards: 16;
}

.hands>*:nth-child(16) {
  --index: 15;
}

.hands:has(li:nth-child(17)) {
  --cards: 17;
}

.hands>*:nth-child(17) {
  --index: 16;
}

.hands:has(li:nth-child(18)) {
  --cards: 18;
}

.hands>*:nth-child(18) {
  --index: 17;
}

.hands:has(li:nth-child(19)) {
  --cards: 19;
}

.hands>*:nth-child(19) {
  --index: 18;
}

.hands:has(li:nth-child(20)) {
  --cards: 20;
}

.hands>*:nth-child(20) {
  --index: 19;
}

.hands:has(li:nth-child(21)) {
  --cards: 21;
}

.hands>*:nth-child(21) {
  --index: 20;
}

.hands:has(li:nth-child(22)) {
  --cards: 22;
}

.hands>*:nth-child(22) {
  --index: 21;
}

.hands:has(li:nth-child(23)) {
  --cards: 23;
}

.hands>*:nth-child(23) {
  --index: 22;
}

.hands:has(li:nth-child(24)) {
  --cards: 24;
}

.hands>*:nth-child(24) {
  --index: 23;
}

.hands:has(li:nth-child(25)) {
  --cards: 25;
}

.hands>*:nth-child(25) {
  --index: 24;
}

.hands:has(li:nth-child(26)) {
  --cards: 26;
}

.hands>*:nth-child(26) {
  --index: 25;
}

.hands:has(li:nth-child(27)) {
  --cards: 27;
}

.hands>*:nth-child(27) {
  --index: 26;
}

.hands:has(li:nth-child(28)) {
  --cards: 28;
}

.hands>*:nth-child(28) {
  --index: 27;
}

.hands:has(li:nth-child(29)) {
  --cards: 29;
}

.hands>*:nth-child(29) {
  --index: 28;
}

.hands:has(li:nth-child(30)) {
  --cards: 30;
}

.hands>*:nth-child(30) {
  --index: 29;
}

.hands:has(li:nth-child(31)) {
  --cards: 31;
}

.hands>*:nth-child(31) {
  --index: 30;
}

.hands:has(li:nth-child(32)) {
  --cards: 32;
}

.hands>*:nth-child(32) {
  --index: 31;
}

@media screen and (max-height: 500px) {
  .hands {
    --cards: 32;
    --curvature: 80deg;
    counter-reset: cards;
    position: absolute;
    height: 100%;
    bottom: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    transform-style: preserve-3d;
  }
}


@media screen and (max-width: 1280px) {
  .top-bar {
    max-width: 100%;
    padding: 0;
    padding-top: 40px;
  }
}

@media screen and (max-width: 700px) {
  .tarot-form {
    max-width: 300px;
  }

  .form-control,
  .btn-submit {
    width: 276px;
  }
    .sub-area {
      padding: 20px;
    }

    .subscribe-button {
      font-size: 18px !important;
    }
    .sub-title {
      font-size: 20px !important;
    }

}