:root {
  --bg: #f8f4f4;
  --fg: #282828;
  --em: #000;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  font-family: gt pressura mono, monospace;
  line-height: 1.6em;
  font-weight: 400;
  /* animation: fadeIn 0.6s ease-in; */
}


/* 40ch-wide, centered container; font-size scales down on small screens so the full 40-character line always fits. */

.text {
  --cols: 40;
  --pad: 2ch;
  --min: 16px;
  --max: 18px;
  --ls: -0.025em;

  width: calc(var(--cols) * 1ch + var(--cols) * var(--ls));
  margin-inline: auto;
  padding-inline: var(--pad);

  font-size: clamp(
    var(--min),
    calc((100vw - 2 * var(--pad)) / var(--cols)),
    var(--max)
  );
  letter-spacing: var(--ls);
  
  white-space: pre;
  

  .block {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    word-break: normal;
  }


  a {
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    cursor: pointer;
    transition: .35s;
    &:not(.unlink){
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 0.45em;
      text-decoration-color: #ed0;
      &:hover { text-decoration-color: #ed00; }
    }
    &.unlink {
      text-decoration: none;
    }
    &:hover:not(:active) {
      -webkit-text-stroke: 0.01em currentColor;
      -webkit-text-fill-color: currentColor;
    }
  }


  b {
    --s: 1;
    font-weight: 400;
    color: var(--em);
    -webkit-text-stroke: calc(0.0085em * var(--s)) currentColor;
    -webkit-text-fill-color: currentColor;
  }


  i {
    letter-spacing: .15em;
    font-size: 1.1em;
    font-family: courier prime, monospace;
    font-weight: 400;
  }

  
  b i,
  i b {
    letter-spacing: 0;
    --s: 5;
  }

}

.cover {
  position: relative;
  height: 100svh;
  > div { position: absolute; width: 100%; margin-top: -1lh; }
  > .ratio { top: 38%; transform: translateY(-50%); }
  > .center { top: 50%; transform: translateY(-50%); }
  > .bottom { bottom: 0; }
}

.spaced {
  margin-top: 50lvh;
  margin-bottom: 50lvh;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@font-face {
  font-display: swap;
  font-family: 'GT Pressura Mono';
  src: url('./font/gt-pressura-mono-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  src: url('./font/courier-prime-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 400;
  src: url('./font/courier-prime-regular-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  src: url('./font/courier-prime-bold.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 700;
  src: url('./font/courier-prime-bold-italic.woff2') format('woff2');
}