html { overflow-y: auto; } body { font-family: "Century Gothic", 'Lato', sans-serif; margin: 0; padding: 0; min-height: 100vh; width: 100%; display: flex; justify-content: center; align-items: flex-start; transition: background-color 0.3s ease, color 0.3s ease; padding: 40px 20px; box-sizing: border-box; } body.light-theme { background-color: #fff; color: #000; } body.light-theme .content { background: rgba(238, 238, 238, 0.8); padding: 2em; border-radius: 8px; } body.light-theme .theme-toggle { color: #000; } body.dark-theme { background-color: #333; color: #fff; } body.dark-theme .content { background: rgba(55, 55, 55, 0.8); padding: 2em; border-radius: 8px; } body.dark-theme .theme-toggle { color: #fff; } .theme-toggle { position: fixed; top: 10px; left: 10px; font-size: 2rem; cursor: pointer; z-index: 20; transition: color 0.3s ease; } h1 { text-align: center; width: 100%; margin-left: auto; margin-right: auto; } h2 { font-size: 18px; } h3 { text-align: left; width: 100%; margin-left: auto; margin-right: auto; } h1, h3 { font-size: 30px; max-width: 100%; } .content { max-width: 1400px; width: 100%; margin: auto 0; border-radius: 8px; word-wrap: break-word; overflow-wrap: break-word; position: relative; box-shadow: 0 0 0 rgba(255, 198, 0, 0); transition: box-shadow 0.1s ease-out; } .content.active-glow { box-shadow: var(--mouse-x, 0px) var(--mouse-y, 0px) 30px rgba(255, 198, 0, 0.6); } @media (max-width: 800px) { .content { padding: 1.5em; } .theme-toggle { font-size: 1.5rem; } } #chat-container { display: flex; flex-direction: column; gap: 20px; width: 100%; min-height: 50px; } .chat-message { opacity: 0; transform: translateY(10px); animation: fadeInUp 0.5s forwards; font-size: 18px; line-height: 1.5; } .question { font-weight: bold; } .answer { color: #ffc600; margin-bottom: 20px; padding-left: 1em; border-left: 2px solid rgba(128, 128, 128, 0.3); } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .typing-indicator { display: flex; align-items: center; gap: 5px; padding: 10px 0; width: fit-content; display: none; } .dot { width: 8px; height: 8px; background-color: #888; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; } .dot:nth-child(1) { animation-delay: -0.32s; } .dot:nth-child(2) { animation-delay: -0.16s; } .dot:nth-child(3) { animation-delay: 0s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } body.light-theme .answer { color: #d4a000; }