:root {
  --wallpaper: url("None");

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

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

* {
  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);
}

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

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

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  margin-left: var(--spacing);
  flex-wrap: wrap;
  gap: var(--spacing);
}

li:not(:last-child):after {
  content: "/";
  margin-left: -5px;
}

h2 {
  margin-bottom: calc(0.5 * var(--spacing));
  font-size: 1rem;
}

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

a:hover {
  text-decoration: underline;
}