:root {
  --main-column-gap: 1em;
  --sub-column-gap: 1em;
  --sheet-display: grid;
  --body-padding: 1rem;
  --sheet-font-size: inherit;
  --dots-spacing: 1px;
}

.character-sheet-page {
  max-width: 50rem;
  min-width: min-content; /* fix weird cut off right margin on mobile (?) */
  padding: var(--body-padding);

  h3 {
    font-size: 1.1rem;
  }
}

.character-sheet {
  display: var(--sheet-display);
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: var(--main-column-gap);
  width: 100%;
  font-size: var(--sheet-font-size);

  h2 {
    grid-column-start: 1;
    grid-column-end: 4;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    margin: 0;
    white-space: nowrap;
    line-height: inherit;
  }

  h4 {
    font-weight: normal;
  }

  p {
    font-size: inherit;
    margin: 0;
    display: inline;
  }

  > ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  > dl {
    display: grid;
    align-content: flex-start;
    column-gap: var(--sub-column-gap);
    grid-template-columns: 1fr 1fr;
    margin: 0;
    white-space: nowrap;

    &.bold-headings {
      dt {
        font-weight: bold;
      }
    }

    &.dots dd,
    dd.dots {
      font-family: monospace;
      font-size: inherit;
      letter-spacing: 1px;
      letter-spacing: var(--dots-spacing);
    }

    h3 {
      grid-column-start: 1;
      grid-column-end: 3;
    }

    dd {
      padding: 0;
      margin: 0;
      text-align: right;
      justify-self: flex-end;
    }
  }

  > hr {
    grid-column-start: 1;
    grid-column-end: 4;
    width: 100%;
  }
}

/* single column view on small screens */
@media screen and (max-width: 720px) {
  :root {
    --sheet-font-size: 10px;
    --main-column-gap: 0.5em;
    --sub-column-gap: 0.1em;
    --body-padding: 0.5rem;
    --dots-spacing: -1px;
  }
}