html, body {
    display: flex;
  }
  html, body, #page {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #page {
    padding-top: 2vw;
    text-align: center;
    font-size: 15vw;
  }
  h1 {
    font-size: 13vw;
    padding: 0;
    margin: 0;
  }
  #joke {
    font-size: 0.5em;
    padding: 0.5em;
  }
  #checkBtn {
    font-size: 10vw;
    padding: 0.5em;
  }
  .img {
    width: 12vw;
  }
  @media (min-width: 800px) {
    #page {
      font-size: 7vw;
    }
    h1 {
      font-size: 7vw;
    }
    #checkBtn {
      font-size: 5vw;
      padding: 0.5em;
    }
    .img {
      width: 7vw;
    }
  }
  .credit {
    margin-top: 1em;
    font-size: 10pt;
  }
  .online {
    background-color: #18c118;
  }
  .captive-portal {
    background-color: #efd51c;
  }
  .offline {
    background-color: #ec4040;
  }
  .timeout {
    background-color: #ec4040;
  }
  .connection-fail {
    background-color: #ec4040;
  }
  .unknown {
    background-color: #cccccc;
  }