html {
  scroll-behavior: smooth;
}
@font-face {
    font-family: 'CustomFont';
    src: url('./font/BricolageGrotesque48ptCondensed-SemiBold-BF648bd57a024f6.ttf') format('woff2');
         /* url('fonts/CustomFont.woff') format('woff'); */
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'CustomFontq';
    src: url('./font/Kitschy\ Retro\ DEMO.ttf') format('woff2');
         /* url('fonts/CustomFont.woff') format('woff'); */
    font-weight: normal;
    font-style: normal;
}


@font-face {
  font-family: 'Roboto-Font';
  src: url('./font/Roboto-Regular.ttf') format('woff2');
       /* url('fonts/CustomFont.woff') format('woff'); */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'heading-font';
  src: url('./font/LuckiestGuy.ttf') format('woff2');
       /* url('fonts/CustomFont.woff') format('woff'); */
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'numfont';
    src: url('./font/Kageno\ Bold.otf') format('woff2');
         /* url('fonts/CustomFont.woff') format('woff'); */
    font-weight: normal;
    font-style: normal;
}

 .navfontFont {
  
    font-family: 'CustomFont', sans-serif;
    }

    body {
  
      font-family: 'CustomFont', sans-serif;
      }

    .fontNum{
     font-family: 'numfont', sans-serif !important;
    }

    h2, h1, h3, .headingFont{

      font-family: 'heading-font', sans-serif !important;

  }



    .pixel-border-mobile {
      border: 2px solid black;
    }

    .pixel-border {
      border: 2px solid black;
    }
    .pixel-border:hover {
      border: 2px solid orangered;
    }
    .pixelated {
      image-rendering: pixelated;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .animate-fade-in {
      animation: fadeIn 1s ease-in forwards;
    }
    @keyframes scaleBounce {
      0% { transform: scale(0); }
      60% { transform: scale(1.2); }
      80% { transform: scale(0.9); }
      100% { transform: scale(1); }
    }
    .animate-scale-bounce {
      animation: scaleBounce 1s ease forwards;
    }
    /* Real cloud animation */
    @keyframes moveClouds {
      0% { transform: translateX(-200px); }
      100% { transform: translateX(120%); }
    }




    /* hero section text animation and color  */

    .text-golden-glow {
        color: #1E1E1E;
        text-shadow:
          0 0 5px #1E1E1E,
          0 0 10px #1E1E1E,
          0 0 20px #1E1E1E;
      }
    
      @keyframes sparkle {
        0%, 100% {
          text-shadow: 0 0 5px #9a9a99, 0 0 10px #ffffff, 0 0 20px #FF8C00;
        }
        50% {
          text-shadow: 0 0 10px #FFF700, 0 0 20px #FFEA00, 0 0 30px #FF8C00;
        }
      }
    
      .sparkling-text {
        animation: sparkle 2s infinite;
      }


      .shadow-button::after {
        content: '';
        position: absolute;
        top: 6px;
        left: 8px;
        width: 100%;
        height: 100%;
        background: black; /* Initial shadow color */
        z-index: -2 !important;
        transition: transform 0.1s ease;
    }
    
    .shadow-button:hover::after {
        transform: translateY(4px); /* match hover:translate-y-1 (~4px) */
        /* Remove background and color changes on hover out */
        /* background: none; */
        /* color: #000000; */
        z-index: -2;
    }
          

  

  .shadow-comic::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 100%;
    height: 100%;
    background: black;
    z-index: -1;
  }
  .shadow-comic:hover::after {
    transform: translateY(4px); 
    z-index: -2;
  }



  .comic-style {
    border-bottom: 6px solid black !important;
    border-right: 6px solid black !important;


    box-shadow: 8px 8px 0px 0px rgba(0,0,0,1) !important;
    padding: 2rem; 
    /* margin: 2rem auto;  */
    /* max-width: 1200px;  */
  }

  .comic-box {
    border: 4px solid black !important;
    border-radius: 10px !important;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1) !important;
    /* background-color: white !important;  */
  }






  /* book section in css code is start from here  */
  * {
    box-sizing: border-box;
  }
  img {
    border-radius: 0.5em;
    width: 100%;
    height: auto;
  }
  .centered {
    margin: auto;
    width: max-content;
  }
  .flipbook {
    margin: 3em auto;
    width: 800px;
    height: 600px;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  .flipbook .leaf {
    position: absolute;
    transform-style: preserve-3d;
    width: 50%;
    height: 100%;
    left: 50%;
    transition: transform 1s;
    transform: rotate3d(0, 1, 0, 0deg);
    transform-origin: left 0px;
  }
  .leaf .page {
    transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    padding: 1em;
    overflow-y: auto;
  }
  .page.front {
    transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0.1px);
    border-radius: 0em 1em 1em 0;
    box-shadow: inset 5px 0px 5px -5px #0005;

  }
  .page.back {
    transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 0.1px);
    border-radius: 1em 0em 0em 1em;
    box-shadow: inset -5px 0px 5px -5px #0005;
  }
  .page.back.external {
    box-shadow: none;
  }
  .pageNumber {
    font-size: 0.75em;
    position: absolute;
    bottom: 0.5em;
  }
  .front {
    
}
  .pageNumber {
    right: 0.75em;
  }
  .back .pageNumber {
    left: 0.75em;
  }
  h1, h2, h3 {
    font-family: cursive;
  }
  .controls {
    display: flex;
    justify-content: center;
    width: 90%;
  }
  .controls button {
    padding: 0.75em 1.5em;
    font-size: 1em;
    border: none;
    background-color: #8D44AD;
    color: white;
    border-radius: 0.5em;
    cursor: pointer;
  }
  .controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  /* MOBILE STYLES */
  @media (max-width: 768px) {
    .flipbook {
      width: 100%;
      height: auto;
      perspective: none;
      transform-style: flat;
      margin: 1em auto;
    }
  
    .flipbook .leaf {
      position: relative;
      justify-content: center;
      justify-items: center;
      align-items: center;
      width: 100%;
      height: auto;
      left: 0;
      transform: none !important;
      margin-bottom: 1.5em;
      display: none;
    }
  
    .flipbook .leaf.active {
      display: block;
    }
  
    .flipbook .leaf .page {
      display: none;
      position: relative;
      width: 90%;
      margin: 0 auto;
      min-height: 500px;
      max-height: 80vh;
      overflow-y: auto;
      transform: none !important;
      border-radius: 1em;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      justify-content: center;
      justify-items: center;
      align-items: center;
    }
  
    .flipbook .leaf .page.show {
      display: block;
    }
  
    .page.back.external img {
      width: 100%;
      height: auto;
    }
    .desktop-only {
      display: none !important;
    }
  }