body {
  font-size: 1.25em;
  padding: 0.25em;
}

h1 {
  text-align: center;
}

h3 {
  margin: 0.5em;
}

img {
  max-width: 100%;
}

.result {
  margin: 1em 0px;
  padding: 0.25em;
  border-bottom: 2px solid #555;
}

.insert {
  margin-top: 1.5em;
  margin-bottom: -1em;
}

.logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
}

#output, #rendered {
  display: none;
}

.message {
  color: #12AE32;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.8em;
}

.pop-fade-out {
    opacity: 1;
    animation: fade 3s linear;
}

@keyframes fade {
  0% { opacity: 1 }
  50% { opacity: 1 }
  100% { opacity: 0 }
}

.onboarding, .border {
  padding: 0.5em;
  border: 2px solid #6AACF5;
  border-radius: 0.25em;
  margin-bottom: 1em;
  margin-top: 1em;
}

.onboarding button {
  display: block;
  margin-left: auto;
}

.options {
  margin-bottom: 2em;
}

.options h4 {
  margin-bottom: 0.5em;
}

.size-info {
  text-align: center;
  color: #999;
  font-size: 0.9em;
  margin-top: 0.5em;
}