body {
  background-color: antiquewhite;
}
.fredericka-the-great-regular {
  font-family: "Fredericka the Great", serif;
  font-weight: 400;
  font-style: normal;
}
h1 {
  text-align: center;
  color: chocolate;
  font-family: "Fredericka the Great", serif;
  font-weight: 450;
  font-size: 60px;
}
h2 {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 14px;
}

.submit-button {
  background-color: chocolate;
  color: white;
  border-radius: 20px;
  padding: 4px 10px;
}

#user-input {
  border-radius: 20px;
  padding: 4px 10px;
}

#box {
  background-color: whitesmoke;
  margin: 10px auto;
  max-width: 400px;
  padding: 2%;
  border-radius: 10px;
}

#poem-generator-form {
  display: block;
  margin: 10px auto;
  max-width: 400px;
  text-align: center;
}

#poem {
  padding-top: 10px;
  text-align: center;
}

footer {
  text-type: italic;
  text-align: center;
  text-align: center;

  font-family: "Fredericka the Great", serif;
  font-weight: 700;
  font-size: 16px;
}

a {
  color: chocolate;
}

.loader {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  margin:15px auto;
  position: relative;
  color: chocolate;
  box-sizing: border-box;
  animation: animloader 1s linear infinite alternate;
}

@keyframes animloader {
  0% {
    box-shadow: -38px -6px, -14px 6px,  14px -6px;
  }
  33% {
    box-shadow: -38px 6px, -14px -6px,  14px 6px;
  }
  66% {
    box-shadow: -38px -6px, -14px 6px, 14px -6px;
  }
  100% {
    box-shadow: -38px 6px, -14px -6px, 14px 6px;
  }
}