html, body {
  font-family: "Open Sans", sans-serif; 
  font-size: 16pt;
  padding: 0;
  margin: 0;
  height: 100%;
  background: #6F6F6F;
}

img.photo {
  max-width: 15em;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  float: left;
}
@media only screen and (max-width: 500px) {
  img.photo {
    float: none;
    display: block;
    margin: 0 auto 1em;
  }
}

.main {
  max-width: 75em;
  margin: 0 auto;
  padding: 2em;
  background: #fff;
  min-height: 100%;
  display: flow-root;
}

h1 {
  margin: 0;
}

/* Make link look like surrounding text */
.link-plain {
  color: inherit;
  text-decoration: none;
}

/* Show underline when interactive */
.link-plain:hover,
.link-plain:focus-visible {
  text-decoration: underline;
}

/* Regular */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;          
}

/* Bold */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;          
}