:root {
  font-size: 16px;

  --background: #111118;

  --accent: #846bf7;
  --accent-dim: #846bf760;
  --accent-very-dim: #846bf716;

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

  --gray: #1d1d28;
  --gray-dim: #12121b;
}

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;
}

h1, h2, h3, h4, h5, h6, p, span {
  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 {
    background: var(--accent-dim);
  }
}

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

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