html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: rgb(54, 117, 135);
  background-image: url(/images/blue-wave-tile.jpg);
  color: #151c21;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Charis SIL', Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  font-size: max(13pt, 1.25vw);
  line-height: 1.5em;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 67vh;
}
.container {
  margin: 0;
  padding: min(1em, 2.5vh) min(1em, 6vh);
  border: max(0.5em, 1vw) groove rgb(135, 198, 232);
  border-radius: min(2em, 3vh);

  background-color: rgb(228, 244, 245);
  background-image: linear-gradient(transparent, rgba(0,0,0, 0.01) 40%, rgb(3, 44, 55));

  box-shadow: 0.15em 0.25em 1em rgba(47, 79, 79, 0.25);
}
h1 {
  margin: 1em 0 1em 0;
}
h1, button {
  letter-spacing: 0.02em;
}
p {
  margin: 1em 0;
}
.icon {
  height: 1em;
  vertical-align: baseline;
  position: relative;
  top: 0.0625em;
}
.pure-button {
  font-family: inherit;
  font-size: 100%;
  padding: 0.5em 1em;
  color: rgba(0, 0, 0, 0.80);
  border: none rgba(0, 0, 0, 0);
  background-color: #d6dcde;
  text-decoration: none;
  border-radius: 0.25em;
  font-weight: bold;

  display: flex;
  flex-direction: row;
  align-items: center;
}
.pure-button:hover,
.pure-button:focus {
  background-image: linear-gradient(transparent, rgba(0,0,0, 0.0) 40%, rgba(0,0,0, 0.2));
}
.pure-button:focus {
  outline: 0;
}
.pure-button:active {
  box-shadow: 0 0 0 30px rgba(0,0,0, 0.5) inset, 0 0 30px rgba(0,0,0, 0.75) inset;
  border-color: #000;
}
.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
  background-color: rgb(34, 63, 146);
  color: #efeded;
}
.mw-100 {
  max-width: 100%;
}