body {
margin:auto;
background-image: url('../img/bg.jpg');
background-size: auto;
background-attachment: fixed;
}

a:link, a:visited, a:active {
   color: #000aaa;
    text-decoration: none;
}

a:hover {
    color: black;
    text-decoration: underline;
}


  


.footer-box {
  position: absolute;
  top: 300%;
  left: 5%;
  width: 40%;
  z-index: 999;
}






.blue {
    position:fixed;
    top: 30%;
    left: 10%;
}

.swirl {
    position:fixed;
    top: 10%;
    left: 25%;
    opacity: .7;
    z-index: 2;
}

.endless {
    position:fixed;
    bottom: 0;
    left: 50%;
    opacity: 1;
    z-index: 3;
}

.headlessrunner {
    position:fixed;
    height: auto;
    top: 20%;
    left: 20%;
    opacity: 1;
    z-index: 3;
    width: 50%;
    }
.papers {
    position:fixed;  
    height: auto;
    top: 50%;
    left: 50%;
    opacity: 1;
    z-index: 2;
    }
    
    .luv {
    position:fixed;  
    height: auto;
    bottom: 0;
    right: 0;
    opacity: 1;
    z-index: 2;
    }

    .luckorjudgement {
    position: fixed;  
    height: auto;
    top: -10%;
    left: 10%;
    opacity: 1;
    z-index: -1;
    }   

    .scroll-container {
  height: 300vh; /* Determines scroll duration */
}
.sticky-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  perspective: 1000px; /* Essential for 3D depth */
  z-index: 999;
}

@keyframes zoom-out {
    0% {
        transform: translateZ(0) scale(1);
        opacity: 0;
    }
    1% {
        transform: translateZ(50px) scale(1.1);
        opacity: 0.5;
    }

    25% {
        transform: translateZ(150px) scale(2);
        opacity: 1;
    }
    50% {
        transform: translateZ(400px) scale(4);
        opacity: 1;
    }
    100% {
        transform: translateZ(500px) scale(5);
        opacity: 0;
  }
}

.bbh-bartle-regular {
  font-family: "BBH Bartle", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.kleeone {
  font-family: "Klee One", cursive;
  font-weight: 400;
  font-style: normal;
}


.zoom-text {

background-image: url('../img/boom.webp');
     background-size: cover;
    width: 600px;  
    height: 400px;
     display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    text-align: center;      /* Centers multi-line text */
     font-family: "BBH Bartle", sans-serif;
    position: fixed;
    top: 30%;
    -webkit-text-stroke: 2px #ff6600;
    left: 25%;
    color: #000;
     filter: blur(1px); 
    font-size: 58px;
    font-style: italic;
  animation: zoom-out linear both;
  animation-timeline: scroll(root); /* Links animation to page scroll */
  animation-range: 0% 50%; /* Animation occurs during first half of scroll */
  
}
@keyframes zoom-out {
    0% {
        transform: translateZ(0) scale(1);
        opacity: 0;
    }
    1% {
        transform: translateZ(50px) scale(1.1);
        opacity: 0.5;
    }

    25% {
        transform: translateZ(150px) scale(2);
        opacity: 1;
    }
    50% {
        transform: translateZ(400px) scale(4);
        opacity: 0;
    }
    100% {
        transform: translateZ(500px) scale(5);
        opacity: 0;
  }
}

.headlessrunnershake {
  animation: shake-constant 0.5s infinite;
}

@keyframes shake-constant {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.funky {
 animation: funk 0.5s infinite;
 
}
@keyframes funk {
  0% { transform: translate(2px, 2px) rotate(-1deg); }
  25% { transform: translate(-1px, 1px) rotate(-1deg); }
  50% {transform: translate(1px, -2px) rotate(0deg); }
  75% {transform: translate(-1px, 1px) rotate(-1deg); }
  100% {transform: translate(2px, 3px) rotate(1deg); }
}


/* speech bubble */
.comic-bubble {
  position: relative;
  width: 100%; 
  padding: 10%; 
  background-color: rgba(255, 255, 215, 0.9);
  color: #333;
  font-family: "Klee One", cursive;
  font-style: italic;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 20px;
  text-align: left;
  border: 2px solid #000000;
  border-radius: 60px;
  box-shadow: 2px 2px 0px #000000;
  box-sizing: border-box; 
}

/* Tail */
.comic-bubble::after {
  content: "";
  position: absolute;
  bottom: 99.9%; 
  right: 14px; 
  width: 0;
  height: 0;
  border-style: solid;
   border-width: 0 0 70px 49px;
  border-color: transparent transparent rgba(255, 255, 215, 1) transparent;
  z-index: 33;
 transform: skewX(-35deg); 
  
  filter: 
    drop-shadow(2px 0 0 #000000) 
    drop-shadow(-1px -2px 0 #000000)
     
}