html, body {
  height:100%;
}

body {
  background: #f2f3f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
    background: white;
    box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05);
    border-radius: 4px;
    color: #595d6e;
    width: 420px;
    padding: 30px;
}

h1 {
  font-size: 22px;
  margin-bottom: 28px;
}


button {
  border-radius:200px;
  padding: 8px 32px;
}
button.disabled {
  pointer-events: none;
  opacity:0.5;
}
input.readonly {
  pointer-events: none;
  opacity:0.5;
}

.other-action {
  color: #6b7192;
  font-size: 12px;
  float: right;
  margin-top: -21px;
}
.other-action:hover {
  text-decoration: underline;
}
.message {
  font-size:14px;
  margin-bottom:8px;
}
.err {
  margin-bottom:4px;
  font-size:14px;
  color:#f8407b;
}





/* lil smaller desktop screen sizes */
@media screen and (max-width:1200px) {

}


/* ipad-ish sizes */
@media screen and (max-width:980px) {

}


/* true 'mobile' */
@media screen and (max-width:500px) {
  main {
    width:95%;
  }
}