:root{
    --mypurple: rgb(158, 129, 59);
    --mypurpledark: rgb(82, 82, 82);
    --mypurpledark2: 82, 82, 82;
    --myblue: rgb(27, 27, 27);
    --mywhite: floralwhite;
    --myblack: black;
    --fluxcolor: rgb(72, 255, 72);
    --smoothflux: rgb(150, 255, 150);
    --darkflux: rgb(75, 123, 75);
    --altcolor: #ff00d0;
    --darkaltcolor: #71005d;
    --TitleFont: "Rubik";
}

.background-pattern{
  position: fixed;
  transform: translate(-50%, -50%);
  left: 50%;
  top:50%;
  width: 100%;
  height: 100%;
  z-index: -9999;
  background: linear-gradient(45deg, transparent 49%, #525252 49% 51%, transparent 51%) , linear-gradient(-45deg, transparent 49%, #525252 49% 51%, transparent 51%);
  background-size: 4em 4em;
}

.background-pattern-radial{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -9998;
  background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(27,27,27,1) 55%);
}

body{
  margin-top: 8%;
}

html{
    background-color: var(--myblue);
}

h1{
    color: var(--mywhite);
    font-size: xx-large;
    text-align: center;
    font-family: var(--TitleFont);
}


/* width */
::-webkit-scrollbar {
    width: 0.8em;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--mypurple);
    border-radius: 5px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--mypurpledark);
  }


  @media screen and (max-width: 500px) {

    ::-webkit-scrollbar {
        width: 0.6em;
      }

    ::-webkit-scrollbar-thumb {
        background: var(--mypurple);
        border-radius: 5px;
        opacity: 0.6%;
    }
  }