@font-face {
  font-family: 'Rayuela';
  src: url('/font/OTRayuela-Regular.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
  font-style: regular;
}



:root {
  --black: #000;
  --green: #c7fc3d;


  --bg: var(--black);
  --text: #dedede;
  --text-subtle: #adadad;
  --accent: var(--green);

  --font-body: monospace;
  --font-display: 'Rayuela', var(--font-body);
}

body {
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(16px, 4vw, 18px);
  line-height: 1.5;
}

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

code {
  background: var(--mint-sludge);
  border-radius: 4px;
  font-size: .9em;
  padding-inline: .2em;
}

.system-font {
  font-family: system-ui;
}

img {
  max-width: 100%;
}
a {
  color: var(--accent);
  line-height: 1;
  text-decoration: none;
/*  text-decoration-color: var(--plum-frozen);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;*/
  /*transition: .2s ease-in-out;*/

  padding: .1em .25em;
}

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

header,
main,
footer {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 60ch;
  padding-inline: 1em;
  width: 100%;
}

header {
  padding-top: 4em;
}

h1 {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 6em;
  font-weight: normal;
  text-transform: uppercase;
  
  line-height: 1;
  margin-block: 0;
}

h2 {
  background: var(--accent);
  color: var(--bg);
  font-size: 1.15em;
  font-variant-caps: all-small-caps;
  font-weight: normal;
  line-height: 1;

  display: inline-block;
  margin-top: 2em;
  margin-bottom: 0.5em;
  padding: .15em .25em;
}

@counter-style ul-primary {
  system: cyclic;
  /* symbols: '◆'; */
  symbols: '✦';
  suffix: ' '; /* U+2004 	THREE-PER-EM SPACE (thick space) */
}

ul {
  list-style-type: ul-primary;
  padding-left: clamp(1em, 5vw, 1.5em);
}
li::marker {
  color: var(--plum);
  font-size: .8em;
}


hr {
  border: none;
  margin-top: 3em;
}
hr::before {
  content: '✦ ✦ ✦';
  color: var(--accent);
  display: block;
  text-align: center;
}


figure {
  margin-block: 2em;
  margin-inline: 0;
}
figcaption {
  color: var(--text-subtle);
  font-size: .8em;
  text-transform: uppercase;
  margin-top: .5em;
}

footer {
  margin-top: 2em;
  padding-block: 3em;

  color: var(--accent);
  font-size: .7em;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}





.transparent {
  mix-blend-mode: multiply;
}