:root {
      --bg-color: aquamarine;
      --sans-one: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      font: 1.1rem/1.5 var(--sans-one);
    }

    div.container {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: auto auto auto auto;
      width: 100vw;
      height: 100%;
      border: 2px solid white;
    }

    nav {
      grid-column: span 10;
      /* border-bottom:2px solid white; */
    }

    header {
      grid-column: span 10;
    }

    main {
      grid-column: span 10;
    }
    .subsection {
      display:flex;
      align-items: center;
      justify-content:center;
    }
    .subsection > span {
      font-size: 1 rem;
      margin-right: 2px;

    }
    .subsection-2 {
      display:flex;
      align-items: center;
      justify-content:center;
    }
    .subsection-2 > span {
      font-size: 1 rem;
      margin-right: 2px;

    }

    nav {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background-color: var(--bg-color);
      /* min-height: 8vh; */
    }

    nav>div {
      margin:0;
      font-variant: small-caps;
    }
    nav>div:nth-child(2) {
      padding-left:10px;
    }
    nav>div:nth-child(3) {
      margin: 0 20px 0 auto;
    }

    header {
      background: #eee;
      display: flex;
      justify-content: space-around;
      align-items: center;
      min-height: 50px;
    }

    header > div:nth-child(1) {
      font-variant: small-caps;
    }

    p {
      margin: 5px 20px;
      user-select: all;
    }

    .reference, .text-note {
      vertical-align: super;
    }
    .reference >a, .text-note > a, cite {
      font-size: 0.8rem;
    }
    cite {
        font-variant: small-caps;
    }
    p::first-letter {
      font-size: 110%;
    }

    p::selection {
      background: #eee;
    }

    footer {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: tomato;
      color: white;
      font-size: 0.9rem;
      min-height: 30px;
      grid-column: span 10;
    }


    details {
      margin-left: 20px;
    }

    details>p {
      padding: 2px 5px 2px 10px;
      font-size: 0.9rem;
      background-color: #eee;
    }

    details>summary {
      font-size: 0.8rem;
      margin-left: 10px
    }
    summary:focus {
      outline: 0;
    }

    button {
      background-color: white;
      padding: 0 1rem;
      border:none;

    }
    button:hover {
      color:tomato;
    }

    @media screen and (min-width:600px) {
      main {
        grid-column: 2/span 8;
      }
    }