/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #212121;
  color: white;
  font-family: "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

}
  
  .cursor {
  display: inline-block;
  width: 0;                       /* we’ll use a border instead of a fill */
  height: 1.2em;
  margin-right: 0.25em;
  border-left: 0.1em solid #ffffff;
  vertical-align: text-bottom;
  animation: blink 1s steps(1, start) infinite;
}

/* Define the blinking animation */
@keyframes blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
  
  button.button{
    border: 1px solid grey;
  border-radius: 60px;
  padding: 10px 20px 10px;
  position: fixed;
  color: #aaaaaa;
  background-color: #303030;
  animation: buttonanim 0.8s ease-out forwards;
  animation-duration: 1.5s;
  cursor: pointer; 
  }
  
  .intro    { left: 12%; transform: translateX(-50%); }
.student  { left: 32%; transform: translateX(-50%); }
.surveybtn{ left: 49%; transform: translateX(-50%); }
.teacher  { left: 65%; transform: translateX(-50%); }
.LePen    { left: 83%; transform: translateX(-50%); flex-wrap: nowrap; overflow-x: auto;}
  
  
  
  

  @keyframes buttonanim {
   from {bottom: 250px;}
   to {
    bottom: 450px;
  }
  }
  
  .button:hover {background-color: #e7e7e7; color: black;}
  
.arrow {
  display: flex;               /* makes content center nicely */
  align-items: center;
  justify-content: center;
  z-index: 2;
  border: 1px solid black;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 266px;
  right: 320px;
  background-color: #aaaaaa;
  color: black;
  font-size: xx-large;
  cursor: pointer;             /* makes it feel clickable */
  transition: background-color 0.3s, color 0.3s;
}
  
  .arrow.active {
  background-color: white;
  color: black;
}

/* ...but hover should still win */
.arrow.active:hover {
  background-color: #aaaaaa;
  color: white;
}
  
  
  .introtext{
   position: fixed;
   bottom: 500px;
   right: 475px;
   text-align: center;
    
  }
  .title{
   font-size: xx-large;
   text-align: right;
   text-align: center;
  }
  
  
  #box {
  border: 1px solid grey;
  border-radius: 60px;
  z-index: 1;
  /*padding: 10px 750px 10px 30px;*/
  height: 70px;
  width: 900px;
  align-items: center;     /* keeps it vertically centered */
  justify-content: flex-start; /* pushes text to the left */
  padding-left: 30px;  
  position: fixed;
  bottom: 250px;
  right: 300px;
  color: #aaaaaa;
  background-color: #303030;
  line-height: 40px;  
  }
  
  @keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(20px); /* start slightly below */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.float-in {
  animation: floatIn 0.6s ease-out forwards;
}
  
  #searchBarWrapper {
    position: relative;   /* THIS LINE IS THE MAGIC */
}
  
  #out {
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width: 900px; 
}

.chatitem {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.bubble.user {
  align-self:flex-end;
  padding:8px 12px;
  border-radius:12px;
  background:#cfe6ff;
  max-width:60%;
}

.answer {
  font-size:0.85rem;
  opacity:0.8;
  max-width:60%;
}