:root {
  --colour1: #fafbfc;
  --colour2: #2d3748;
  --colour3: #4a5568;
  --colour4: #3182ce;
  --colour5: #e53e3e;
  --colour6: #38a169;
  --colour7: #2c5282;
  --colour8: #e2e8f0;
}

.button-danger {
  background: var(--colour5);
}

.button-secondary {
  background: var(--colour6);
}

.button-dark {
  background: var(--colour2);
  color: var(--colour1);
}

a {
  color: var(--colour4);
}

a:hover, a:visited:hover {
  color: var(--colour7);
}

/* a:visited {
  color: var(--colour2);
} */

html {
  font-size: 110%;
}

body {
  background-color: var(--colour1);
  color: var(--colour2);
}

.content {
  margin: 5px auto 50px;
  max-width: 48em;
  line-height: 1.6em;
}

.result-row {
  border-color: var(--colour8);
  border-width: 1px;
  border-radius: 6px;
  border-style: solid;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 12px;
  margin: 20px 2px;
  text-align: center;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.title {
  font-size: 130%;
}

.result-name {
  font-size: 140%;
  text-align: left;
}

.vertical-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 47.9999em) {
  .content {
    max-width: 90%;
  }
  .desktop {
    display: none;
  }
  .forward-btn {
    margin-top: 3px;
  }
  .back-btn {
    margin-bottom: 3px;
  }
  .result-name {
    font-size: 120%;
    text-align: center;
  }
}

@media screen and (min-width: 48em) {
  .mobile {
    display: none;
  }
  .result-row {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .desktop-left-pad {
    padding-left: 5px;
  }
  .desktop-unset-justify {
    justify-content: unset;
  }
}

.item-center {
  margin-left: auto !important;
  margin-right: auto !important;
}