styles.css

body {
  margin-top: 4em;
}

.centered {
  margin: auto;
}

.card-square.mdl-card {
  width: 320px;
  height: 320px;
  margin-bottom: 1em;
}

.card-square > .mdl-card__title {
  color: #fff;
  background: #46B6AC;
}

.mdl-demo section .section__circle-container > .section__circle-container__circle {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  margin: 8px 0;
}

.mdl-demo .mdl-card .mdl-card__supporting-text {
  color: inherit;
}

.device {
  text-align: center;
  border: 2px solid #888;
  height: 4em;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
}

#challenge-field {
  text-align: center;
  margin-bottom: 1em;
  margin-top: 1em;
  width: 78%;
}

#send-challenge {
  width: 18%;
}

#response {
  text-align: center;
  margin-bottom: 1em;
  margin-top: 1em;
  padding 2px;
  width: 100%;
  height: 1.5em;
  border: 2px solid #888;
}