:root {
  --headings: Garamond, "Times New Roman", serif;
}

* {box-sizing:border-box;}
html, body {height:100%;}
body {font-size:16px; font-family:Helvetica, sans-serif;}
nav {
  ol {list-style: none; margin: 0; padding: 0;}
  li {padding: 0;}
  a {display: block; text-decoration: none;}
}
.nav-primary {
  a {padding: 0.25rem; }
  .active {font-weight: bold; border-bottom: 3px solid blue;}
  @media (width >= 500px) {
    ol {display: flex; gap: 1rem;}
  }
}
h1, h2, h3, h4, h5, h6 {font-family: var(--headings);}
ul{
  li{margin-bottom: 0.35rem;}
}
.container {display:flex; flex-flow:column; width: 90vw; max-width: 80rem; height:100%; margin-inline: auto;}
.header-site {flex-grow:0;
  @media (width >= 600px) {
    & {display: flex; justify-content: space-between; align-items: center;}
  }
}
.site-title {font-family: var(--headings); font-size:clamp(2rem, 2.5vw, 4rem);}
main {flex-grow:1};
.footer-site {flex-grow:0;}