body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
}

.container {
    position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    font-family: sans-serif;
}

.content {
  max-width: 80%;
  width: 80%;
  margin: auto;
  padding-top: 5%;
  padding-bottom: 5%;
}

.header h1 {
  color: #9173d6;
}

.searchcontainer {
  display: table-row;
}

.searchleader {
  display: table-cell;
  vertical-align: middle;
  white-space: pre;
}

.searchbox {
  display: table-cell;
  width: 100%;
}

.leaderspan {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: grey;
  font-size: 80%;
  text-align: center;
  height: 5%;
}

.footer a {
  color: grey;
}

@media all and (min-width:0px) and (max-width: 1024px) {
  .content {
    padding-top: 1%;
    padding-bottom: 1%;
    max-width: 95%;
    width: 95%;
  }
  .searchcontainer {
    display: block;
  }
  .searchleader {
    display: none;
  }
  .leaderspan {
    display: none;
  }
  .searchbox {
    display: block;
  }
}