body {
  font-size: 1.2rem;
}

h1 {
  padding-top: 100px;
  border-bottom: 2px solid;
}

.prompt-holder {
  border: 1px solid;
  padding: 20px 35px;
  margin: 20px 0;
}

.col-md-6 {
  padding-bottom: 30px;

}


/* Initial state of the prompt div */
.prompt {
  transition: background-color 0.5s ease, opacity 0.5s ease;
  height: 180px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden; 
  text-overflow: ellipsis;
}

/* When the copy is successful, this class will be added */
.copied-success {
  background-color: green;
  opacity: 1;
  animation: fadeOut 2s forwards; /* Triggers fade out over 2 seconds */
}

button{
  margin: 30px auto;
  display: block;
  transition: .4s ease;
  background-color: lightblue;
  border-radius: 50px;
}

button:hover{
  cursor: pointer;
  background-color: green;
}

button.copy-button {
  padding: 10px 20px;
}

.caveat {
  font-size: .8rem;
  min-height: .8rem;
  line-height: .8rem;
  font-style: italic;  
}

/* Define the fadeOut animation */
@keyframes fadeOut {
  0% {
    background-color: lightblue;
  }
  100% {
    background-color: white;
  }
}