:root {
  --color-light-grey: #bdbdbd;
  --color-dark-grey: #3e3e3e;
  --color-background: #035a54;
  --color-text: #fdfdfd;
  --color-text-invert: #020202;
  --color-highlight: #d8e267;
  --color-accent: #d8e267;
  --color-accent-dark: #9ea920;
}

@font-face {
  font-display: swap;
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/crimson-text-v19-latin-regular-Cr9qG6v.woff2") format("woff2");
}
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

[type=button], [type=reset], [type=submit], button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.amp {
  font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
  font-size: 110%;
  font-style: italic;
  border: none;
}

body {
  font-family: "Crimson Text", Georgia, "Times New Roman", Times, serif;
  font-weight: 500;
  text-transform: lowercase;
}

h1 {
  font-size: 38px;
}

body {
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(var(--gap), 1fr);
  --content: min(64em, 100% - var(--gap) * 2);
  display: grid;
  grid-template-columns: [full-start] var(--full) [content-start] var(--content) [content-end] var(--full) [full-end];
}
body > * {
  grid-column: content;
}

main {
  display: flex;
  gap: 1em;
}
@media ((max-width: 48em)) {
  main {
    flex-direction: column;
    gap: 0;
  }
}

form {
  width: 50%;
  margin-inline: auto;
}
@media ((max-width: 48em)) {
  form {
    width: 100%;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
}
@media ((max-width: 48em)) {
  body {
    font-size: 1.5em;
  }
}

blockquote {
  margin: 0;
  border-left: 5px solid var(--color-light-grey);
  padding-left: 1.2em;
}

form fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
form textarea {
  width: 100%;
}

a {
  color: var(--color-accent);
}
a:visited, a:active {
  color: var(--color-accent-dark);
}

ol {
  column-count: 2;
  margin: 0;
  padding: 0;
  list-style-position: inside;
}
@media ((max-width: 48em)) {
  ol {
    column-count: 1;
  }
}
ol li {
  padding: 0.15em 1em;
}
@media ((max-width: 48em)) {
  ol li a[rel=footnote] {
    padding-left: 0.5em;
  }
}

:target {
  background-color: var(--color-highlight);
  color: var(--color-text-invert);
}
:target a {
  color: var(--color-text-invert);
}

.alert {
  background-color: var(--color-highlight);
  color: var(--color-text-invert);
  grid-column: full;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-block: 2em;
}

@property --x1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 10%;
}
@property --y1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}
@property --x2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 70%;
}
@property --y2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 30%;
}
@property --x3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 30%;
}
@property --y3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%;
}
@property --x4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 90%;
}
@property --y4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 90%;
}
.spam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: center;
  gap: 1rem;
}
.spam-grid > div {
  --top-left: transparent;
  --top-right: transparent;
  --bottom-left: transparent;
  --bottom-right: transparent;
  --seed1: 0%;
  --seed2: 0%;
  --seed3: 0%;
  --seed4: 0%;
  min-width: 100%;
  aspect-ratio: 1;
  background: radial-gradient(circle at var(--x1) var(--y1), var(--top-left) 0%, transparent 70%), radial-gradient(circle at var(--x2) var(--y2), var(--top-right) 0%, transparent 60%), radial-gradient(circle at var(--x3) var(--y3), var(--bottom-left) 0%, transparent 80%), radial-gradient(circle at var(--x4) var(--y4), var(--bottom-right) 0%, transparent 50%), var(--bg);
  background-blend-mode: overlay;
  align-content: end;
  overflow: hidden;
  border-radius: 1rem;
  corner-shape: squircle;
}
@media (prefers-reduced-motion: no-preference) {
  .spam-grid > div {
    animation: spamimate 60s ease-in-out infinite alternate;
  }
  @keyframes spamimate {
    to {
      --x1: var(--seed1);
      --y1: var(--seed2);
      --x2: var(--seed3);
      --y2: var(--seed4);
      --x3: var(--seed1);
      --y3: var(--seed2);
      --x4: var(--seed3);
      --y4: var(--seed4);
    }
  }
}
.spam-grid span {
  opacity: 0.5;
}

/*# sourceMappingURL=app.output.css.map */