body{
    background-color: #d4a373;
}
h1{
    font-weight: 800;
    font-size: 36px;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
}

header{
    margin-bottom: 30px;
}

.container {
    margin: 60px auto;
    max-width: 600px;
    padding: 0 20px;
  }
  

form{
    display: flex;
   
    
}
.form-container{
    padding: 30px;
    background-color: #ede0d4;
    margin-bottom: 40px;
    box-shadow: 0px -25px 20px -20px rgba(154, 144, 144, 0.17), 25px 0 20px -20px rgba(0, 0, 0, 0.45), 0px 25px 20px -20px rgba(0, 0, 0, 0.45), -25px 0 20px -20px rgba(0, 0, 0, 0.45);
    border-radius: 20px;
}
.hint{
    margin-top: 20px;
    opacity: 0.7;
}
.instructions{
    padding:16px;
    border: 1px solid #adb5bd;
    width: 80%;
    font-size: 16px;
    line-height: 20px;
    border-radius: 20px;
}
.submit-button{
    border: none;
    width: 20%;
    font-size: 16px;
    border-radius: 20px;
    margin-left: 10px;
    color: azure;
    background-color: #d4a373;
cursor: pointer;
}

.poem {
    --s: 11px;
    --c: #222;
  
    width: 100%;
    max-width: 600px;  
    background: 
      conic-gradient(at 50% var(--s), var(--c) 75%, #0000 0)
      0 0 / calc(2 * var(--s)) calc(100% - var(--s)) padding-box;
    border: var(--s) solid var(--c);
  
    box-sizing: border-box;
    padding: calc(var(--s) * 2.5) calc(var(--s) * 1.5);  
  
    box-shadow: 0px -25px 20px -20px rgba(154, 144, 144, 0.17),
                25px 0 20px -20px rgba(0, 0, 0, 0.45),
                0px 25px 20px -20px rgba(0, 0, 0, 0.45),
                -25px 0 20px -20px rgba(0, 0, 0, 0.45);
  
    margin: 0 auto 20px auto;
    color: aliceblue;
    font-size: 16px;
    line-height: 2;
    border-radius: 20px;
  }

  .hidden{
    display: none;
  }

footer{
    text-align: center;
    font-size: 14px;
    margin-top: 40px;
}

a{
    color: #432818;
    text-decoration: none;
}

.generating {
    animation: blink-animation 1s steps(5, start) infinite;
  }
  
  @keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }
  @-webkit-keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }

  /*Responsive Styling */
@media (max-width: 600px) {
    form {
      flex-direction: column;
    }
  
    .instructions {
      width: 90%;
      margin-bottom: 10px;
      font-size: 13px;
    }
  
    .submit-button {
        width: 60%;
        margin: 10px auto 0 auto;
        display: block;
        padding: 10px;
      }
  
    .poem {
      font-size: 15px;
      padding: 20px;
    }
  }
  
  @media (max-width: 400px) {
    h1 {
      font-size: 28px;
    }
  
    .poem {
      font-size: 14px;
      line-height: 1.8;
    }
  }