body {
  background: linear-gradient(
    120deg,
    rgb(69, 179, 224) 11.2%,
    rgb(102, 51, 153) 100.2%
  );
  min-height: 700px;
  font-family: sans-serif;
}

h1 {
  text-align: center;
  font-size: 40px;
  font-family: Georgia, "Times New Roman", Times, serif;
}
p {
  font-family: "Courier New", Courier, monospace;
  color: rgb(70, 70, 70);
  font-size: 18px;
  font-weight: bold;
}

footer {
  margin: 50px auto;
  text-align: center;
  color: rgba(0, 0, 0, 0.7);
  max-width: 450px;
}
a {
  color: rgb(202, 210, 242);
}
.prompt-box {
  margin: auto;
  display: flex;
  justify-content: center;
  padding: 10px;
  min-width: 180px;
  text-align: center;
}
.story-button {
  margin: 30px auto;
  display: flex;
  justify-content: center;
  background-color: rgb(114, 76, 152);
  border: none;
  border-radius: 10px;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 18px;
  color: rgb(255, 255, 255);
}

.container {
  max-width: 500px;
  margin: 0 auto;
  margin-top: 50px;
  background-color: white;
  opacity: 75%;
  padding: 20px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#text-box {
  min-height: 100px;
  max-width: 450px;
  background-color: rgba(0, 0, 0, 0.15);
  margin: auto;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  padding: 15px;
  border-left: 3px solid rgb(82, 104, 189);
}
.story-button:hover {
  background-color: rgb(69, 13, 125);
  color: white;
  transition: all 1.5s ease-in-out;
}
.story-button:active {
  box-shadow: none;
  transition: all 1s ease-out;
}
.prompt-box:focus {
  border: 1px solid rgb(82, 104, 189);
}