.mono {
	font-family: 'Courier New', monospace;
	width: 80ch;
}


.body {
	display: flex;
	justify-content: center;
}

.center {
	display: flex;
	justify-content: center;
}

a:link {
    color: black;
}

a:visited {
    color: black;
}

a:hover {
    color: white;
	background: black;
}

a:active {
    color: white;
	background: black;
} 
pre {
	background-color: #E0E0E0;
}

.ascii {
	font-family: 'Courier New', monospace;
	background-color: #FFFFFF;
}

code {
	font-family: 'Courier New', monospace;
	background-color: #E0E0E0;
}

.text-fit {
  display: flex;
  container-type: inline-size;

  --captured-length: initial;
  --support-sentinel: var(--captured-length, 9999px);

  & > [aria-hidden] {
    visibility: hidden;
  }

  & > :not([aria-hidden]) {
    flex-grow: 1;
    container-type: inline-size;

    --captured-length: 100cqi;
    --available-space: var(--captured-length);

    & > * {
      --support-sentinel: inherit;
      --captured-length: 100cqi;
      --ratio: tan(atan2(
        var(--available-space),
        var(--available-space) - var(--captured-length)
      ));
      --font-size: clamp(
        1em,
        1em * var(--ratio),
        var(--max-font-size, infinity * 1px)
        -
        var(--support-sentinel)
      );
      inline-size: var(--available-space);

      &:not(.text-fit) {
        display: block;
        font-size: var(--font-size);

        @container (inline-size > 0) {
          white-space: nowrap;
        }
      }

      &.text-fit {
        --captured-length2: var(--font-size);
        font-variation-settings:
          'opsz'
          tan(atan2(var(--captured-length2), 1px));
      }
    }
  }
}

@property --captured-length {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --captured-length2 {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}