:root {
  /* gruvbox colors */
  --background: #282828;
  --foreground: #ebdbb2;
  --alpha: #00000000;
  --shade: #282828;
  --background-tray: #1d2021;
  --red-dark: #cc241d;
  --red-light: #fb4939;
  --green-dark: #98971a;
  --green-light: #b8bb26;
  --yellow-dark: #d79921;
  --yellow-light: #fabd2f;
  --blue-dark: #458588;
  --blue-light: #83a598;
  --purple-dark: #b16286;
  --purple-light: #d3869b;
  --aqua-dark: #689d6a;
  --aqua-light: #8ec07c;
  --orange-dark: #d65d0e;
  --orange-light: #fe8019;
  --gray-dark: #928374;
  --gray-light: #a89984;
  --blue-arch: #1793d1;
  --green-spotify: #1db954;
  --hover-color: #3c3a36;
  --newtab-textbox-background-color: var(--background);

  --content-max-width: 400px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 32px;
  --space-1_2: calc(var(--space-1) + var(--space-2));
  --space-2_3: calc(var(--space-2) + var(--space-3));
  --space-3_4: calc(var(--space-3) + var(--space-4));
}

body {
  position: relative;
  padding: calc(var(--space-3_4)) var(--space-3);

  font-family: sans-serif, Arial;
  font-size: 100%;
  line-height: 1.5;

  background-color: var(--background);
  color: var(--foreground);
  font-family: 'SourceCodePro Regular', 'Courier New', Courier, monospace;
}

h1 {
  color: inherit;
}

@media (max-width: 767px) {
  body {
    padding: calc(var(--space-2_3)) var(--space-3);
  }

  h1 {
    margin: 0;
  }
}

hr {
  border: 1px dashed var(--purple-light);
}

main {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.nowrap {
  white-space: nowrap;
}

ul {
  margin: 0;
  padding-inline-start: var(--space-4);
}

a {
  color: var(--green-spotify);
}
a:hover {
  color: var(--orange-dark);
  text-decoration: none;
}
a:visited {
  color: var(--aqua-dark);
}

.quote {
  border-left: 2px solid var(--green-spotify);
  background-color: var(--hover-color);
  padding: 5px 10px;
  position: relative;
  margin-left: calc(-1 * var(--space-1_2));
  margin-right: calc(-1 * var(--space-1_2));
  color: var(--foreground);
}

.ul-grid {
  padding-inline-start: 0;
}
.ul-grid li {
  display: flex;
  justify-content: space-between;
}