@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Climate+Crisis&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Vina+Sans&display=swap");
:root {
  --primary-color: #241f3c;
  --secondary-color: #1b2777;
  --bright-color: #008cff;
  --contrast-color: #f3a80a;
  --white: #f2f4f7;
  --black: #020205;
  --grey: #aaaaaa;

  --bg-pri: #1c1b2d;
  --bg-sec: #090e27;

  --glass: #0000009f;
  --white-glass: rgba(255, 255, 255, 0.61);
}
html {
  font-size: 62.5%;
}
body {
  width: 100vw;
  background: linear-gradient(
    315deg,
    var(--primary-color) 50%,
    var(--secondary-color) 100%
  );
  color: var(--white);
  font-size: 1.6rem;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
}
.fs-16 {
  font-size: 1.6rem;
}
.chatbot-header span {
  color: var(--black);
}
.chatbot-container {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.chatbot-message.bot span {
  background: #f1f3f4;
  border-radius: 12px;
  padding: 8px 12px;
  display: inline-block;
  color: var(--black);
}
.chatbot-message.user span {
  background: #0d6efd;
  color: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  display: inline-block;
}
.chatbot-footer input {
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: var(--white-glass);
  color: var(--black);
  font-size: 1.6rem;
  font-family: inherit;
  outline: none;
  transition: background 0.2s;
}

.chatbot-footer input:focus {
  background: #fff;
  box-shadow: 0 0 0 2px var(--contrast-color);
}
.chatbot-footer button {
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: var(--contrast-color);
  color: var(--black);
  font-size: 1.6rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  margin-left: 8px;
}

.chatbot-footer button:hover,
.chatbot-footer button:focus {
  background: var(--secondary-color);
  color: var(--white);
}
.toggle-chatbot {
  font-size: 1.6rem;
}
.hidden {
  display: none !important;
}
footer.footer {
  position: relative;

  width: 100%;
  height: 50vh;

  top: 200%;

  margin-top: 50vh;
  gap: 1vh;
  ul.text-list {
    font: 500 1.2rem "Poppins";
    list-style: none;
    height: 100%;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    font-size: 2rem;

    li.copyright {
      text-align: right;
    }
  }

  h2#footer-title {
    font-family: "Climate Crisis";

    text-align: center;
    font-size: 8vw;
  }
}