:root {--bg-color: #000;--card-bg: rgba(255, 255, 255, 0.05);--border-color: rgba(255, 255, 255, 0.1);--text-color: #e0e0e0;--accent-blue: #007bff;--accent-blue-light: rgba(0, 123, 255, 0.3);--button-bg: #fff;--button-text: #000;}html, body {  margin: 0;  padding: 0;  height: 100%;  font-family: 'Roboto', sans-serif;  color: var(--text-color);  background-color: var(--bg-color);  overflow-x: hidden; /* This line hides the horizontal scrollbar */  position: relative;}/* Enhanced Galaxy Background Animation */@keyframes move-twinkle-back { from { background-position: 0 0; } to { background-position: -10000px -5000px; }}@keyframes move-twinkle-front { from { background-position: 0 0; } to { background-position: 10000px 5000px; }}@keyframes shooting-star { 0% { transform: translate(var(--x-start), var(--y-start)) rotate(var(--angle)); opacity: 0; } 5% { opacity: 1; } 100% { transform: translate(var(--x-end), var(--y-end)) rotate(var(--angle)); opacity: 0; }}@keyframes nebula-pulse { 0% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.1); opacity: 0.5; } 100% { transform: scale(1); opacity: 0.3; }}.stars, .twinkling, .clouds { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block;}.stars { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 1000 1000"><circle cx="500" cy="500" r="0.8" fill="white"/></svg>'); background-size: 80px 80px; background-repeat: repeat; z-index: 1; opacity: 0.7;}.twinkling{ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 1000 1000"><circle cx="500" cy="500" r="1.2" fill="white"/></svg>'); background-size: 150px 150px; animation: move-twinkle-back 200s linear infinite; z-index: 2; opacity: 0.8;}.clouds { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 1000 1000"><circle cx="500" cy="500" r="1.8" fill="white"/></svg>'); background-size: 250px 250px; animation: move-twinkle-front 300s linear infinite; z-index: 3; opacity: 0.9;}.shooting-star { position: absolute; width: 150px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); animation: shooting-star 10s linear infinite; z-index: 4; opacity: 0;}.nebula { position: absolute; bottom: -20%; right: -20%; width: 80vw; height: 80vw; background: radial-gradient(circle at 70% 30%, #4a00e0 0%, #8e2de2 20%, transparent 70%); border-radius: 50%; filter: blur(100px); animation: nebula-pulse 20s ease-in-out infinite; z-index: 0;}/* End Galaxy Background */.main-container {position: relative;z-index: 10;display: flex;flex-direction: column;justify-content: center;align-items: center;min-height: 100vh;padding: 20px;text-align: center;}.header-box {position: absolute;top: 40px;left: 40px;text-align: left;}.header-box h1 {margin: 0;font-family: 'Dancing Script', cursive;font-size: 2.8rem;font-weight: 700;letter-spacing: 1px;color: #fff;text-shadow: 0 0 20px rgba(0, 123, 255, 0.9);}.header-box p {margin: 0;font-style: italic;font-size: 1rem;font-weight: 300;color: var(--text-color);}.content-wrapper {display: flex;align-items: center;justify-content: center;gap: 60px;background: var(--card-bg);backdrop-filter: blur(15px);border: 1px solid var(--border-color);border-radius: 10px;padding: 40px;max-width: 1200px;width: 100%;box-shadow: 0 0 40px rgba(0, 123, 255, 0.2);}.text-box {flex: 1;text-align: left;}.text-box h2 {font-size: 2rem;margin-top: 0;font-weight: 400;color: #fff;}.join-button-box {flex-shrink: 0;}.join-button {background: var(--accent-blue);color: #fff;border: none;padding: 15px 30px;font-size: 1.2rem;font-weight: 700;border-radius: 5px;cursor: pointer;transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;text-transform: uppercase;letter-spacing: 1px;box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);}.join-button:hover {background: #0056b3;transform: translateY(-3px);box-shadow: 0 6px 20px rgba(0, 123, 255, 0.6);}/* New Image Styles */.alison-image {  width: 100%;  height: 100%;  object-fit: cover;  border-radius: 50%; /* This makes the image round */  box-shadow: 0 0 30px rgba(0, 123, 255, 0.4);}/* Collaboration Animation */@keyframes person-glow {  0%, 100% { box-shadow: 0 0 5px rgba(255,255,255,0.8); }  50% { box-shadow: 0 0 20px rgba(0, 123, 255, 0.9); }}@keyframes spark-float {  0% { transform: translateY(0) scale(0); opacity: 0; }  50% { transform: translateY(-20px) scale(1.2); opacity: 1; }  100% { transform: translateY(-40px) scale(0); opacity: 0; }}.collaboration-animation {  width: 250px;  height: 250px;  position: relative;  display: flex;  justify-content: center;  align-items: center;  flex-shrink: 0;  overflow: hidden;}.person {  position: absolute;  bottom: 0;  animation: person-glow 2s infinite ease-in-out;  background: #FFDAB9; /* Default light skin tone */  width: 40px;  height: 50px;  border-radius: 40px 40px 0 0;}.person::before, .person::after {  content: '';  position: absolute;  background-color: black;}.person.p1 { left: 15%; background-color: #FFDAB9; } /* Light skin tone */.person.p1::before {  width: 50px; height: 30px; border-radius: 20px 20px 0 0; top: -20px; left: -5px;  background-color: #A9A9A9; /* Gray hair */}.person.p2 { left: 45%; background-color: #D2B48C; } /* Medium skin tone */.person.p2::before {  width: 40px; height: 50px; border-radius: 20px 20px 0 0; top: -40px; left: 0;  background-color: #5C4033; /* Brown hair */}.person.p3 { right: 15%; background-color: #8B4513; } /* Dark skin tone */.person.p3::before {  width: 45px; height: 35px; border-radius: 50% 50% 0 0; top: -25px; left: -2.5px;  background-color: #000000; /* Black hair */}.collaboration-spark {  position: absolute;  width: 30px;  height: 30px;  background: radial-gradient(circle, #fff 0%, #007bff 50%, transparent 100%);  border-radius: 50%;  filter: blur(5px);  animation: spark-float 3s infinite ease-out;  bottom: 30%;}/* End Collaboration Animation *//* Realistic Footer Styles */.footer-container {  position: fixed;  bottom: 0;  width: 100%;  height: 200px; /* Increased height for more detail */  z-index: 5;  background: transparent;  overflow: hidden; /* Hide anything that goes outside the container */}.footer-mountain-layer {  position: absolute;  bottom: 0;  width: 120%; /* Wider than screen to prevent gaps */  height: 100%;  left: -10%;  background: linear-gradient(to top, rgba(30, 30, 30, 0.9), rgba(0,0,0,0.4));  animation-name: mountain-move;  animation-timing-function: linear;  animation-iteration-count: infinite;}.footer-mountain-far {  background: linear-gradient(to top, #2b2b2b, transparent);  animation-duration: 200s;  transform: scale(1.2); /* Scale up to appear farther away */  clip-path: polygon(0% 100%, 10% 80%, 25% 95%, 40% 70%, 55% 90%, 70% 85%, 85% 95%, 100% 100%);  opacity: 0.8;}.footer-mountain-mid {  background: linear-gradient(to top, #1e1e1e, transparent);  animation-duration: 150s;  transform: scale(1.1);  clip-path: polygon(0% 100%, 15% 75%, 30% 90%, 50% 70%, 70% 85%, 80% 65%, 95% 85%, 100% 100%);  opacity: 0.9;}.footer-mountain-front {  background: linear-gradient(to top, #0f0f0f, transparent);  animation-duration: 100s;  clip-path: polygon(0% 100%, 5% 80%, 15% 95%, 25% 70%, 40% 85%, 50% 60%, 65% 80%, 75% 90%, 90% 75%, 100% 100%);}@keyframes mountain-move {  from {    transform: translateX(0);  }  to {    transform: translateX(-20%);  }}.footer-mountain-top {width: 100%;height: 100%;background: linear-gradient(to top, rgba(30, 30, 30, 0.9), rgba(0,0,0,0.4));clip-path: polygon( 0% 100%, 5% 80%, 10% 90%, 15% 70%, 20% 85%, 25% 75%, 30% 90%, 35% 80%, 40% 95%, 45% 80%, 50% 90%, 55% 70%, 60% 85%, 65% 75%, 70% 90%, 75% 80%, 80% 95%, 85% 70%, 90% 85%, 95% 75%, 100% 100%);}/* General Modal styles */.modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.85);display: flex;justify-content: center;align-items: center;z-index: 1000;opacity: 0;visibility: hidden;transition: opacity 0.4s ease, visibility 0.4s ease;}.modal-overlay.active {opacity: 1;visibility: visible;}.modal-content {background: #1a1a1a;color: var(--text-color);padding: 40px;border-radius: 10px;width: 90%;max-width: 450px;box-shadow: 0 0 50px rgba(0, 123, 255, 0.5);position: relative;transform: scale(0.9);transition: transform 0.4s ease;}.modal-overlay.active .modal-content {transform: scale(1);}.close-btn {position: absolute;top: 15px;right: 20px;font-size: 28px;cursor: pointer;color: #fff;}.form-input {width: calc(100% - 20px);padding: 12px 10px;margin-bottom: 20px;border: 1px solid var(--border-color);border-radius: 5px;background: rgba(255, 255, 255, 0.05);color: var(--text-color);transition: border-color 0.3s;}.form-input:focus {outline: none;border-color: var(--accent-blue);}.form-input::placeholder {color: rgba(255, 255, 255, 0.4);}.form-btn {width: 100%;padding: 15px;border: none;border-radius: 5px;background: var(--accent-blue);color: #fff;font-size: 1.1rem;font-weight: 700;cursor: pointer;transition: background 0.3s ease;}.form-btn:hover {background: #0056b3;}/* OTP specific styles */.otp-container {display: flex;justify-content: center;gap: 15px;margin-bottom: 20px;}.otp-input {width: 60px;height: 60px;text-align: center;font-size: 2rem;border: 1px solid var(--border-color);border-radius: 5px;background: rgba(255, 255, 255, 0.05);color: #fff;transition: border-color 0.3s;}.otp-input:focus {outline: none;border-color: var(--accent-blue);}.resend-link {text-align: center;display: block;margin-top: 15px;color: var(--accent-blue);font-size: 0.9rem;cursor: pointer;transition: color 0.3s;}.resend-link:hover {color: #fff;text-decoration: underline;}/* Responsive adjustments */@media (max-width: 768px) {.content-wrapper { flex-direction: column; padding: 20px; gap: 30px;}.header-box { position: relative; top: auto; left: auto; text-align: center; margin-bottom: 20px;}.header-box h1 { font-size: 2.2rem;}.text-box { text-align: center;}.join-button { width: 100%;}.collaboration-animation {  width: 200px;  height: 200px;}}