#bored{
font-size: 40px;
font-family: 'Italiana', serif;
font-weight: 450;
/* display: inline; */

}

#writeA {
  /* font-size: 30px; */
  font-size: 30px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 100;
  /* display: inline; */
  width: 90vw;

}


#toDatabase {
  display: inline;

}

#poemForm {
  display: inline;

}




#myButton {
  display: inline;

}

#dynamicPoem{
   font-size: 15px;
}

.italiana-regular {
  font-family: "Italiana", sans-serif;
  font-weight: 400;
  font-style: normal;
}
p {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 14px;
  /* padding: 0px 950px 0px 0px; Top/Bottom: 15px, Left/Right: 25px */
  white-space: pre-wrap
}

span {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 14px;
  /* padding: 0px 950px 0px 0px; Top/Bottom: 15px, Left/Right: 25px */
}

.button-container {
  display: flex;             /* make it a flex container */
  align-items: center;       /* vertically align buttons */
  justify-content: left;     /* align to the left */
  gap: 20px;                 /* spacing between buttons */
  flex-direction: row;
}

.button-container form {
  display: flex;           /* ensure form doesn’t expand full width */
  margin: 0;                 /* remove default margin */
}

/* .button-container button,
.button-container input[type='submit'] {
  cursor: pointer;
  display: flex;
  flex-direction:column;
  flex-wrap:wrap;
} */

.page-container {
  margin: 0px 950px 0px 20px; /* Top/Bottom: 15px, Left/Right: 25px */
}
  

@media (max-width: 550px) {
    /* CSS rules for screens smaller than or equal to 768px */
    .page-container {
        /* padding: 10px 10px 10px 10px; Top/Bottom: 15px, Left/Right: 25px */
        /* background: red; */
        width: 95%;
    }
  #bigPoemBox{
    width:90%;
  }

  #trainBox{
    width:60%;
  }
  #writeA {
  /* font-size: 30px; */
  font-size: 6vw;
  }
  #bored{
    font-size:9vw;
  }
.button-container {
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 0;
    margin-top: -40px;
    width: 90%; /* expand to full width */
    gap: 10px;
  }

  .button-container form {
    width: auto;
    margin: 0;
  }
      
}