a {
  color: rgba(70,70,120,0.8);
  text-decoration: none;
}
a:hover {
  color: rgba(70,70,120,1);
}
html {
  border-top: 3px solid rgba(70,70,120,0.8);
}
body {
  background-color: rgb(250,250,248);
  color: rgba(40,40,40,1);
  font-variant-numeric: oldstyle-nums;
}
header nav ul li {
  list-style-type: none;
  padding-left: 0;
  padding-bottom: 0.2em;
  margin-left: -1em;
}
h1, h2 {
  font-weight: normal;
  line-height: 1;
}
h1 {
  font-weight: normal;
  margin: 0 0 2em 0;
  color: rgba(70,70,120,1);
}
h2 {
  margin: 1.5em 0 1em 0;
}
li {
  list-style-type: square;
}
p, ol, ul {
  font-size: 1em;
  line-height: 1.4em;
  margin: 1em 0 0 0;
}
ol, ul {
  padding: 0 0 0 1em;
}
p.gloss {
  font-size: 1.2em;
  border-bottom: 1px solid rgba(70,70,120,0.8);
  padding-bottom: 1em;
  color: rgb(100,100,100);
}
header p.contact {
  background-color: rgb(90,180,90);
  color:rgb(240,240,240);
  font-size: 0.9em;
  padding: 0.4em;
}
p.vcard {
  border-top: 1px solid rgba(70,70,120,0.4);
  padding-top: 2em;
  margin-top: 4em;
}
a.call-to-action {
  color: rgb(90,180,90);
  font-weight: 700;
}
a.call-to-action:before {
  content: "☛ " ;
}
footer {
  font-size: 0.8em;
  color: rgb(100,100,100);
}
body {
  max-width: 90vw;
  margin: 1em auto 0 auto;
  display: grid;
  gap: 2em;
}
header {
  grid-column-start: 2;
  grid-column-end: -2;
}
article {
  grid-column-start: 2;
  grid-column-end: -2;
}
footer {
  grid-column-start: 2;
  grid-column-end: -2;
}
@media screen and (width >= 800px) {
  body {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 3vw repeat(9, 1fr);
  }
  header {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: -2;
  }
  article {
    grid-row-start: 2;
    grid-row-end: -2;
  }
  footer {
    grid-row-start: 10;
    grid-row-end: -1;
  }
  header nav ul li {
    padding-bottom: 0.8em;
  }

}