@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Solway:wght@300;400;500;700;800&display=swap');

body {
  display: grid;
  font-family: "Quicksand", sans-serif;
  grid-template:
    [row1-start] ".      header .     " min-content [row1-end]
    [row2-start] "nav    main   .     " auto        [row2-end]
    [row3-start] "footer footer footer" min-content [row3-end]
    / 1fr 40rem 1fr;
  height: 100vh;
}

header {
  border-left: 1px solid black;
  grid-area: header;
  padding: 0 1rem 0 2rem;
}

main {
  border-left: 1px solid black;
  grid-area: main;
  padding: 0 1rem 0 2rem;
}

nav {
  font-style: italic;
  grid-area: nav;
  text-align: right;
  padding-right: 1rem;
  
  & ul {
    list-style-type: none;

    & li:after {
      content: "?";
      padding-left: 1em;
    }
  }
}

footer {
  align-items: center;
  border-top: 1px solid black;
  display: flex;
  grid-area: footer;
  justify-content: center;
  padding: 1rem;
}

/* General styling */

[aria-current] {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Solway", serif;
  font-style: normal;
  font-weight: 400;
}

canvas {
  image-rendering: pixelated;
}