html {
  font-family: sans-serif;
  line-height: 1.67;
}

.logo {
  display: block;
}

.logo img {
  margin-top: 2rem;
  max-width: 11rem;
}

header[role=banner],
main[role=main],
footer[role=contentinfo] {
  margin: 0 auto;
  max-width: 37rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

h1 {
  margin: 0 0;
}

footer[role=contentinfo] {
  border-top: 1px dashed #777;
  margin-bottom: 3rem;
  text-align: right;
}

a[href] {
  text-decoration: none;
}

a[href]:hover {
  text-decoration: underline;
}

.success, .danger, .warning, .info {
  border-radius: 0.25rem;
}

.success {
  background-color: #28a745;
}

.success, .success a[href] {
  color: #fff;
}

.danger {
  background-color: #dc3545;
}

.danger, .danger a[href] {
  color: #fff;
}

.warning {
  background-color: #ffc107;
}

.warning, .warning a[href] {
  color: #343a40;
}

.info {
  background-color: #17a2b8;
}

.info, .info a[href] {
  color: white;
}

aside {
  margin: 0;
  padding: 0.2rem 0.8rem;
}

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}

ol.steps li {
  counter-increment: step;
  margin: 0.4rem 0;
  padding: 0;
}

ol.steps li::before {
  content: "Step " counter(step) ": ";
  font-weight: bold;
}

.tagline {
  font-style: italic;
  margin-top: 0.25rem;
}

section {
  margin-top: 1rem;
}

.prompt {
  font-style: italic;
}

.tag {
  border: 1px solid #aaa;
  border-radius: 0.75ex;
  color: #aaa;
  display: inline-block;
  padding: 0 0.5ex;
}

.terms h2, h3, h4, h5, h6 {
  margin-top: 2rem;
  margin-bottom: 0;
}

.terms h2 {
  border-bottom: 1px solid black;
}

.terms h3 {
}

.terms h4:before {
  font-weight: normal;
  font-style: italic;
}

.terms h5 {
  font-weight: normal;
}