* {
  margin: 0;
  padding: 0;
  &::selection { background-color: rgba(89, 167, 241, 0.5); }
}

a { color: var(--text-normal); }

:root {
  --background-main: #111114;
  --background-invert: #eee;
  --text-normal: white;
  --text-dark: #ccc;
  --text-extra-dark: #666;
  --color-scheme: dark;
  --mix-blend-mode: darken;
  --invert: 0;
}

html { overflow-x: hidden; }
body {
  color: var(--text-normal);
  background: var(--background-main);
  font-family: Inter, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color-scheme: var(--color-scheme);
  overflow-x: hidden;

  .gb, .gb-wrapper > * { /* General Box */
    color: #ccc;
    background-color: #222;
    border: 1px #3338 solid;
    border-radius: 8px;
    padding: 0 12px;
    transition-duration: 200ms;
    color-scheme: dark !important;
  }

  .heading-lines {
    position: relative;
    display: flex;
    align-items: center;

    &::before, &::after {
      height: 1px;
      width: 80px;
      position: absolute;
      content: '';
    }

    &::before {
      left: -100px;
      background: linear-gradient(90deg, transparent, var(--text-extra-dark));
    }

    &::after {
      right: -100px;
      background: linear-gradient(270deg, transparent, var(--text-extra-dark));
    }
  }
}