/* Colors */
html { --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; --mauve: #cba6f7; --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; --yellow: #f9e2af; --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb; --sapphire: #74c7ec; --blue: #89b4fa; --lavender: #b4befe; --text: #cdd6f4; --subtext1: #bac2de; --subtext0: #a6adc8; --overlay2: #9399b2; --overlay1: #7f849c; --overlay0: #6c7086; --surface2: #585b70; --surface1: #45475a; --surface0: #313244; --base: #1e1e2e; --mantle: #181825; --crust: #11111b; --base-low-op: #1e1e2ed0 }
html[data-light] { --rosewater: #dc8a78; --flamingo: #dd7878; --pink: #ea76cb; --mauve: #8839ef; --red: #d20f39; --maroon: #e64553; --peach: #fe640b; --yellow: #df8e1d; --green: #40a02b; --teal: #179299; --sky: #04a5e5; --sapphire: #209fb5; --blue: #1e66f5; --lavender: #7287fd; --text: #4c4f69; --subtext1: #5c5f77; --subtext0: #6c6f85; --overlay2: #7c7f93; --overlay1: #8c8fa1; --overlay0: #9ca0b0; --surface2: #acb0be; --surface1: #bcc0cc; --surface0: #ccd0da; --base: #eff1f5; --mantle: #e6e9ef; --crust: #dce0e8; --base-low-op: #eff1f5b0}

/* Font */
@font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/font/DejaVuSans.ttf")             format("truetype"); }
@font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/font/DejaVuSans-Bold.ttf")        format("truetype"); }
@font-face { font-family: 'DejaVu Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/font/DejaVuSans-Oblique.ttf")     format("truetype"); }
@font-face { font-family: 'DejaVu Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/font/DejaVuSans-BoldOblique.ttf") format("truetype"); }
@font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/font/DejaVuSans-ExtraLight.ttf")  format("truetype"); }
@font-face { font-family: "Ubuntu Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/font/UbuntuMono-Regular.ttf")     format("truetype"); }
@font-face { font-family: "Ubuntu Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/font/UbuntuMono-Italic.ttf")      format("truetype"); }
@font-face { font-family: "Ubuntu Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/font/UbuntuMono-Bold.ttf")        format("truetype"); }
@font-face { font-family: "Ubuntu Mono"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/font/UbuntuMono-BoldItalic.ttf")  format("truetype"); }

body {
  margin: 0;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--base);
  color: var(--text);
  font-family: "DejaVu Sans";
  font-size: 18px;
}

::selection {
  background-color: var(--accent);
  color: var(--base);
}

code, pre {
  font-family: "Ubuntu Mono"
}

small, i {
  color: var(--subtext0);
  font-size: 12px;
}

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

a:link,
a:visited {
  color: var(--accent);
  font-weight: 700;
}

input:not(
  [type="submit"]
) {
  background-color: var(--mantle);
  color: var(--text);
  font-family: "DejaVu Sans";
  outline: 1px solid var(--surface0);
  padding: 4px 6px;
  border: none;
  margin: 2px 0;
  border-radius: 4px;
  transition: outline-color 0.25s, background-color 0.25s;
}

input:not(
  [type="submit"]
):focus {
  outline-color: var(--accent);
  background-color: var(--crust);
  transition: outline-color 0.1s, background-color 0.1s;
}

input[type="submit"],
button {
  background-color: var(--mantle);
  color: var(--text);
  font-family: "DejaVu Sans";
  outline: 1px solid var(--surface0);
  padding: 4px 6px;
  min-width: 75px;
  border: none;
  margin: 2px 0;
  border-radius: 99999px;
  cursor: pointer;
  transition: outline-color 0.25s, background-color 0.25s;
}

ul,
ol {
  padding-left: 15px;
}

hr {
  background: none;
  border: 1px solid var(--accent);
  outline: none;
  width: 90vw;
  max-width: 500px;
}

input[type="submit"]:focus,
button:focus {
  outline-color: var(--accent);
  transition: outline-color 0.1s;
}

input[type="submit"]:active,
button:active {
  background-color: var(--crust);
  transition: background-color 0.1s;
}

.left   { text-align: left;   }
.center { text-align: center; }
.right  { text-align: right;  }

.block { display: block; }
.inline-block { display: inline-block; }

.no-margin { margin: 0; }
.no-padding { padding: 0; }
.no-border { border: none; }
.no-outline { outline: none; }

#container {
  text-align: center;
  padding: 10px;
  width: calc(100vw - 20px);
  max-width: calc(100vw - 20px);
}