<style>
  
  .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 25px;
  padding: 15px 0;
  background: rgba(0, 0, 0, 0.95);
  border-bottom: 1px solid #E0B119;
  z-index: 9999; /* zawsze nad resztą */
}


.menu a {
  color: #E0B119;
  text-decoration: none;
  font-size: 18px;
  padding: 10px 18px;
  border: 1px solid #E0B119;
  position: relative;
  background: rgba(0, 0, 0, 0.6);
  letter-spacing: 1px;
  transition: color 0.3s ease, box-shadow 0.3s ease;
}

/* wewnętrzna ramka */
.menu a::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid #E0B119;
  opacity: 0.6;
  pointer-events: none;
}

/* tarot glow */
.menu a:hover {
  color: #C4DFFF;
  box-shadow:
    0 0 8px rgba(224, 177, 25, 0.6),
    0 0 16px rgba(224, 177, 25, 0.4);
}

/* zachowaj odstępy między kartami */
.menu {
  gap: 25px;
}



/* żeby content nie był pod menu */
.container {
  margin-top: 80px;
}

  
  html, body {
  height: 100%;      /* konieczne, żeby kontener mógł wypełnić całą wysokość */
  margin: 0;
}
  h2 {
  color: #C4DFFF;
}
p {
  color: #C4DFFF;
}
.container {
  height: 100vh;
  display: flex;         /* ustawia boxy w jednym rzędzie */
  gap: 50px;             /* odstęp między boxami */
  padding: 0 20px;
  box-sizing: border-box;
  justify-content: center; /* wyśrodkowanie w poziomie */
  align-items: center;     /* wyśrodkowanie w pionie */
  text-align: center;      /* wyśrodkowanie tekstu */
  margin-top: 80px; /* wysokość menu */
}

 .box {
  background-color: rgba(0, 0, 0, 0.85);
  border: 1px solid #E0B119;
  width: 600px;
  margin: 40px auto;
  padding: 30px;
  position: relative;          /* konieczne */
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(224, 177, 25, 0.15);
  max-width: 50%;     /* ograniczenie przy mniejszych ekranach */
}

/* wewnętrzna ramka – tarot card frame */
.box::before {
  content: "";
  position: absolute;
  inset: 8px;                  /* odstęp od krawędzi */
  border: 1px solid #E0B119;
  opacity: 0.5;
  pointer-events: none;
}


  .box:first-child {
  flex: 1;   /* węższy bok */
}

.box:nth-child(2) {
  flex: 2;   /* środek szerszy */
}

.box:last-child {
  flex: 1;   /* węższy bok */
}
 
 .wave-text span {
  display: inline-block;
  animation: wave 1.6s ease-in-out infinite;
}

.wave-text span:nth-child(1)  { animation-delay: 0s; }
.wave-text span:nth-child(2)  { animation-delay: 0.1s; }
.wave-text span:nth-child(3)  { animation-delay: 0.2s; }
.wave-text span:nth-child(4)  { animation-delay: 0.3s; }
.wave-text span:nth-child(5)  { animation-delay: 0.4s; }
.wave-text span:nth-child(6)  { animation-delay: 0.5s; }
.wave-text span:nth-child(7)  { animation-delay: 0.6s; }
.wave-text span:nth-child(8)  { animation-delay: 0.7s; }
.wave-text span:nth-child(9)  { animation-delay: 0.8s; }
.wave-text span:nth-child(10) { animation-delay: 0.9s; }
.wave-text span:nth-child(11) { animation-delay: 1s; }
.wave-text span:nth-child(12) { animation-delay: 1.1s; }
.wave-text span:nth-child(13) { animation-delay: 1.2s; }
.wave-text span:nth-child(14) { animation-delay: 1.3s; }
.wave-text span:nth-child(15) { animation-delay: 1.4s; }
.wave-text span:nth-child(16) { animation-delay: 1.5s; }
.wave-text span:nth-child(17) { animation-delay: 1.6s; }
.wave-text span:nth-child(18) { animation-delay: 1.7s; }
.wave-text span:nth-child(19) { animation-delay: 1.8s; }
.wave-text span:nth-child(20) { animation-delay: 1.9s; }
.wave-text span:nth-child(21) { animation-delay: 2.0s; }
.wave-text span:nth-child(22) { animation-delay: 2.1s; }
.wave-text span:nth-child(23) { animation-delay: 2.2s; }
.wave-text span:nth-child(24) { animation-delay: 2.3s; }
.wave-text span:nth-child(25) { animation-delay: 2.4s; }
.wave-text span:nth-child(26) { animation-delay: 2.5s; }
.wave-text span:nth-child(27) { animation-delay: 2.6s; }
.wave-text span:nth-child(28) { animation-delay: 2.7s; }
.wave-text span:nth-child(29) { animation-delay: 2.8s; }
.wave-text span:nth-child(30) { animation-delay: 2.9s; }
.wave-text span:nth-child(31) { animation-delay: 3s; }

@keyframes wave {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}


.tarot-card-container {
  perspective: 1000px;
  margin: 20px auto;
  width: 200px;
  height: 270px;
  align-content: center;
}

.tarot-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.tarot-card .front,
.tarot-card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #E0B119;
  border-radius: 10px;
  background: rgba(0,0,0,0.85);
  color: #E0B119;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  font-family: 'Times New Roman', serif;
  font-size: 18px;
}

.tarot-card .back {
  transform: rotateY(180deg);
  background: lightblue url("sparkle.gif");
  text-shadow: rgba(255,235,201,1) 0px 0px 18px;
}




</style>
