@font-face {
  font-family: "SF-Mono-Semibold";
  color: white;
  src: local()
}

@font-face {
    font-family: "Helvetica-Bold";
    src: local("Helvetica-Bold");
}

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */
  html {
    max-width: 100vw;
  }
}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
  html {
    max-width: 100vw;
  }
}
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
  html {
  max-width: 60vw;
  margin: auto;
  margin-top: 5vh;
  }
}
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */
  html {
  max-width: 60vw;
  margin: auto;
  margin-top: 5vh;
  }
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
  html {
  max-width: 50vw;
  margin: auto;
  margin-top: 5vh;
  }
}
@media (min-width:1281px) { /* hi-res laptops and desktops */
  html {
  max-width: 50vw;
  margin: auto;
  margin-top: 5vh;
  }
}

/* @media (min-width: 1024px) {
html {
max-width: 50vw;
margin: auto;
margin-top: 5vh;
}
} */

body {
  background-color: #292A30;
  margin: 20px;
}

p {
  color: white;
  font-family: SF-Mono-Semibold;
}

a {
  color: #F6B500;
  /*   text-decoration: none; */
}

h1 {
  color: white;
  font-family: Helvetica;
  display: inline;
}

.mission {
  color: #77787A;
  font-style: italic;
}

.color-green {
  color: #71B6A8;
}

.color-pink {
  color: #FD7AB2;
}

.header {
  display: block;
}

.italic {
  font-style: italic;
}

p.about {
  color: white;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 150%;
}

/*p.date {
  color: #8B8B8B;
  text-align: center;
  font-size: 80%; 
}*/