:root {
  /* Special */
  --background: #18161d;
  --foreground: #a4a0ac;
  --cursor: #a4a0ac;

  /* Colors */
  --color0: #18161d;
  --color1: #ff7780;
  --color2: #68b183;
  --color3: #bda014;
  --color4: #54a5ff;
  --color5: #da89b2;
  --color6: #79a8c3;
  --color7: #a4a0ac;
  --color8: #bd9b87;
  --color9: #ef873d;
  --color10: #08b885;
  --color11: #d39710;
  --color12: #a294fe;
  --color13: #ec7aca;
  --color14: #4ab0b9;
  --color15: #a4a0ac;

  --link-group-title-font-size: 1.5rem;
  --link-group-item-font-size: 1.25rem;
}

:root {
  --spacing: 8px;
  --width: 900px;
  --font-family: "Iosevka", monospace;
  font-size: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-family);
}

.page {
  margin: calc(2 * var(--spacing)) auto 0;
  padding: var(--spacing);
  width: 100%;
  max-width: var(--width);
}

input {
  width: 100%;
  outline: none;
  background-color: var(--background);
  color: var(--foreground);
  border: 1px solid var(--foreground);
  padding: var(--spacing);
}

header {
  margin-bottom: calc(2 * var(--spacing));
}

main {
  display: flex;
  flex-wrap: wrap;
}

.link-group {
  width: 100%;
  margin-bottom: calc(2 * var(--spacing));

  h2 {
    margin-bottom: calc(0.5 * var(--spacing));
    font-size: var(--link-group-title-font-size);
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    flex-wrap: wrap;
    gap: var(--spacing);

    a {
      font-size: var(--link-group-item-font-size);
    }
  }
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 800px) {
  ul {
    margin-left: 0;
  }
}