styles.css

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
  background: #556270;
}

#container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
}

#password-suggestion, #password-history {
    margin: auto;
    flex-basis: auto;
    flex-grow: 0;
}

#password-suggestion {
    padding: 10px;
    height: 35px;
    color: #eefaf9;
    font:bold 35px Arial;
    text-shadow:2px 2px #080a0b;
}

#password-history {
    height: 450px;
}

#password-history ul {
    height: 300px;
    overflow: hidden;
    padding: 0;
    margin-bottom: 150px;
}

#password-history ul li {
    height: 50px;
    line-height: 50px;
    margin: 0;
    list-style: none;
    text-align: center;
    color: #c2cccb;
    font: bold 25px Arial;
    text-shadow: 2px 2px #080a0b;
}


#footer {
  height: 60px;
  bottom: 60px;
  position: absolute;
}

#footer div {
  vertical-align: top;
}

#footer .seal {
  display: inline-block;
  background: no-repeat url(seal.png);
  width: 60px;
  height: 60px;
  margin-left: 50px;
}

#footer .productname {
  display: inline-block;
  color: #eefaf9;
  margin-left: 20px;
  height: 60px;
  font:bold 20px Arial;
  padding: 20px 0;
}