:root {
  font-size: 16px;

  --background: #111118;
  --background-black: #060608c0;

  --accent-gray: #b182a3;

  --accent-light: #9e8afa;
  --accent: #846bf7;
  --accent-dim: #846bf760;
  --accent-very-dim: #846bf716;

  --white: #ffffff;
  --white-dim: #afbcc2;

  --gray: #21212c;
  --gray-dim: #151520;

  --red: #e04343;
  --red-transparent: #e0434320;
  --yellow: #f5ca54;
  --yellow-transparent: #f5ca5420;
}

body {
  background-color: var(--background);

  margin: 0;
  position: relative;
}

* {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
}

a { 
  color: var(--accent-light);
  text-decoration: none;
  
  &:visited {
    color: var(--accent-gray);
  }

  &:hover,
  &:active {
    color: var(--white);
  }
}

h1, h2, h3, h4, h5, h6, p, span, input, textarea, select {
  margin: 0;
  color: white;
}

button {
  border: none;
  font-size: 1rem;
  cursor: pointer;
  background: none;
}

button.button {
  background: var(--accent-very-dim);
  border-radius: 4px;

  &:hover, &:active {
    background: var(--accent-dim);
  }
}

button.button.transparent {
  background: transparent;
  border-radius: 4px;

  &:hover, &:active {
    background: var(--accent-dim);
  }
}

.noSelect {
  user-select: none;
}