body {
     background-color: rgb(235, 232, 238);
     font-family: Arial, Helvetica, sans-serif;
 }

 a {
     color: mediumpurple;
 }

 .container {
     margin: 120px auto;
     max-width: 600px;
 }

 header {
     margin-bottom: 30px;
 }

 h1 {
     font-size: 36px;
     font-weight: 800;
     text-align: center;
     line-height: 1.5;
     color: #272844;
 }

 .form-container {
     padding: 15px 20px;
     background-color: white;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgb(0, 0, 0, 0.1);
     margin-bottom: 30px;
 }

 form {
     display: flex;
 }

 .hint {
     line-height: 1.5;
     margin-top: 5px;
     font-size: 12px;
     opacity: 0.5;
 }

 .info {
     padding: 16px 24px;
     font-size: 16px;
     line-height: 20px;
     border: 1px solid rgba(190, 196, 200, 0.859);
     border-radius: 50px;
     color: antiquewhite;
     width: 80%;
 }

 .button {
     margin-left: 10px;
     background-color: mediumpurple;
     color: white;
     border: none;
     padding: 14px, 24px;
     border-radius: 50px;
     width: 140px;
     font-size: 16px;
 }

 .poem {
     padding: 20px;
     line-height: 3;
     background-color: #fff;
     font-size: 14px;
     box-shadow: 0 4px 8px rgb(0, 0, 0, 0.1);
     border-radius: 10px;
     border-left: 3px solid mediumpurple;
 }

 .hidden {
     display: none;
 }

 .poem strong {
     color: mediumpurple;
 }

 footer {
     text-align: center;
     font-size: 13px;
     margin: 30px;
 }


 .generating {
     animation: blink-animation 1s steps(5, start) infinite;
 }

 @keyframes blink-animation {
     to {
         visibility: hidden;
     }
 }

 @-webkit-keyframes blink-animation {
     to {
         visibility: hidden;
     }
 }