@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');

:root {
       /* Backgrounds */
       --bg: rgb(7, 6, 5);
       --bg2: rgba(13, 12, 10);
       --bgtrans: rgba(0, 0, 0, 0.2);
       --bgtrans2: rgba(255, 255, 255, 0.1);

       /* Text */
       --txt: rgb(236, 241, 233);

       /* Colors */
       --pri: rgb(236, 174, 39);
       --pri2: rgba(236, 174, 39, 0.2);

       /* Some important stuff */
       --header-width: auto;
}
html {
       touch-action: manipulation;
       background: var(--bg);
}
* {
       margin: 0;
       min-width: 0;
       padding: 0;
       border-radius: 10px;
}
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;
       overflow-x: hidden;
}

h1, h2, h3 {
       font-family: fredoka,sans-serif;
       color: var(--txt);
       font-weight: 500;
}
h2 {
       font-family: fredoka,sans-serif;
       font-weight: 400;
       line-height: 1.5;
}

.trans {
       backdrop-filter: blur(1vmax);
       
       &:before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0px;
              left: 0px;
              backdrop-filter: blur(1vmax);
              -webkit-backdrop-filter: blur(1vmax);
              border-radius: 10px;
              z-index: -1;
              justify-self: center;
              align-self: center;
              scale: 1;
       }
}
.border {
       box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.1);
}

/* Target WebKit browsers (Chrome, Safari, etc.) */
*::-webkit-scrollbar {
       width: 10px; /* 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: white; /* Change the text color */
       background-color: var(--pri); /* Change the background color */
     }

.button {
       opacity: 0.8;
       transition: 0.2s ease;
       cursor: pointer;

       &:hover {
              opacity: 1;
       }
}

@media screen and (max-width: 1000px) {
       .desktop {
              display: none;
       }
       .mobile {
              display: auto;
       }
}

@media screen and (min-width: 1001px) {
       .desktop {
              display: auto;
       }
       .mobile {
              display: none;
       }
}

input[type="range"] {
       -webkit-appearance: none;
       border-radius: 10vmax;
       flex-grow: 1;
       height: 10px;
       width: 150px;
       background: var(--bgtrans2);
       outline: none;
       opacity: 1;
       transition: opacity .15s ease-in-out;
       overflow: hidden;
       cursor: pointer;

       &:hover {
              opacity: 1;
       }
       &::-webkit-slider-thumb {
              -webkit-appearance: none;
              appearance: none;
              width: 0px;
              height: 100%;
              border-radius: 50%;
              background: var(--pri);
              cursor: pointer;
              box-shadow: -500px 0px 0px 500px var(--pri);
              transition: background .15s ease-in-out, box-shadow .15s ease-in-out;
       }
       &::-moz-range-thumb {
              -webkit-appearance: none;
              appearance: none;
              width: 0px;
              height: 100%;
              border-radius: 50%;
              background: var(--pri);
              cursor: pointer;
              box-shadow: -500px 0px 0px 500px var(--pri);
              transition: background .15s ease-in-out, box-shadow .15s ease-in-out;
       }
}