html, body {
  height: inherit;
  background-color: #fafafa;
}
.title {
  text-align: center;
}


@media (min-width: 530px) {
  .sign-in-card-wide.mdl-card {
    width: 512px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }
  .sign-in-card-wide > .mdl-textfield {
    width: 480px;
    margin-left: 16px;
  }

  .sign-in-button {
    width: 480px;
    margin: 16px;
  }
}

@media (max-width: 529px) {
  .sign-in-card-wide.mdl-card {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }
  .sign-in-card-wide > .mdl-textfield {
    width: calc(100% - 32px);
    margin-left: 16px;
  }

  .sign-in-button {
    width: calc(100% - 32px);
    margin: 16px;
  }
}

.sign-in-card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: url('/static/images/sign_in.jpg') center / cover;
}

.sign-in-card-wide > .mdl-card__menu {
  color: #fff;
}