html {
  font-size: medium;
}

body {
  text-align: center;
  color: #111;
  font-family:  "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 4rem;
  margin-top: 1em;
}

@media (width <= 1000px) {
  html {
    font-size: x-large;
  }
  h1 {
    font-size: 3rem;
  }
}

a:visited {
  color: #380B44;
}

main {
  margin-top: 6rem;
  display: flex;
  flex-flow: column;
  align-items: center;
}

footer {
  position: fixed;
  bottom: 0;
  padding: 0.5em;
}

button#roll-button {
  font-size: 1.1rem;
  background-color: rgb(56, 74, 154);
  color: white;
  padding: 0.5rem;
  margin: 2rem auto;
  cursor: pointer;
}
button#roll-button:hover {
  background-color: rgb(23, 35, 89);
}

#guy {
  width: 50em;
  max-width: 90%;
  min-height: 14em;
}

p.guy-name {
  font-size: 1.8rem;
  font-weight: bold;
  min-height: 5rem;
  line-height: 1.4em;
}

.rarity {
  margin-bottom: 2rem;
  text-transform: uppercase;
  font-size: 1.1rem;
}

span.rarity-badge {
  padding: 0.4rem;
}

.rarity-common {
  color: #111;
}

.rarity-uncommon {
  color: #380B44;
}

.rarity-rare {
  color: #5F0577;
}

.rarity-mythical {
  color: #8700AA;
}

.rarity-legendary {
  color: #AF1672;
}

.rarity-unspeakable {
  color: #D72B39;
}

.rarity-unimaginable {
  color: #FF4000;
}

.rarity-unconscionable {
  color: #FF8200;
}

.rarity-truly-unconscionable {
  color: #FF8200;
}