/*html { filter: grayscale(100%); }*/

ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      /*background: #130d0d;*/
      overflow: hidden;
    }

    ul li {
      float: left;
    }

    ul li a {
      position: relative;
      display: block;
      color: white;
      /*text-align: center;*/
      padding: 14px 16px;
      text-decoration: none;
      overflow: hidden;
      transition: background-color 0.3s;
    }

    ul li a::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 5px;
      background: rgb(49, 70, 255);
      transition: width 0.4s cubic-bezier(.4,0,.2,1);
    }

    ul li a:hover::after,
    ul li a:focus::after {
      width: 100%;
    }

    /* Optional: Responsive for mobile */
    @media (max-width: 600px) {
      ul li { float: none; }
      ul li a { text-align: left; }
    }

.blur-filter{
    backdrop-filter: blur(10px);
}
body{
    background-image: url("image/TOHK_JABE.png");
    background-size: cover;
    background-repeat: no-repeat;
}
.carousel-item img {
    height: 80%; /* Or your desired fixed height */
    width: 100%;
    object-fit: contain; /* Or 'contain' to see whole image */
}


.indie-flower-regular {
  font-family: "Indie Flower", cursive;
  font-weight: 400;
  font-style: normal;
}

.orbitron {
  color: white;
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

  @keyframes slide-down {
  from {
  transform: translateY(-100%);
  }
  to {
  transform: translateY(0);
  opacity: 1;
  }
  }
  .slide-down {
  animation: slide-down 1s ease forwards;
  opacity: 0;
  }

  section {
    height: 800px;
  }

  html {
  scroll-behavior: smooth;
}

.footer-section {
  height: 300px;
}

/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

.snowflake,.snowflake .inner{animation-iteration-count:infinite;animation-play-state:running}@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}.snowflake:nth-of-type(0){left:1%;animation-delay:0s}.snowflake:nth-of-type(0) .inner{animation-delay:0s}.snowflake:first-of-type{left:10%;animation-delay:1s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}.snowflake:nth-of-type(3){left:30%;animation-delay:2s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}.snowflake:nth-of-type(5){left:50%;animation-delay:3s}.snowflake:nth-of-type(5) .inner{animation-delay:8s}.snowflake:nth-of-type(6){left:60%;animation-delay:2s}.snowflake:nth-of-type(7){left:70%;animation-delay:1s}.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:0s}.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}

@keyframes fade {
  0% {
    opacity: 0;
    transform: translate(0, 3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .in-view {
    animation: fade 0.5s 0.5s both;
  }

  .not-in-view {
    opacity: 0;
  }
}

    /* Fireworks CSS */
    .sky {
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0; left: 0;
      z-index: 9999;
      pointer-events: none;
      /* Optional: fade the effect for subtlety */
      /* opacity: 0.7; */
    }
    .firework {
      position: absolute;
      width: 10px;
      height: 10px;
      left: var(--x);
      top: var(--y);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
    .explosion {
      position: absolute;
      width: 4px;
      height: 4px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      opacity: 0;
      animation: explode 1.2s cubic-bezier(0.5,0,0.5,1) forwards;
      animation-delay: var(--delay);
      background: var(--color);
    }
    @keyframes explode {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      80% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.5);
      }
    }