@layer base, components;

@layer base {

  *, *:before, *:after {
    box-sizing: border-box;
  }

  body {
    line-height: 1.5;
    font-family: system-ui;
    font-size: 14px;
    max-width: 1000px;
    margin: 1em auto;
    padding: 1em;
  }

  h1 {
    font-size: 1.5em;
  }

  strong {
    font-weight: 550;
  }

  table {
    width: 100%;
    td {
      padding: .5em 0;
      border-bottom: 1px solid #eee;
    }
  }

  dl {
    display: grid;
    grid-template-columns:25% 1fr;
    > * { margin: .25em 0 }
    dt { font-weight: 500 }
    p:first-child { margin-top: 0 }
  }

}