/* Custom Scrollbar for Webkit-based browsers */
                    ::-webkit-scrollbar {
                      width: 5px;
                    }

                    ::-webkit-scrollbar-track {
                      background: transparent;
                    }

                    ::-webkit-scrollbar-thumb {
                      background: #555;
                      border-radius: 10px;
                    }

                    ::-webkit-scrollbar-thumb:hover {
                      background: #333;
                      cursor: grab;
                    }

                    /* Custom Scrollbar for Firefox */
                    html {
                      scrollbar-width: thin;
                      scrollbar-color: transparent;
                    }

                    ::selection {
                      background: #8fd6ff;
                      color: #222;
                    }

                    body {
                      background-color: black;
                      height: 100vh;
                      overflow-y: auto;
                      overflow-x: hidden;
                      cursor: default;
                    }

                    #main {
                      min-height: 100vh;
                      width: 100vw;
                      position: relative;
                      overflow-x: hidden;
                    }

                    #cursor {
                      height: 30px;
                      width: 30px;
                      background-color: #ffffff;
                      border-radius: 50%;
                      position: fixed;
                      z-index: 9999;
                      pointer-events: none;
                      mix-blend-mode: difference;
                    }

                    .sidebar {
                      transform: translateX(-100%);
                      transition: transform 0.3s ease-in-out;
                    }

                    .sidebar.active {
                      transform: translateX(0);
                    }

                    #sidebar-overlay.hidden {
                      display: none;
                    }

                    .blob {
                      position: fixed;
                      border-radius: 50%;
                      filter: blur(60px);
                      z-index: -1;
                      opacity: 0.35;
                      mix-blend-mode: screen;
                      /* soft glow effect */
                    }

                    .blob:nth-child(1) {
                      background: radial-gradient(circle at 30% 30%, #60a5fa, #3b82f6);
                      width: 500px;
                      height: 500px;
                      left: 5%;
                      top: 20%;
                      animation: blob-float 10s ease-in-out infinite;
                    }

                    .blob:nth-child(2) {
                      background: radial-gradient(circle at 60% 40%, #c084fc, #8b5cf6);
                      width: 400px;
                      height: 400px;
                      right: 10%;
                      top: 50%;
                      animation: blob-float 10s ease-in-out infinite 2s;
                    }

                    .blob:nth-child(3) {
                      background: radial-gradient(circle at 50% 50%, #f9a8d4, #ec4899);
                      width: 300px;
                      height: 300px;
                      left: 35%;
                      bottom: 10%;
                      animation: blob-float 10s ease-in-out infinite 1s;
                    }

                    @keyframes blob-float {

                      0%,
                      100% {
                        transform: translate(0, 0);
                      }

                      25% {
                        transform: translate(50px, -50px);
                      }

                      50% {
                        transform: translate(0, 50px);
                      }

                      75% {
                        transform: translate(-50px, 0);
                      }
                    }

                    #preloader {
                      position: fixed;
                      inset: 0;
                      z-index: 10000;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      background: #000;
                      transition: opacity .6s ease;
                    }

                    #preloader.fade-out {
                      opacity: 0;
                      pointer-events: none;
                    }

                    .loader {
                      width: 200px;
                      max-height: 900px;
                      transform-origin: 50% 50%;
                      overflow: visible;
                    }

                    .ci1 {
                      fill: var(--higru);
                      animation: toBig 3s infinite -1.5s;
                      transform-box: fill-box;
                      transform-origin: 50% 50%;
                    }

                    .ciw {
                      transform-box: fill-box;
                      transform-origin: 50% 50%;
                      animation: breath 3s infinite;
                    }

                    .ci2 {
                      fill: var(--higru);
                      animation: toBig2 3s infinite;
                      transform-box: fill-box;
                      transform-origin: 50% 50%;
                    }

                    .points {
                      animation: rot 3s infinite;
                      transform-box: fill-box;
                      transform-origin: 50% 50%;
                    }

                    @keyframes rot {
                      0% {
                        transform: rotate(0deg);
                      }

                      30% {
                        transform: rotate(360deg);
                      }

                      50% {
                        transform: rotate(360deg);
                      }

                      80% {
                        transform: rotate(0deg);
                      }

                      100% {
                        transform: rotate(0deg);
                      }
                    }

                    @keyframes toBig {
                      0% {
                        transform: scale(1) translateX(0px);
                      }

                      30% {
                        transform: scale(1) translateX(0px);
                      }

                      50% {
                        transform: scale(10) translateX(-4.5px);
                      }

                      80% {
                        transform: scale(10) translateX(-4.5px);
                      }

                      100% {
                        transform: scale(1) translateX(0px);
                      }
                    }

                    @keyframes toBig2 {
                      0% {
                        transform: scale(1) translateX(0px);
                      }

                      30% {
                        transform: scale(1) translateX(0px);
                      }

                      50% {
                        transform: scale(10) translateX(4.5px);
                      }

                      80% {
                        transform: scale(10) translateX(4.5px);
                      }

                      100% {
                        transform: scale(1) translateX(0px);
                      }
                    }

                    @keyframes breath {
                      15% {
                        transform: scale(1);
                      }

                      40% {
                        transform: scale(1.1);
                      }

                      65% {
                        transform: scale(1);
                      }

                      90% {
                        transform: scale(1.1);
                      }
                    }

                    .dwf,
                    .share {
                      position: fixed;
                      bottom: 4px;
                      right: 10px;
                      background-color: #0003;
                      padding: 3px;
                      border-radius: 3px;
                    }

                    body.noscroll {
                      overflow: hidden;
                      height: 100vh;
                    }

                    @media screen and (max-width:768px) {
                      #cursor {
                        display: none;
                      }
                    }

                    .text {
                      font-size: 8vw;
                      text-align: center;
                      font-family: "Oi", serif;
                      font-style: normal;
                      display: inline-block;
                      cursor: default;
                    }

                    .text span {
                      transition: color 0.3s ease;
                      color: rgb(255, 255, 255);
                    }