pre {
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  overflow-wrap: break-word;   /* CSS3 */
  overflow-x: auto;            /* Horizontal scrollbar if needed */
  font-family: 'Patrick Hand', cursive;
  max-width: 800px;
  width: 90vw;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  z-index: 999999;
}





#output {
width: 90vw;
min-height: 100px;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 20px;
background-color: none;
color: white;
margin-top: 16px;
padding-left: 30px;
padding-right: 30px;
text-align: left;
   z-index: 999999999999999;
overflow-y: auto;
font-family: 'Patrick Hand', cursive;
 margin-bottom: 100px; 
  display: block;
}

/* Image preview styles */

#output img {
background-color: white;
color: black;
   border-radius: 5px;
  box-shadow: 0 0 10px rgb(255, 255, 255, 0.8);
  cursor: pointer;
}


.user-text {
color: #04ff00;
margin-bottom: 30px;
font-size: 16px;
font-weight: bolder;
text-align: left;
font-family: 'Patrick Hand', cursive;
background-color: rgba(0, 0, 0, 0.9);
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(255, 255, 255, 0.5);
}

.chatgpt-text {
color: white;
margin-bottom: 20px;
margin-top: 10px;
font-size: 16px;
font-weight: bolder;
font-family: 'Patrick Hand', cursive;
text-align: left;
background-color: rgba(0, 0, 0, 0.9);
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
  border-radius: 10px;
padding-bottom: 20px;
  box-shadow: 0 0 10px rgb(255, 255, 255, 0.5);
}

.conversation {
margin-bottom: 50px;
color: #04ff00;
font-family: 'Patrick Hand', cursive;
font-weight: bolder;
}


#userInput {
  position: fixed;
  bottom: -5px;
  left: 0;
  width: 100vw;
  height: 60px;
  background: black;
  border: none;
  color: white;
  padding: 0 10px;
  font-size: 16px;
  z-index: 999999;
  font-family: 'Patrick Hand', cursive;
  padding-left: 20px;
  padding-right: 20px;
  border-top: 1px solid blue;
  border-bottom: 1px solid blue;
  display: none;
}

#userInput.visible {
  display: block;
}

#userInput:focus {
  outline: none;
}