styles.scss

:root {
  --color-muted: rgba(255, 255, 255, 0.33);
  --color-strong: rgba(255, 255, 255, 1);
  --color-accent: #ff0050
}

.remark-container {
  background-color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.remark-slide-scaler {
  box-shadow: none;
}

.remark-slide-content {
  background-color: #000;
  color: rgba(255, 255, 255, 0.9);
  font-size: 4vh;
  padding: 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  @media print {
    padding: 1rem;
  }

  & > *:first-child {
    margin-top: 0;
  }

  & > *:last-child {
    margin-bottom: 0;
  }

  strong, b {
    color: var(--color-accent);
  }

  .remark-code {
    padding: 0;
    background: transparent;
  }

  .remark-code, .remark-inline-code {
    font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
    font-size: 3.5vh;
  }

  .remark-slide-number {
    font-size: 2vh;
  }

  h1,
  h2,
  h3,
  h4,
  a:link,
  a:visited {
    color: var(--color-accent);
    line-height: 2ex;
    margin-bottom: 0;
    margin-top: 1ex;

    strong, b {
      font-weight: 800;
    }
  }

  h1 {
    font-weight: 100;
    font-size: calc(100vh / 5);
  }

  h2 {
    font-weight: 200;
    font-size: calc(100vh / 10);

  }

  h3 {
    font-weight: 300;
    font-size: calc(100vh / 15);
  }

  h4 {
    font-weight: 400;
    font-size: calc(100vh / 20);
  }

  h1 + h2,
  h2 + h3,
  h3 + h4 {
    margin-top: 0;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  tbody tr {
    border-bottom: 1px solid var(--color-muted);
  }

  thead tr {
    border-bottom: 1px solid var(--color-strong);
  }

  td,
  th {
    padding: 0.5ex 0.5em;
  }

  td:first-of-type,
  th:first-of-type {
    padding-left: 0;
  }

  td:last-of-type,
  th:first-of-type {
    padding-right: 0;
  }
}