.bg {
  position: absolute;
  z-index: -1;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background-image: url("../img/typing.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(5px); }
  @media screen and (max-width: 850px) {
    .bg {
      height: 110vh; } }

.index-box {
  background: rgba(255, 255, 255, 0.815);
  box-shadow: 0 2px 10px 1px #4b4b4b;
  padding: 5em 20px 5em 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 80%;
  margin: 0 auto; }
  @media screen and (max-width: 850px) {
    .index-box {
      padding: 3em 20px;
      width: 95%; } }
  .index-box a {
    color: #088ff1; }
    .index-box a:hover {
      color: #03375D;
      text-decoration: none; }
  .index-box h1 {
    color: #181F1C;
    width: 100%;
    text-align: center;
    margin-bottom: 2em; }
    @media screen and (max-width: 850px) {
      .index-box h1 {
        font-size: 2em;
        margin: 0 0 1em 0; } }
  .index-box .blurb {
    text-align: center;
    width: 100%; }
    .index-box .blurb p {
      font-size: 1.3em;
      width: 100%; }

.buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2em; }
  .buttons a {
    font-size: 1.5em;
    background: #03375D;
    color: #F7F7F7;
    cursor: pointer;
    border: none;
    padding: 7px 10px 0 10px;
    text-align: center;
    width: 250px;
    margin: 0 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px 1px #181818;
    transition: all .2s ease-in-out; }
    @media screen and (max-width: 850px) {
      .buttons a {
        margin: 20px; } }
    .buttons a:hover {
      text-decoration: none;
      background: #0671c0;
      box-shadow: none; }
    .buttons a:focus {
      outline: none; }