:root {
  /* Base Monotones (Backgrounds and Content) */
  --base03: #002b36;
  --base02: #073642;
  --base01: #586e75;
  --base00: #657b83;
  --base0: #839496;
  --base1: #93a1a1;
  --base2: #eee8d5;
  --base3: #fdf6e3;

  /* Accents */
  --yellow: #b58900;
  --orange: #cb4b16;
  --red: #dc322f;
  --magenta: #d33682;
  --violet: #6c71c4;
  --blue: #268bd2;
  --cyan: #2aa198;
  --green: #859900;
}

html {
  padding: 30pt 100pt;

  font-family: "Sono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: var(--base1);
}

body {
  background: #1f1f1f;
  background: linear-gradient(
    149deg,
    rgb(41, 1, 57) 0%,
    #1f1f1f 50%,
    rgba(0, 43, 54, 1) 100%
  );
  background-size: 200% 200%;
  background-attachment: fixed;
  animation: BackgroundGradient 60s ease infinite;
  min-height: 100vh;
  max-width: 600pt;
}

@-webkit-keyframes BackgroundGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes BackgroundGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes BackgroundGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

h1,
h2,
h3 {
  color: var(--base2);
  font-weight: 200;
}

h1 {
  font-size: 1.75em;
  margin-left: -40pt;
  margin-block-end: 10pt;
}

h1.big {
  font-size: 3em;
  margin-left: -60pt;
}

h1.big img {
  width: 50pt;
  height: 50pt;
}

h1 a {
  text-decoration: none;
}

h1 img {
  width: 30pt;
  height: 30pt;
  margin-right: 10pt;
  vertical-align: middle;
}

h2 {
  font-size: 1.2em;
  font-weight: 300;
  text-underline-offset: 4pt;
  text-decoration-line: underline;
  text-decoration-thickness: 1pt;
  margin-block-start: 25pt;
  margin-block-end: 20pt;
}

h3 {
  font-size: 1.2em;
  font-weight: 400;
  text-decoration: underline;
  /* margin-block-start: 10pt; */
}

p,
ul {
  font-weight: 300;
}

small {
  font-weight: 200;
  color: var(--base01);
}

hr {
  border: 0;
  border-top: 1pt solid var(--base01);
  margin-block-start: 50pt;
}

input[type="text"],
input[type="email"] {
  font-family: "Sono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 1em;
  font-style: normal;
  color: var(--base2);

  background: transparent;
  width: 100%;
  outline: 0;
  border: 0;
  border-bottom: 1pt solid var(--base01);
}

textarea.form-error,
input[type="text"].form-error,
input[type="email"].form-error {
  color: var(--red);
  border-bottom: 1pt solid var(--red);
}

textarea.form-error {
  border: 1pt solid var(--red);
}

label {
  font-size: 0.95em;
}

textarea {
  font-family: "Sono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 1em;
  font-style: normal;
  color: var(--base2);

  background: transparent;
  width: 100%;
  resize: vertical;
  min-height: 75pt;
  max-height: 200pt;
  outline: 0;

  margin-block-start: 15pt;
  border: 1pt solid var(--base01);
}

button {
  font-family: "Sono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 1em;
  font-style: normal;

  padding: 6pt;
  min-width: 80pt;
  color: var(--cyan);
  background: transparent;
  border: 2pt solid var(--cyan);
}

button:hover,
button:focus {
  outline: none;
  color: var(--blue);
  background-color: var(--base03);
  border: 2pt solid var(--blue);
}

button:active {
  outline: none;
  color: var(--magenta);
  background: transparent;
  border: 2pt solid var(--magenta);
}

button:disabled {
  color: var(--base1);
  padding: 7.25pt;
  border: 1pt dashed var(--base01);
  pointer-events: none;
}

ul {
  list-style-type: "\2732  ";
  padding-left: 0;
}

ul li {
  padding-left: -10pt;
  margin-block-start: 5pt;
}

ul.grid {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(150pt, 1fr));
  gap: 0.5pt;
}

ul.grid li {
  margin: 0;
  padding: 5pt;
  aspect-ratio: 1/1;
  vertical-align: bottom;
  text-align: center;
  outline: 1pt solid var(--base01);
}

ul.grid li img {
  width: 75pt;
}

a,
a:visited {
  color: var(--blue);
  text-underline-offset: 4pt;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1pt;
}

a:hover {
  color: var(--magenta);
}

pre {
  color: var(--violet);
}

.yellow {
  color: var(--yellow);
}

.orange {
  color: var(--orange);
}

.red {
  color: var(--red);
}

.magenta {
  color: var(--magenta);
}

.violet {
  color: var(--violet);
}

.blue {
  color: var(--blue);
}

.cyan {
  color: var(--cyan);
}

.green {
  color: var(--green);
}

.base03 {
  color: var(--base03);
}

.base02 {
  color: var(--base02);
}

.base01 {
  color: var(--base01);
}

.base00 {
  color: var(--base00);
}

.base0 {
  color: var(--base0);
}

.base1 {
  color: var(--base1);
}

.base2 {
  color: var(--base2);
}

.base3 {
  color: var(--base3);
}