body,
    html {
      height: 100%;
      margin: 0
    }

    .bgimg {
      background-image: url('./imgs/forestbridge.jpg');
      height: 100%;
      background-position: center;
      background-size: cover;
      position: relative;
      color: #fff;
      font-family: "Courier New", Courier, monospace;
      font-size: 25px
    }

    .topleft {
      position: absolute;
      top: 0;
      left: 16px
    }

    .bottomleft {
      position: absolute;
      bottom: 0;
      left: 16px
    }

    .bottomleft a {
      color: #fff;
      text-decoration: none
    }

    .bottomleft a:hover {
      color: #ff0
    }

    .middle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center
    }

    .middle a {
      color: #fff;
      font-weight: 700
    }

    .middle a:hover {
      color: #ff0
    }

    hr {
      margin: auto;
      width: 40%
    }

    .middle h1 {
      font-size: 36px;
    }

    .middle p {
      font-size: 22px;
    }

    @media screen and (max-width: 768px) {
      .middle {
        left: 0;
        transform: translate(0%, -50%);
        right: 0;
        margin: auto;
        width: 100%;
      }

      .middle h1 {
        font-size: 45px;
      }

      .middle p {
        font-size: 40px;
      }
    }