:root {
    --site-width: 40rem;
    --site-padding: 2rem;
    --light-primary: #fff;
    --dark-primary: #111;
  }

  html {
    font-size: 100%;
  }
  
  body {
    background: var(--light-primary);
    color: var(--dark-primary);
    font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir,
      "segoe ui", "helvetica neue", helvetica, Ubuntu, roboto, noto, arial,
      sans-serif;
    font-size: 1.25rem;
    line-height: 1.6;
    margin: 0;
    padding: 0;
  }

  .site-content{
   display: grid;
   place-items: center;
   min-height: 80vh;
  }

  h1 {
    font-size: 4rem;
  }

  @media (prefers-color-scheme: dark) {
    body {
      background: var(--dark-primary);
      color: var(--light-primary);
    }
}