@import 'reset.scss';

body {
  /* if you don't have any idea what's going on here, read
   * <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout>
   */
  display: grid;
  min-height: 100vh;
  grid-template:
    "nav main" 1fr
    "nav footer" min-content
      / minmax(min-content, 20vw) 1fr;
  grid-gap: 0;
  grid-auto-rows: auto;

  & > nav {
    grid-area: nav;
    max-width: 40ch;
    /* everything else about <nav> is in navbar.scss */
  }

  & > main {
    grid-area: main;
    /* everything else about <nav> is in content.scss */
  }

  & > footer {
    grid-area: footer;
    /* everything else about <nav> is in footer.scss */
  }
}

@import 'navbar.scss';
// TODO @import 'content.scss';
// TODO @import 'footer.scss';

// stub, TODO remove
main, footer {
  p {
    margin: 1rem;
  }
}