:root {
  --bg: #121212;
  --fg: white;
  --accent: rgb(255, 167, 248);
  --font: "Inter", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Courier New",
    monospace;
}

html {
  background-color: var(--bg);
  color: var(--fg);
}

a {
  color: var(--accent);
}

body {
  font-family: var(--font);
  font-size: 1.125em;
}

pre,
code,
kbd {
  font-family: var(--font-mono);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

ul li,
ol li {
  margin-left: 1em;
}

.inline-list {
  list-style: none;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.inline-list li {
  display: block;
  margin: 0;

  padding-inline-end: 0.5ch;
}

.inline-list li + li {
  border-inline-start: 2px solid white;
  padding-inline-start: 0.5ch;
}

abbr {
  text-decoration: none;
}

.lavender-webring-container {
  font-family: "Inter", sans-serif !important;
}

th,
td {
  text-align: start;
  padding: 0.5em;
}

form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

form button {
  margin-top: 0.5em;
}

input {
  font-family: sans-serif;
}

button {
  display: inline-block;

  font-family: var(--font);
  font-size: 1em;

  border: 1px solid var(--accent);
  border-radius: 6px;
  font-weight: 500;
  background-color: transparent;
  padding: 0.5rem 1.5rem;
  color: var(--accent);
  cursor: pointer;
  text-align: center;
}

button:hover {
  background-color: var(--accent);
  color: var(--bg);
}

button.danger {
  --accent: rgb(255, 111, 111);
}

input[type="text"],
input[type="url"] {
  font-family: var(--font);

  margin: 0.25em 0;
  margin-bottom: 0.35em;
  padding: 0.5em 0.5em;
  background-color: #100f11;
  border: 1px solid #e7ebf080;
  border-radius: 6px;
  color: var(--fg);
  outline: none;
}

input[type="text"]:focus,
input[type="url"]:focus {
  border-color: var(--accent);
}

h1,
h2,
h3,
label,
th,
button {
  text-transform: lowercase;
}