@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(19, 19, 20);
       --bg2: rgb(29, 29, 30);
       --bgtrans: rgba(0, 0, 1, 0.3);
       --pri2: rgb(218, 165, 32);;
       --pri: rgb(255, 215, 0);  
       --sec: rgb(218, 165, 32); 
       --acc: rgb(184, 134, 11); 

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

body {
       overflow-x: hidden;
       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: 200;
}

.trans {
       backdrop-filter: blur(1vmax);
}
.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;
       }
}



*::-webkit-scrollbar {
       width: 10px;
     }
     
     *::-webkit-scrollbar-track {
       background: transparent;
       border-radius: 10px;
     }
     
     *::-webkit-scrollbar-thumb {
       background: var(--pri2);
       border-radius: 10px;
       transition: all 0.25s ease;
     }
     *::-webkit-scrollbar-thumb:hover {
       background: var(--pri);
       border-radius: 10px;
     }

     ::selection {
       color: black;
       background-color: var(--pri);
     }

.button:hover {
       box-shadow: 0px 0px 0px 1px rgba(255,255,255,30%) !important;
       scale: 1.0;
       opacity: 1 !important;
}

@media screen and (max-width: 700px) {
       .desktop {
              display: none !important;
       }
       .mobile {
              display: flex !important;
       }
       
       * {
              border-radius: 2vmax !important;
       }
       
       body {
              gap: 5vmax;
       }
       
       h1 {
              font-size: 8vmax;
       }
       h2 {
              font-size: 4vmax;
       }
       h3 {
              font-size: 3vmax;
       }
}

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