@font-face {
  font-family: "Ostrich Sans Black";
  src: local("Ostrich Sans Black"), url("/font/OstrichSans-Black.otf") format("opentype");
}
@font-face {
  font-family: "Ostrich Sans Medium";
  src: url("/font/OstrichSans-Medium.otf") format("opentype");
}
body {
  background-color: #F1EADD;
}

.frontpage {
  max-width: 500px;
  margin: 20px auto;
  font-family: "Ostrich Sans Black", sans-serif;
  font-size: 24px;
}
.frontpage a {
  text-decoration: underline;
}
.frontpage a:hover, .frontpage a:focus {
  text-decoration: underline;
}
.frontpage p {
  line-height: 1.1;
  margin: 26px 20px;
}
.frontpage ul {
  list-style-type: none;
  padding: 0;
  margin: 0 0 0 50px;
}

a.color-li {
  color: #CD1843;
}

a.color-itch {
  color: #57B993;
}

a.color-mp {
  color: #4FA8F6;
}

a.color-sss {
  color: #C6B931;
}

a.color-guy {
  color: #E788C7;
}

a.color-bs {
  color: #E29A23;
}

a.color-ott {
  color: #0637D1;
}

a.color-dis {
  color: #8B00FF;
}

a.color-li:hover, a.color-li:focus {
  background-color: #CD1843;
  color: #fff;
  text-decoration: none;
}

a.color-itch:hover, a.color-itch:focus {
  background-color: #57B993;
  color: #fff;
  text-decoration: none;
}

a.color-mp:hover, a.color-mp:focus {
  background-color: #4FA8F6;
  color: #fff;
  text-decoration: none;
}

a.color-sss:hover, a.color-sss:focus {
  background-color: #C6B931;
  color: #fff;
  text-decoration: none;
}

a.color-guy:hover, a.color-guy:focus {
  background-color: #E788C7;
  color: #fff;
  text-decoration: none;
}

a.color-bs:hover, a.color-bs:focus {
  background-color: #E29A23;
  color: #fff;
  text-decoration: none;
}

a.color-ott:hover, a.color-ott:focus {
  background-color: #0637D1;
  color: #fff;
  text-decoration: none;
}

a.color-dis:hover, a.color-dis:focus {
  background-color: #8B00FF;
  color: #fff;
  text-decoration: none;
}

.centered {
  text-align: center;
}

.deemph {
  font-family: "Ostrich Sans Medium", sans-serif;
}

.email {
  font-size: 20px;
}

.lilguy {
  max-width: 150px;
  height: auto;
}

@media screen and (min-width: 320px) {
  .frontpage {
    font-size: 26px;
  }
  .frontpage p {
    margin: 30px 20px;
  }
  .frontpage ul {
    margin-left: 60px;
  }
  .email {
    font-size: 22px;
  }
}
@media screen and (min-width: 600px) {
  .frontpage {
    font-size: 30px;
    max-width: 700px;
  }
  .frontpage p {
    margin: 40px 60px;
  }
  .frontpage ul {
    margin-left: 110px;
  }
  .email {
    font-size: 28px;
  }
}