.animated-shape-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

div.animated {
  /* animation properties */
  animation-name: bounce-animation;
  animation-duration: 1.8s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

  /* other properties */
  width: 100%;
  height: 50px;
  border-radius: 100px;
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  margin-left: auto;
  margin-right: auto;
}

@keyframes bounce-animation {
  from {
    background-color: #ff00b7;
    width: 100%;
    top: 30px;
  }
  to {
    background-color: #001aff;
    width: 50px;
    top: 100px;
  }
}

.not-started {
  color: rgb(79, 78, 78);
}

.not-started::before {
  content: '⚫️ Model not ready';
  padding-right: 0.4rem;
}

.preparing {
  color: rgb(140, 0, 255);
}

.preparing::before {
  content: '🟣 Preparing model... (takes 30+ seconds)';
  padding-right: 0.4rem;
}

.ready {
  color: green;
}

.ready::before {
  content: '🟢 Model is ready';
  padding-right: 0.4rem;
}

.generating-response {
  color: green;
}

.generating-response::before {
  content: '🖊️ Generating response...';
  padding-right: 0.4rem;
}

.error {
  color: red;
}

.error::before {
  content: '❌ Error while preparing the model';
  padding-right: 0.4rem;
}

@media (min-width: 760px) {
  /* CSS rules for screens larger than tablets */
  div.demo-explanation {
    margin-bottom: 4rem;
  }
}