body {
    background-image: url("Textures/BURLOAK.JPG");
    background-attachment: fixed;
    background-color: black;
}

.main {
    background-image: url("Textures/J5doXe.png");
    width: 90%;
    height: 300vh;
    margin: 0 auto;
    padding-top: 20px;
    border: dotted greenyellow 5px;
}
.main_outer {
    background-image: url("Textures/pattern\ 19.jpg");
    width: 80%;
    height: 310vh;
    padding-top: 7vh;
    margin: 0 auto;
    border: solid black 5px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0);
}

.main img {
    display: block;
    margin: 0 auto;
}

.title {
    margin: 0;
    text-align: center;
    font-family: Revista;
    color: pink;
    font-size: 5vw;
    text-shadow: 5px 5px black;
}

.overlay-image {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("Textures/flesh-frame.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 9999;
  pointer-events: none;
}


footer iframe {
    display: none;
}

.spawned-image {
    position: fixed;
    width: 300px; /* Adjust size */
    height: auto;
    pointer-events: none; /* Allows clicking through images */
    animation: fadeOut 3s forwards;
}
@keyframes fadeOut {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

.wavy {
    position: relative;
}

.wavy span {
    position: relative;
    display: inline-block;
    animation: animate 1s ease-in-out infinite;
    animation-delay: calc(0.1s * var(--i));
}
@keyframes animate {
    0%
    {
        transform: translateY(0px);
    }
    50%
    {
        transform: translateY(-20px);
    }
    100%
    {
        transform: translateY(0px);
    }
}

  .scene {
    width: 320px;
    height: 180px;
    perspective: 900px;
    margin: 100px auto;
  }

  .prism {
    width: 320px;
    height: 180px;
    position: relative;
    transform-style: preserve-3d;
    animation: spin 8s linear infinite;
  }

  @keyframes spin {
    from { transform: rotateX(-22deg) rotateY(0deg); }
    to   { transform: rotateX(-22deg) rotateY(360deg); }
  }

  .face {
    position: absolute;
    overflow: hidden;
  }

  .face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Front & Back: 320x180 (16:9) */
  .front, .back   { width: 320px; height: 180px; top: 0; left: 0; }
  .front          { transform: rotateY(  0deg) translateZ(160px); }
  .back           { transform: rotateY(180deg) translateZ(160px); }

  /* Left & Right: 320x180 (square sides — 320 deep, 180 tall) */
  .left, .right   { width: 320px; height: 180px; top: 0; left: 0; }
  .right          { transform: rotateY( 90deg) translateZ(160px); }
  .left           { transform: rotateY(-90deg) translateZ(160px); }

  /* Top & Bottom: 320x320 (square) */
  .top, .bottom   { width: 320px; height: 320px; left: 0; top: calc((180px - 320px) / 2); }
  .top            { transform: rotateX( 90deg) translateZ(90px); }
  .bottom         { transform: rotateX(-90deg) translateZ(90px); }