h1 {
    font-family: "Roboto Slab", sans-serif;
    text-align: center;
    text-transform: lowercase;
}

.followupquestions a {
    color: grey;
}

.references {
    list-style-type: none; /* Removes default numbering */
    padding-left: 0; /* Adjusts padding as needed */
    counter-reset: list-item-number; /* Initializes the counter */
}

#lenses td {
  font-size: 0.9em;
  border: .5px black solid;
  @media (max-width: 600px) {
    font-size: 0.5em;
  }
}
#lenses  {
  /* margin-top: 1%; */
  width: 83%;
}

.references li {
    counter-increment: list-item-number; /* Increments the list item number */
}

.references li::before {
    content: "[" counter(list-item-number) "] "; /* Adds the brackets and counter */
    margin-right: 5px; /* Adjusts spacing between the bracket and list item text */
}

ul li{
    /* line-height: 0.8em; */
    /* padding-left: 0;  */
    /* margin-bottom: 5px; */
    /* padding: 0px 0px; */
    margin: 0.5em 0; /* Adjusts the vertical margin; reduce the value to make gaps smaller */
}

.confidence {
    color: gray;
}

.progress {
    text-align: center;
    /* font-weight: bold; */
    font-size: 0.9em;
    font-family: "Roboto Slab", monospace;
    /* color: #0077cc; */
    color: navy;

}
.searching {
    font-family: "Roboto Slab", monospace;
    color: darkolivegreen;
    font-weight: bold;
 
}

#searchresults {
}

#citations {
  padding-top: 25px;
    color: grey;
}

#queryExpansionProgress {
  font-size: 0.9em;
  color: grey;
  margin-top: -20px;
  padding-bottom: 12px;
  font-style: italic;
}

footer {
  font-size: 1.0em;
}
@media (max-width: 600px) {
  footer {
    font-size: 0.8em;
  }
}
main {
  flex: 1; /* This makes the main content flex and take available space */
}

html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 70vh;
}


/* CSS */
.fade-in {
    /* animation: fadeInAnimation ease 1s; */
    animation: fadeInAnimation ease 0s;
    animation-fill-mode: forwards;
  }
  
  @keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
  }

/* make all hyperlinks dark green color */
a:link {
    /* color: rgb(9, 147, 9); */
}

/* CSS class for the paragraph */
.example-text {
  font-size: 0.9em;
  color: darkolivegreen;
  font-style: italic;
  padding-top: 1%;
}

/* Base CSS class for all buttons */
.example-button {
  opacity: 0.5;
  background-color: lightgreen;
  /* border: .01px darkgreen solid; */
  color: rgb(0, 0, 0);
  padding: 7px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.85em;
  margin: 8px 4px ;
  cursor: pointer;
  border-radius: 12px;
  a {
    text-decoration: none;
    color: rgb(38, 38, 38);
  }
}



#examples {
    /* margin-top: -5px; */
    margin: -10px 0 15px 0;
    font-size: 0.8em;
    opacity: 0.6;
    color: grey;
    /* Added color for <a> tags within #examples */
    /* a {
        color: rgb(106, 169, 208);
    } */
}

#updatetext {
    font-size:1.1em;
    /* color: darkgreen; */
    color:seagreen;
}

#direct-quotes-button {
  font-variant: small-caps;
  /* color: rgb(199, 226, 235); */
  opacity: 0.6;
}




#metadata {
    font-size: 0.8em;
    color: gray;
    font-style: italic;
}


/* thanks to https://www.kevinleary.net/blog/pulsating-css3-animations/ */
.pulsate {
    -webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.5;
}
@-webkit-keyframes pulsate {
    0% { 
        opacity: 0.5;
    }
    50% { 
        opacity: 1.0;
    }
    100% { 
        opacity: 0.5;
    }
}



/* thanks to https://blog.hubspot.com/website/css-loading-animation */
bodY {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .center {
    height: 13vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: #000; */
  }
  .wave {
    width: 5px;
    height: 50px;
    background: linear-gradient(45deg, darkgreen, lime);
    margin: 10px;
    animation: wave 1s linear infinite;
    border-radius: 20px;
  }
  .wave:nth-child(2) {
    animation-delay: 0.1s;
  }
  .wave:nth-child(3) {
    animation-delay: 0.2s;
  }
  .wave:nth-child(4) {
    animation-delay: 0.3s;
  }
  .wave:nth-child(5) {
    animation-delay: 0.4s;
  }
  .wave:nth-child(6) {
    animation-delay: 0.5s;
  }
  .wave:nth-child(7) {
    animation-delay: 0.6s;
  }
  .wave:nth-child(8) {
    animation-delay: 0.7s;
  }
  .wave:nth-child(9) {
    animation-delay: 0.8s;
  }
  .wave:nth-child(10) {
    animation-delay: 0.9s;
  }
  
  @keyframes wave {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }

  .feedbackicon {
    width: 4%;
    padding-right: 1%;
  }

  @media (max-width: 768px) {
    .feedbackicon {
      width: 8%;
    }
  }