:root {
    /* Tailwind inspired */
    --color-zinc-50: #fafafa;
    --color-zinc-100: #f4f4f5;
    --color-zinc-200: #e4e4e7;
    --color-zinc-300: #d4d4d8;
    --color-zinc-400: #a1a1aa;
    --color-zinc-500: #71717a;
    --color-zinc-600: #52525b;
    --color-zinc-700: #3f3f46;
    --color-zinc-800: #18181b;
    --color-zinc-900: #18181b;

    --font-family-sans-serif: system-ui, -apple-system, 'Segoe UI', 'Roboto', Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-family-serif: 'Iowan Old Style', 'Apple Garamond', Baskerville, 'Times New Roman', 'Droid Serif', Times, 'Source Serif Pro', serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

    --border-radius: 13px;
  }

  html {
    background: var(--color-zinc-100);
  }

  body {
    margin: auto;
    width: 90%;
    max-width: 600px;
    font-family: var(--font-family-serif);
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-zinc-700);

    /* vertical center */
    display: grid;
    min-height: 100vh;
    place-content: center;
  }

  ul,
  ol {
    padding: 0 0.5rem;
    margin: 0 1rem;
  }

  h1 {
    margin: 0;
    padding: 2rem;
    font-size: 1.6rem;
  }

  h2 {
    margin: 0;
    padding: 0 0 1rem;
    font-size: 1.4rem;
  }

  main {
    padding: 1.6rem 2rem;
    background: var(--color-zinc-50);
    box-shadow: 0 10px 20px var(--color-zinc-200);
    border-radius: var(--border-radius);
  }

  footer {
    margin: 0;
    padding: 1rem 2rem;
    font-family: var(--font-family-sans-serif);
  }