@import url('https://fonts.googleapis.com/css2?family=Inder&family=Pacifico&family=Oleo+Script:wght@400;700&family=Press+Start+2P&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');


/* font-family: 'Pacifico', cursive;
   font-family: 'Oleo Script', cursive;
   font-family: 'Inder', sans-serif; 
   font-family: 'Inter', sans-serif;
   font-family: 'Press Start 2P', cursive;
*/

*,
*::backdrop,
*::after {
  --white: hwb(49 79% 15%);
  --black: rgb(48, 48, 48);
  --brown: rgb(98, 96, 91);

  --orange: rgb(186, 104, 69);
  --yellow: rgb(199, 176, 92);
  --blue: rgb(61, 132, 153);

  --shadow: 5px 5px 2px rgba(0, 0, 0, 0.205);

  --success: rgb(63, 153, 82);
  --error: rgb(197, 69, 69);
  --warning: rgb(204, 204, 79);

  --margin: 15vw;

  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 0;
}

body {
  background: url(assets/images/checkerboard.svg),
    linear-gradient(180deg, #32312d 0%, #1b1a19 40%);
  background-blend-mode: darken, normal;
  background-size: 0.5rem;

  z-index: -100;
  overflow-x: hidden;

  width: 100vw;
  height: 100%;
  min-height: 100vh;

  font-family: 'Inder', sans-serif;
}

li {
  list-style: none;
}

button {
  background-color: var(--blue);
  color: white;
  width: 100%;
  border-radius: 5px;
  padding: 1rem;
  caret-color: transparent;
}

button:hover {
  cursor: pointer;
  filter: brightness(120%);
}

button:focus {
  border: inset solid 2px rgb(27, 27, 27);
}

button:disabled {
  background-color: var(--brown);
  color: var(--black);
  pointer-events: none;
}

a {
  text-decoration: none;
  color: var(--orange);
}

a:hover {
  filter: brightness(120%);
}

/* a:visited{
  color: rgb(185, 132, 110);
} */

/* PREVENT INPUT AUTOFILL CHANGING THE BACKGROUND COLOR */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}


input[type='color'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type='color']::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}





/* Radio Buttons */
input[type='radio'] {
  -webkit-appearance: none;
  background-color: #fff;
  appearance: none;
  margin: 0;
}

/* SCROLLBAR STUFF */
::-webkit-scrollbar {
  width: 10px;
  cursor: pointer;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: var(--black);

}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--brown);
  border-radius: 0;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--orange);
}

/* STYLES FOR MAKE THINGS LOOK PRETTY */
/* LESS GENERIC STYLES */
.glass {
  background: linear-gradient(160.79deg,
      rgba(196, 196, 196, 0.25) -17.5%,
      rgba(196, 196, 196, 0) 93.16%);
  border: 1px solid rgba(255, 255, 255, 0.144);
  border-radius: 5px;
  box-shadow: 0px 10px 5px 5px rgba(0, 0, 0, 0.35);
}


@media only screen and (max-width: 600px) {
  * {
    --margin: 5vw;
  }
}