html, body {
    height: 100%;
    font-family: "Inter" , sans-serif;
    margin: 0;
    color: #0f172a;
    /*background-color: #1c53d4;*/
    display: grid;
    place-items: center;
    background:
    radial-gradient(circle at 20% 20%, rgba(138, 43, 226, 0.25), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(72, 61, 139, 0.25), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(199, 21, 133, 0.2), transparent 50%),
    linear-gradient(180deg, #0b0a1a 0%, #120f2e 50%, #080614 100%);
    background-attachment: fixed;
    color: #f5f3ff;
    font-family: "Georgia", "Garamond", serif;
     animation: mysticalGlow 5s ease-in-out infinite;
}


body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,0.5), transparent);
  opacity: 0.4;
  pointer-events: none;
}

@keyframes mysticalGlow {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: top;
}

.container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto;
  /*background-color: dodgerblue;*/
  padding: 10px;
  gap:10px;
  /*border: solid;
  border-color: #4379f9;*/
}
.container div {
  /*background-color: #aafe00;*/
  /*border:1px solid black;*/
  /*padding: 10px;*/
  /*font-size: 30px;*/
  /*text-align: center;*/
  height:50px;
  width:30px;
  border-radius: 6px;
}

.cardback {
    width: 30px;
    border-radius: 3px;
    height:50px;
    vertical-align: middle;
}
.cards{

}

.reversed {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}





.pulled_cards{
  
  display: grid;
  grid-template-columns: auto auto auto;
  width: 400px;
  height: 200px;
  /*border: solid;*/
  /*border-color: #eb216f;*/
  margin-left: -30px;
  
  
}

.first_card{
  
}

.second_card{
 margin-left: 70px;
}

.third_card{
 margin-left: 70px;
}

#first_card_image{
  position: absolute;
  width:120px;
  height: 180px;
  border-radius: 10px;
  
}

#second_card_image{
  position: absolute;
  width:120px;
  height: 180px;
  border-radius: 10px;
  
}

#third_card_image{
  position: absolute;
  width:120px;
  height: 180px;
  border-radius: 10px;
  
}

.flipper{
    /* flip vertically */
    transform: scaleY(-1);
}


.tarot-card {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Initial shadow */
  transition: box-shadow 0.3s ease;
}

.tarot-card:hover {
  box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.4);  /* Stronger, shifted shadow */
  transform: scale(1.05); /* Slightly larger */
}

.what_you_got:hover{
  transform:scale(1.1);
}



.fading {
  animation: fadeOut 1s ease-in-out forwards;
  pointer-events: none; /* Disable clicks during animation */
}

@keyframes fadeOut {
  from {
    opacity: 1; /* Initial state - fully visible */
  }
  to {
    opacity: 0; /* Final state - completely transparent */
  }
}


.position_name{
  margin-left: auto;
}













/*
.features {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: clamp(32px, 5vw, 80px);
}
.features article {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px;
  background: #fff;
}
@media (max-width: 1900px) {
  .hero .copy, .hero .visual {
    grid-column: 1 / -1;
  }
}*/

.card {

  width: 30px;

  height: 55px;

  position: relative;

  perspective: 1000px;

  margin: 0 auto;

  transition: opacity 1s;
}

.profile-image {

	border-radius: 10%;

	overflow: hidden;

	width: 275px;

	height: 275px;

	position: relative;

	img {

		position: absolute;

		top: 50%;

		left: 50%;

		transform: translate(-50%, -50%);

		width: 100%;

	}

}

.card-face {

  width: 100%;

  height: 100%;

  position: absolute;

  backface-visibility: hidden;

  border: 3px solid;

  border-image-source: linear-gradient(45deg, red, yellow, blue);

  border-image-slice: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-around;

  padding: 20px;

  box-sizing: border-box;

  font-family: Arial, sans-serif;

  color: #333;

  background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);

  background-size: 500% 500%;

  animation: Gradient 15s ease infinite;

  transition: transform 1s;

}

.front {

  transform: rotateY(0deg);

}

.back {

  transform: rotateY(180deg);

}

.card.is-flipped .front {

  transform: rotateY(-180deg);

}

.card.is-flipped .back {

  transform: rotateY(0deg);

}

.name, .intro, .details {

  text-align: center;

}

.close-btn {

  position: absolute;

  top: 10px;

  right: 10px;

  background: none;

  border: none;

  font-size: 20px;

  cursor: pointer;

}

.more-info {

  padding: 10px 20px;

  border: 1px solid #3498db;

 background-color: transparent;

  color: #333;

  font-size: 1em;

  font-weight: 500;

  cursor: pointer;

  transition: background 0.3s;

  border-image-source: linear-gradient(45deg, green, pink, blue);

  border-image-slice: 1;

  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.6);

}

.more-info:hover {

  background: #86EBAE;

}

.socials{

  margin: 30px 0px 20px 0px;

}

.socials a {

  margin: 0 10px;

  padding: 5px 8px;

  border-radius: 20%;

  color: white;

  background-color: black;

  text-decoration: none;

}

.buttons {

  display: flex;

  justify-content: space-around;

  margin-top: 20px;

}

.team-member {

  padding: 10px 20px;

  border: none;

  color: #333;

  background: #86EBAE;

  cursor: pointer;

  transition: background 0.3s;

}

.team-member:hover {

  background: #ddd;

}

@keyframes Gradient {

  0% {

    background-position: 0% 50%;

  }

  50% {

    background-position: 100% 50%;

  }

  100% {

    background-position: 0% 50%;

  }

}