h1.font-cycler {
  /* Apply the animation */
  animation: changeFont 1.5s 2; /* Adjust duration (1.5s) for speed */
}

@keyframes changeFont {
  0% {
    font-family: 'Be Vietnam Pro', sans-serif;
  }
  15% {
    font-family: 'Arial', sans-serif;
  }
  30% {
    font-family: 'Lugrasimo', Courier, monospace;
  }
  45% {
    font-family: 'Helvetica', Geneva, sans-serif;
  }
  60% {
    font-family: 'Lugrasimo', monospace;
  }
  75% {
    font-family: 'Special Elite', cursive;
  }
  90% {
    font-family: 'Helvetica', cursive;
  }
  /* 100% will loop back to 0% font */
}

/* Optional: Add styles for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  h1.font-cycler {
    animation: none;
    /* Set a default, readable font */
    font-family: 'Arial', Helvetica, sans-serif;
  }
}


.shimmer {
    color: rgba(255, 255, 255, 0.1);
    background: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff), color-stop(0.5, #248c7c));
    background: -moz-gradient(linear, left top, right top, from(#fff), to(#fff), color-stop(0.5, #248c7c));
    background: gradient(linear, left top, right top, from(#fff), to(#fff), color-stop(0.5, #248c7c));
    -webkit-background-size: 125px 100%;
    -moz-background-size: 125px 100%;
    background-size: 125px 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-animation-name: shimmer;
    -moz-animation-name: shimmer;
    animation-name: shimmer;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: #fff;
}

@-moz-keyframes shimmer {
    0% {
            background-position: top left;
    }
    100% {
            background-position: top right;
    }
}

@-webkit-keyframes shimmer {
    0% {
            background-position: top left;
    }
    100% {
            background-position: top right;
    }
}

@-o-keyframes shimmer {
    0% {
            background-position: top left;
    }
    100% {
            background-position: top right;
    }
}

@keyframes shimmer {
    0% {
            background-position: top left;
    }
    100% {
            background-position: top right;
    }
}

.no-hover:hover {
    transform: none; /* Disable hover transformations */
    color: white; /* Reset hover text color */
  }


  .book-3d {
    --book-thickness: 26px;
    --cover-color: #a7a7a7;
  
    perspective: 1000px;
    max-width: 250px;
    margin: 0 auto;
  
  }
  
  .book-3d__inner {
    position: relative;
    transform-style: preserve-3d;
  transform: rotateY(-25deg)
  }
  
  /* Book Pages */
  .book-3d__inner::before {
    position: absolute;
    content: ' ';
    left: 100%;
    top: 1%;
    width: calc( var(--book-thickness) * 2 );
    height: 98%;
    transform: translate(-55%,0) rotateY( 90deg );
    background: linear-gradient( 90deg , #fff 0%, hsl(0, 0%, 94%) 5%, #fff 10%, hsl(0, 0%, 94%) 15%, #fff 20%, hsl(0, 0%, 94%) 25%, #fff 30%, hsl(0, 0%, 94%) 35%, #fff 40%, hsl(0, 0%, 94%) 45%, #fff 50%, hsl(0, 0%, 94%) 55%, #fff 60%, hsl(0, 0%, 94%) 65%, #fff 70%, hsl(0, 0%, 94%) 75%, #fff 80%, hsl(0, 0%, 94%) 85%, #fff 90%, hsl(0, 0%, 94%) 95%, #fff 100% );
  }
  
  /* Rear Cover */
  .book-3d__inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 1%;
    width: 100%;
    height: 100%;
    transform: translateZ( calc( var(--book-thickness) * -1 ) );
    background-color: var(--cover-color);
    border-radius: 0 2px 2px 0;
    box-shadow: -10px 0 50px 10px rgba(0,0,0, 0.3);
  }
  
  .book-3d__cover {
    display:block;
    width:100%;
    height: auto;
    max-height: 300px;

    border-radius: 0px 2px 2px 0px;
    transform: translateZ( var(--book-thickness) );
    box-shadow: 5px 5px 20px rgba(0,0,0, 0.1);
  }

  /* marquee css  */
  
  .animate-infinite-scroll {
    animation: infinite-scroll 25s linear infinite;
  }

  @keyframes infinite-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

      /* Shake animation */
      @keyframes shake {
        0% { transform: translate(0, 0) rotate(0); }
        20% { transform: translate(-2px, 0) rotate(-2deg); }
        40% { transform: translate(2px, 0) rotate(2deg); }
        60% { transform: translate(-2px, 0) rotate(-1deg); }
        80% { transform: translate(2px, 0) rotate(1deg); }
        100% { transform: translate(0, 0) rotate(0); }
      }
      
      /* Class to trigger the animation */
      .shake {
        animation: shake 0.5s ease-in-out;
      }