body{
  display:flex;
  justify-content:center;
  height:90vh;
  align-items:center;
  background-color:#f5f5f5;
  font-family: Roboto,Arial,sans-serif;

}

@media (min-width: 1072px)
.container {
    min-height: 50rem;
}

@media (max-width: 767px)
.container {
    height: 100vh;
}

.container{
  width: 45rem;
  background-color:#fff;
  padding: 40px;
  border-radius: 2px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%);  
  box-sizing: border-box;
  -webkit-box-orient: vertical;
  height:auto;
  display:flex;
  flex-direction: column;
  align-items:center;
  font-size: 1rem;
  color: rgba(0,0,0,.87);
  text-align:center;
}

img {
  max-width: 100px;
}

input{
  margin:2vmin;
  font-size: 4vmin;
}

input{
  color: rgba(0,0,0,0.54);
  margin-top:2vmin;
  margin-bottom: 2vmin;
  font-size: 4vmin;
  width: 100%;
  border: none;
  border-width: 0px 0px 1px;
  border-style: solid;
}

.button {
  padding: 5px;
  float: right;
  transition-duration: 0.4s;
  border: 2px solid #008CBA;
}

.button:hover {
  background-color: #008CBA;
  color: white;
}