@import url('https://fonts.googleapis.com/css2?family=Handjet:wght@100..900&family=Inter:wght@100..900&display=swap');

:root {
       --txt: rgb(255, 255, 255);
       --bg: rgb(22, 22, 22);
       --bg2: rgb(32, 32, 32);
       --bgtrans: rgba(0, 0, 1, 0.3);
       
       --primary: 0, 111, 255;
       --pri: rgb(var(--primary));
       --pri2: rgba(var(--primary), 0.2);
       --sec: rgb(140, 172, 171);
       --acc: rgb(56, 180, 180);

       --filter: invert(66%) sepia(52%) saturate(2271%) hue-rotate(143deg) brightness(101%) contrast(106%);
}
html {
       touch-action: manipulation;
       background: var(--bg);
       overflow-x: hidden;
}
* {
       margin: 0;
       min-width: 0;
       padding: 0;
       border-radius: 20px !important;
}
a {
       text-decoration: none;
       color: inherit;
}

body {
       color: var(--txt);
       background: var(--bg);
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       gap: 30px;
       min-height: 100svh;
}

h1, h2, h3 {
       font-family: inter,sans-serif;
       color: var(--txt);
}
h1 {
       font-weight: 700;
}
h2 {
       font-weight: 500;
}
h3 {
       font-weight: 700;
}

.trans {
       &:before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0px;
              left: 0px;
              backdrop-filter: url(#trans);
              border-radius: inherit;
              z-index: -1;
              justify-self: center;
              align-self: center;
              scale: 1;
       }
}
.fun {
       transform: scaleX(2);
       animation: fun 3s ease-in-out infinite;
}
@keyframes fun {
       from {
              transform: scaleX(2);
              rotate: -5deg;
       }
       50% {
              transform: scaleX(0.5);
              rotate: 5deg;
       }
       to {
              transform: scaleX(2);
              rotate: -5deg;
       }
}


/* Target WebKit browsers (Chrome, Safari, etc.) */
*::-webkit-scrollbar {
       width: 1px; /* Adjust width as desired */
     }
     
     *::-webkit-scrollbar-track {
       background: transparent; /* Customize track background color */
       border-radius: 10px; /* Add rounded corners */
     }
     
     *::-webkit-scrollbar-thumb {
       background: var(--pri2); /* Customize thumb color */
       border-radius: 10px; /* Add rounded corners */
       transition: all 0.25s ease;
     }
     *::-webkit-scrollbar-thumb:hover {
       background: var(--pri); /* Customize thumb color */
       border-radius: 10px; /* Add rounded corners */
     }

     ::selection {
       color: black; /* Change the text color */
       background-color: var(--pri); /* Change the background color */
     }

.button {
       cursor: pointer;
}
.button:hover {
       scale: 1.0;
       opacity: 1 !important;
}

@media screen and (max-width: 1100px) {
       .desktop {
              display: none !important;
       }
       .mobile {
              display: flex !important;
       }
}

@media screen and (min-width: 1101px) {
       .desktop {
              display: flex !important;
       }
       .mobile {
              display: none !important;
       }
}

.border {
       box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.1);
}
.section {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       max-width: 1200px;
       width: 90%;
}