@charset "UTF-8";
body { font-family: 'Open Sans', sans-serif; }

.nav-item { font-family: 'Playfair Display', serif; }

.nav-link { font-family: 'Playfair Display', serif; }

.card-header { font-family: 'Playfair Display', serif; }

.card-title { font-family: 'Playfair Display', serif; }

.card-text { font-family: 'Open Sans', sans-serif; }

.card-body { font-family: 'Open Sans', sans-serif; }

.btn { font-family: 'Playfair Display', serif; }

h1, h2, h3, h4, h5 { font-family: 'Playfair Display', serif; margin-bottom: 2rem; }

.app { font-family: 'Open Sans', sans-serif; }

#send { font-family: 'Roboto', sans-serif; }

body { background-color: #000; color: #fffbf7; }

.navbar { background-color: rgba(0, 0, 0, 0.1) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.navbar-toggler { border: 1px solid gold; font-size: 0.9rem; color: gold; transition-duration: 0.2ms; font-family: 'Roboto', sans-serif; font-weight: 200; }

.navbar-toggler:active { background-color: gold; color: black; transition-duration: 0.2ms; }

.nav-link { transition-duration: 0.2ms; }

.nav-link, .nav-link:visited { color: gold; outline-style: none; padding: 5px 25px; }

.nav-link:focus, nav-link:focus-visible { color: goldenrod; outline-style: none; }

.nav-link:hover { background-color: gold; color: black; }

#inquiry-form h2 { color: gold !important; }

#inquiry-form p { color: white !important; }

#inquiry-form label { color: white !important; }

#inquiry-form input { color: white !important; background-color: black; }

#inquiry .form-control { color: gold !important; border: 1px solid #333 !important; }

.inquiry-container-column { box-shadow: 0px 0px 50px gold; background-color: rgba(0, 0, 0, 0.8) !important; }

.card-title { color: gold; font-size: 1.2rem; }

.card-header { color: gold; }

.card { background-color: rgba(0, 0, 0, 0.8) !important; border: 1px solid #222 !important; }

.card:hover { background-color: rgba(0, 0, 0, 0.9) !important; box-shadow: 0 0px 50px 0 gold; cursor: pointer; transition-duration: 2s; }

a.btn-gold a, .accordion .accordion-item .card-footer a.btn a { color: black; }

a.btn-gold:visited, .accordion .accordion-item .card-footer a.btn:visited { color: #333; }

a.btn-gold:hover, .accordion .accordion-item .card-footer a.btn:hover { color: black; }

a { color: goldenrod; }

a:hover { color: gold; }

a:visited { color: white; }

.step-links .current { color: white; font-family: 'Roboto', sans-serif; font-size: 1rem; }

.step-links a { color: 000; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 100; }

.step-links a:visited { color: 333; }

.step-links a:hover { color: 666; }

.step-links .current { cursor: default; }

.site-heading h1, .site-heading h2, .site-heading h3, .site-heading h4, .site-heading h5 { color: gold; }

.dropdown-menu { background-color: rgba(0, 0, 0, 0.8) !important; }

.dropdown-item { color: gold; }

.dropdown-item:hover { background-color: gold; color: black; }

.dropdown-item:visited { color: goldenrod; }

.dropdown-item:visited:hover { color: black; }

.dropdown-item.active, .dropdown-item:active { background-color: gold; color: black; }

.fa, .fas { color: black; }

.ll_container h1 { color: black; font-weight: bold; }

.btn-close-custom { border: none; background: transparent; color: gold; }

.btn-close-custom:hover { color: #ccac00; }

.btn-close-custom .fas { font-size: 1.5rem; }

.btn-gold, .accordion .accordion-item .card-footer .btn { color: #333 !important; background-color: #FFB84D; border-color: gold; width: 100%; border-radius: 0px; padding: 10px; transition-duration: 5ms; }

.btn-gold:hover, .accordion .accordion-item .card-footer .btn:hover { color: Black; background-color: #FFDD77; border-color: #FFB84D; width: 100%; }

.btn-gold-reduced { color: #333; border-radius: 0px; background-color: #FFB84D; border-color: #FFB84D; padding: 10px; margin: 10px; text-decoration: none; }

.btn-gold-reduced:hover { color: black !important; background-color: #FFDD77; border-color: #FFDD77; }

.btn-gold-slim { border-radius: 0px; width: 100%; color: #000 !important; background-color: #FFB84D; border-color: #FFB84D; padding: 5px; margin: 0px; text-decoration: none; }

.btn-gold-slim:hover { color: #000 !important; background-color: #FFDD77; border-color: #FFB84D; }

.btn-gold-slim-reduced { border-radius: 0px; width: auto; color: #333 !important; background-color: #FFB84D; border-color: #FFB84D; padding: 5px; margin: 0px; text-decoration: none; }

.btn-gold-slim-reduced:hover { color: black; background-color: #FFDD77; border-color: #FFB84D; }

.container-invite .btn { width: 100% !important; }

.navbar-toggler-icon { background-image: url("/static/img/golden-menu.png"); --bs-navbar-toggler-icon-bg: none; }

.edit_button { cursor: pointer; }

.delete_button { cursor: pointer; }

#search-button i { color: black; }

#search-button:hover i { color: black; }

.bn5 { font-family: "PlayFair Display", serif; padding: 0.4em 2em; border: none; outline: none; color: white; background: #111; cursor: pointer; position: relative; z-index: 0; border-radius: 5px; width: 100%; }

.bn5:before { content: ""; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); position: absolute; top: -5px; left: -5px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 10px); height: calc(100% + 10px); animation: glowingbn5 30s linear infinite; opacity: 0; transition: opacity 0.3s ease-in-out; border-radius: 10px; }

@keyframes glowingbn5 { 0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; } }

.bn5:active { color: #000; }

.bn5:active:after { background: transparent; }

.bn5:hover:before { opacity: 1; }

.bn5:after { z-index: -1; content: ""; position: absolute; width: 100%; height: 100%; background: #191919; left: 0; top: 0; border-radius: 10px; }

/* General Button Styles */
.btn { display: inline-block; padding: 10px 20px; margin-right: 10px; text-decoration: none; color: black; border-radius: 5px; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-weight: bold; }

#social_share { display: flex; justify-content: space-between; /* Distribute buttons evenly with space in between */ align-items: center; /* Align buttons vertically in the middle */ gap: 10px; /* Add a small gap between the buttons */ margin-bottom: 10px; }

#social_share .btn { padding: 10px 15px; /* Adjust the padding for a larger button size */ font-size: 14px; text-transform: uppercase; color: #fff; border-radius: 5px; text-decoration: none; }

#social_share .flex-fill { flex: 1; /* Make each button container take up equal space */ }

#social_share .btn i { margin-right: 5px; /* Space between icon and text */ }

#social_share .w-100 { width: 100%; /* Make sure each button takes full width within its container */ }

/* Specific button colors */
.btn-twitter { background-color: #1DA1F2; }

.btn-twitter:hover { background-color: #0d95e8; }

.btn-facebook { background-color: #3b5998; }

.btn-facebook:hover { background-color: #2d4373; }

.btn-linkedin { background-color: #0077b5; }

.btn-linkedin:hover { background-color: #005582; }

.btn-reddit { background-color: #FF4500; }

.btn-reddit:hover { background-color: #cc3700; }

#social_share #social_share { position: absolute; bottom: 0px; }

@media (max-width: 768px) { .menu-toggle-button { display: block; } .menu-buttons { display: none; } .snName { display: none; } }

.card { border-radius: 0px; }

.card { position: sticky; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.effect_card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 0px; padding: 10px; position: absolute; max-width: 400px; border: 1px solid rgba(255, 215, 0, 0.5); /* gold color with 50% transparency */ background-color: rgba(0, 0, 0, 0.7); transition: transform 0.2s ease-in-out; /* Smooth transition for any transform changes */ /* ... your existing styles ... */ --horizontal-position: -200px; /* CSS variable for horizontal position */ position: absolute; left: var(--horizontal-position); /* Use the horizontal position variable */ animation: floatAnimation 6s ease-in-out infinite; /* Apply your float animation */ transform: translateX(var(--horizontal-position, 0px)); }

@keyframes floatAnimation { 0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  /* Adjust Y value for desired floating effect */ }

.effect_card_inner { position: relative; }

.effect_card_img { max-width: 300px; max-height: 300px; }

.effect_card a { text-decoration: none; position: absolute; z-index: 100; left: 0px; top: 30%; background-color: rgba(0, 0, 0, 0.85); padding: 20px; text-align: center; font-size: 1.1em; border-top: 1px solid gold; border-bottom: 1px solid gold; }

.effect_card h2 { font-size: 1.1em; margin-bottom: 0px; }

#related_posts_wrapper { width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; z-index: 2; }

/* Search box styles */
#search { display: flex; align-items: center; flex-grow: 0.5; justify-content: center; }

#search_box { padding: 8px; border-radius: 4px; border: 1px solid #dcdcdc; margin-right: 8px; flex-grow: 1; }

#search_button { padding: 8px 16px; background-color: gold; color: #ffffff; border-radius: 4px; border: none; cursor: pointer; }

#search_button:hover { background-color: #ccac00; }

#chat_main { position: relative; display: flex; align-items: stretch; width: 100%; color: #343a40; padding: 20px; background-color: rgba(0, 0, 0, 0.25); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* The spinner container. You can also style #spinner directly */
#spinner.ring-loader, .ring-loader { display: inline-block; width: 20px; /* Adjust */ height: 20px; /* Adjust */ border: 3px solid rgba(255, 215, 0, 0.3); border-radius: 50%; border-top-color: #ffd700; animation: spin 1s ease-in-out infinite; margin-left: 8px; /* some spacing */ }

@keyframes spin { to { transform: rotate(360deg); } }

.dot-pulse { display: inline-block; position: relative; width: 1em; height: 1em; margin-left: 8px; /* some spacing from the “Send” text */ }

.dot-pulse::before, .dot-pulse::after { content: ""; display: inline-block; position: absolute; top: 0; width: .5em; height: .5em; border-radius: 50%; background-color: #ffd700; animation: dotPulse 1.2s infinite ease-in-out; }

.dot-pulse::before { left: 0; animation-delay: 0s; }

.dot-pulse::after { left: .7em; animation-delay: 0.2s; }

@keyframes dotPulse { 0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); } }

#messages { margin-bottom: auto; overflow-y: scroll; height: calc(100vh - 380px); width: 100%; margin: 0; padding: 0px; }

#input { bottom: 0; z-index: 10; padding: 10px; border: 1px solid #292929; background-color: rgba(0, 0, 0, 0.5); height: 160px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

.input-container { position: sticky; bottom: 0; width: 100%; }

.input_box { margin: 0px auto; padding: 0px; border-radius: 0px; font-size: 1rem; height: 100px; width: 100%; }

.chat-button { position: relative; padding: 10px 20px; border-radius: 2px; transition: all 0.3s ease-in-out; overflow: hidden; color: #111; width: 100%; display: block; font-size: 0.8rem; text-transform: uppercase; font-weight: lighter; text-align: center; text-decoration: none; text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.8); background: linear-gradient(135deg, #ffef77 0%, #d4af37 100%); transform: translateY(-2px); box-shadow: 0 0 0px rgba(255, 215, 0, 0.4); text-shadow: 0 0 1px rgba(255, 255, 255, 0.5), 0 0 3px rgba(255, 215, 0, 0.4); }

.chat-button:hover { background-color: #c9a136; transform: translateY(-2px); box-shadow: 0 0 15px rgba(255, 251, 138, 0.1), 0 0 30px rgba(255, 251, 175, 0.5), 0 0 45px rgba(255, 255, 255, 0.9); }

.chat-button:active { background-color: #b8972d; transform: translateY(0); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

#message { resize: none; font-size: 1rem; }

.form-control, .form-control:focus { border: none !important; background-color: transparent !important; box-shadow: none !important; outline: none; }

.chat-messages { flex-grow: 1; overflow-y: auto; }

.you_profile { color: goldenrod; display: block; }

.bot_profile { color: goldenrod; display: block; }

.chat_profile { font-size: 1rem; font-family: "PlayFair Display" ,serif; }

.chat_image { height: 1.5em; width: 1.5em; font-family: "Roboto" ,sans-serif; }

.message_card { color: white; border: 1px solid #0e0e0e; padding: 5px; margin: 10px auto; background-color: rgba(0, 0, 0, 0.25); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

.message_body { width: 100%; margin: 0px auto; }

.bot_message_body { width: 100%; margin: 0px auto; }

.message_text { display: flex; flex-direction: row; width: 50%; margin: 0px auto; }

.message_illustration { display: flex; max-width: 50%; max-height: 600px; overflow: hidden; }

.message_illustration img { display: block; max-width: 100%; }

#chat #message::placeholder { background-color: transparent; color: gold !important; }

#chat #message { color: white !important; width: 100%; border-radius: 0; padding-left: 5px; }

.message_header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #00000e; padding-bottom: 5px; margin-bottom: 5px; }

.message_timestamp { font-size: 0.7em; color: #ccc; display: block; }

.you_profile, .bot_profile { float: left; }

.message_timestamp { float: right; }

.bot_img { display: block; max-height: 50% !important; max-width: 50%; margin: 30px; border: 2px solid black; }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }

.fade-in { animation: fadeIn 1s; }

.fade-out { animation: fadeOut 1s; }

#technical_messages .message_card { font-size: 10px; background-color: transparent; }

@media (max-width: 768px) { #chat { flex-basis: 100%; } #send { margin-top: 10px; } #input { height: 160px; } .input_box { height: inherit !important; } }

#leads { padding: 20px; background-size: cover; z-index: 500; }

.container-leads { display: block; position: relative; max-width: 720px !important; padding: 20px !important; margin: 0px auto; background-color: rgba(0, 0, 0, 0.8); border: 2px solid gold; border-radius: 0px; margin-top: 50px; margin-bottom: 180px !important; z-index: 420; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9); }

.invite_to_connect { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: gold; text-align: center; margin: 20px auto; padding: 0px; width: 100%; }

.container-leads .form-control, .container-leads .form-control:focus { border: 1px solid gold !important; background-color: rgba(0, 0, 0, 0.9); color: white; }

.container-leads .form-control { color: gold; background-color: rgba(0, 0, 0, 0.9); border: 1px solid gold; border-radius: 0px; }

.container-leads .form-select { border: 1px solid gold !important; background-color: rgba(0, 0, 0, 0.9); color: gold; border-radius: 0px; }

#inspiration { background-color: black; }

#inspiration h2 { font-family: Cookie, cursive; font-size: 6rem; color: Gold; text-align: center; margin: 20px auto; padding: 0px; width: 100%; }

#inspiration h3 { font-family: Cookie, cursive; font-size: 4rem; color: black; text-align: center; margin: 20px auto; padding: 0px; width: 100%; }

#inspiration h4 { font-family: Cookie; font-size: 2rem; color: black; text-align: center; margin: 20px auto; padding: 0px; width: 100%; }

#inspiration p { font-family: Cookie; font-size: 1rem; color: black; text-align: center; margin: 20px auto; padding: 0px; width: 100%; }

#educate_a_girl .img_holder { border-radius: 50%; overflow: hidden; border: 5px solid orange; }

#educate_a_girl { background-color: black; }

#educate_a_girl:hover { background-color: #111111; transition-duration: 0.5ms; }

#educate_a_girl .text { font-size: 3rem; color: gold; font-family: 'Cookie', cursive; }

#educate_a_girl .next_btn { background-color: gold; color: #333; transition: linear; animation-duration: 1000ms; }

#educate_a_girl .next_btn:hover { background-color: gold; color: #000; }

#lifelong_learning .img_holder { border-radius: 50%; overflow: hidden; border: 5px solid black; }

#lifelong_learning { background-color: gold; }

#lifelong_learning:hover { background-color: #ff8c00; transition-duration: 0.5ms; }

#lifelong_learning .text { font-size: 3rem; color: #000000; font-family: 'Cookie', cursive; }

#lifelong_learning .next_btn { background-color: #333; color: gold; }

#lifelong_learning .next_btn:hover { background-color: #000; color: #ff8c00; }

.pagination { margin-top: 20px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center; list-style: none; padding: 0; }

.page-item { margin: 0 5px; }

.page-link { color: gold !important; background-color: #333; border: 1px solid #666; padding: 5px 10px; text-decoration: none; }

.page-link:hover { background-color: #222; }

.page-link:hover { color: gold !important; background-color: #222; border: 1px solid #333; padding: 5px 10px; text-decoration: none; }

.page-item.disabled .page-link { color: goldenrod !important; cursor: not-allowed; background-color: #000; border-color: #111; }

.page-item.active .page-link { color: gold !important; background-color: #111; border-color: #333; }

/* styles/components/_accordion.scss */
/* Accordion Container */
.accordion { background-color: rgba(0, 0, 0, 0.8); border: 1px solid #222; }

.accordion .accordion-item { background-color: transparent; border: none; }

.accordion .accordion-item .accordion-header { background-color: rgba(0, 0, 0, 0.8); font-family: 'Playfair Display', serif; }

.accordion .accordion-item .accordion-header .accordion-button { color: gold; background-color: transparent; border: none; padding: 1rem; font-size: 1.2rem; text-align: left; text-decoration: none; }

.accordion .accordion-item .accordion-header .accordion-button:hover { color: white; background-color: rgba(0, 0, 0, 0.9); }

.accordion .accordion-item .accordion-header .accordion-button::after { /* Customize the icon for expand/collapse if needed */ /* Default Bootstrap uses a caret; you can replace it with an LCARS-themed icon */ }

.accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) { color: white; }

.accordion .accordion-item .accordion-collapse .accordion-body { color: #fffbf7; font-family: 'Open Sans', sans-serif; background-color: rgba(0, 0, 0, 0.8); padding: 1rem; border-top: 1px solid #222; }

.accordion .accordion-item .card-footer { background-color: transparent; border-top: 1px solid #222; text-align: right; }

.accordion .accordion-item .card-footer .btn { padding: 0.5rem 1rem; margin-top: 0.5rem; }

/* Ensure the accordion links don't have default link styling */
.accordion-button:focus { box-shadow: none; }

/* Optional: Customize the collapsed state */
.accordion-button.collapsed { color: gold; }

.form-select { border: 1px solid gold !important; background-color: rgba(0, 0, 0, 0.9); color: white; }

.textinput { border: 1px solid gold !important; background-color: rgba(0, 0, 0, 0.9); color: white; }

.textinput:focus { border: 1px solid gold !important; background-color: rgba(0, 0, 0, 0.9); color: gold; }

.textarea { border: 1px solid gold !important; background-color: rgba(0, 0, 0, 0.9); color: white; }

.textarea:focus { border: 1px solid gold !important; background-color: rgba(0, 0, 0, 0.9); color: gold; }

.checkboxinput { border: 1px solid gold !important; background-color: rgba(0, 0, 0, 0.9); color: gold; }

.modal-header { border-bottom: none; }

.modal-footer { border-top: none; }

.card-actions { padding: 5px; }

.empty_list_item { display: block; width: 100%; margin: 10px 0px; padding: 10px; border: 1px solid gold; color: gold; font-family: "PlayFair Display", serif; }

#footer_mountain { bottom: 0px; width: 100%; z-index: 100; position: absolute; }

#footer_mountain img { width: 100%; }

#footer_content { position: absolute; bottom: 0px; width: 100%; z-index: 100; background: rgba(0, 0, 0, 0.5); }

/* Hover State: More luminescent and reflective */
.submit-query-button { position: relative; padding: 10px 20px; border-radius: 2px; transition: all 0.3s ease-in-out; overflow: hidden; color: #111; text-transform: uppercase; font-weight: lighter; text-align: center; text-decoration: none; text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.8); background: linear-gradient(135deg, greenyellow 0%, yellowgreen 100%); transform: translateY(-2px); box-shadow: 0 0 0px rgba(173, 255, 47, 0.4); text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); text-transform: uppercase; font-weight: lighter; text-align: center; }

/* Pressed (Active) State: Slightly 'indented' and more diffuse */
.submit-query-button { background: linear-gradient(135deg, greenyellow 0%, yellowgreen 100%); transform: translateY(0); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.1); text-shadow: none; }

a.submit-query-button { color: #222; }

a.submit-query-button:hover { color: #000; text-shadow: 0px 0px 1px #fff; }

a.submit-query-button:visited { color: #333; }

.submit-query-button:hover { background-color: yellowgreen; transform: translateY(2px); box-shadow: 0 0 15px rgba(183, 255, 101, 0.5); }

.submit-query-button:active { background-color: yellowgreen; transform: translateY(0); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

pre[class*=language-] { border-radius: 0px !important; border: 1px solid gold !important; margin: 0px 0 !important; overflow: auto !important; padding: 1em !important; }

.copy-to-clipboard-button { background-color: purple !important; border-radius: 3px !important; padding: 5px 10px !important; }

code[class*=language-], pre[class*=language-] { font-size: 0.9em; }

.spinner { border: 4px solid goldenrod; border-radius: 50%; border-top: 4px solid gold; width: 12px; height: 12px; animation: spin 2s linear infinite; }

.spinner_right { position: relative; float: right; }

.large_spinner { width: 40px; height: 40px; display: block; position: relative; border-top: 8px solid gold; border-radius: 50%; animation: spin 2s linear infinite; }

.loader_placeholder { display: block; position: relative; border: 1px solid gold; padding: 10px; text-align: left; width: 100%; }

.loader_placeholder h3 { margin-bottom: 0px; }

.spinner_turquise { border: 4px solid turquoise; border-top: 4px solid white; }

.spinner_magenta { border: 4px solid magenta; border-top: 4px solid white; }

@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

/* Spinner CSS */
.spinner-border { width: 1rem; height: 1rem; }

#graph_canvas { width: 100%; height: 100%; }

#graph_canvas * { margin: 0; padding: 0; box-sizing: border-box; }

.shadow-style { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); }

@keyframes gradient { 0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; } }

@keyframes rotate { from { transform: rotate(0deg); }
  to { transform: rotate(360deg); } }

#graph-container { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; position: fixed; }

#canvas { position: absolute; top: 0; /* Adjust this value if necessary */ left: 0; width: 100%; height: 100%; background-color: transparent; }

#tooltip { position: absolute; display: none; color: white; background-color: rgba(0, 0, 0, 0.75); padding: 10px; border: 1px solid gold; }

.halo { animation: rotate 30s linear infinite; }

/* Style for the overlay navigator div */
#context_panel { display: none; /* Hide navigator initially */ transform: translateX(100%); /* Animates the transform property */ height: 0; transition: transform 0.3s ease-out, height 0.2s ease-out, top 0.2s ease-out; position: absolute; top: 110px; right: 20px; bottom: 20px; width: 400px; background-color: rgba(0, 0, 0, 0.75); color: white; padding: 10px; overflow-y: auto; /* Enable vertical scrolling if the content overflows */ border: 2px solid gold; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

#context_panel_header { font-size: 1.5rem; margin: 10px 0px; font-family: 'PlayFair Display', serif; color: gold; }

#context_panel.shown { transform: translateX(0); display: initial; /* Brings the navigator on screen */ }

#zoomable { width: 100%; height: 100%; }

/* New/Updated Styles */
.zoom-button-hover, #drag-bar:hover { stroke: goldenrod; stroke-width: 2; }

#context_panel_related_content .card img { margin: 15px; }

#context_panel_related_content .card img { margin: 15px; }

#context_panel_related_content .card .card-title { color: gold; font-size: 1rem; }

#context_panel_related_content .card .card-body { margin: 5px; }

@media (max-width: 768px) { #context_panel { width: 96%; height: 96%; top: 0; right: 10px; bottom: 0; left: 10px; transform: translateX(0); border: none; } #context_panel_header { font-size: 1.5rem; margin: 10px 0px; font-family: 'PlayFair Display', serif; color: gold; } #context_panel.shown { transform: translateX(0); display: initial; /* Brings the navigator on screen */ } #context_panel_related_content .card img { margin: 15px; } #context_panel_related_content .card img { margin: 15px; } #context_panel_related_content .card .card-title { color: gold; font-size: 1rem; } #context_panel_related_content .card .card-body { margin: 5px; } }

/* Custom alert styles */
.custom-alert { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 215, 0, 0.5); z-index: 1000; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.custom-alert-content { background-color: rgba(0, 0, 0, 0.85); margin: 15% auto; padding: 20px; border: gold; width: 80%; max-width: 600px; }

/* Dark mode styles */
body.dark-mode .custom-alert-content { background-color: #333; color: #fff; }

.custom-alert-close { color: gold; float: right; font-size: 28px; font-weight: bold; }

.custom-alert-close:hover, .custom-alert-close:focus { color: dark(gold); text-decoration: none; cursor: pointer; }

.alert .bot_img { text-align: right; margin: 10px; width: 50px; height: 50px; }

.modal { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

.btn-close { color: gold; }

.btn-close:hover { color: goldenrod; }

.modal-content h1, .modal-content p { font-family: 'Playfair Display', serif; }

@keyframes gradientAnimation { 0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; } }

.modal-backdrop.show { /* Define a linear gradient background with multiple colors */ background: linear-gradient(-45deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5), transparent); background-size: 400% 400%; animation: gradientAnimation 15s ease infinite; }

.modal-backdrop.show { /* Fallback for browsers that do not support gradients */ background: rgba(0, 0, 0, 0.5); /* Transparent gradient from black to transparent */ background: linear-gradient(rgba(0, 0, 0, 0.5), transparent); /* Apply a blur filter to the backdrop */ backdrop-filter: blur(10px); }

.modal-dialog { max-width: 600px !important; margin-top: 100px; margin-bottom: 100px; border: 2px solid gold; }

.modal-content { padding: 20px; }

.modal-header { padding: 0px; padding-bottom: 20px; border-bottom: 1px solid gold; margin-bottom: 20px; }

.modal-body { padding: 0px; }

.modal-body h2 { color: gold; }

.modal-header h5 { color: gold; }

.modal-body a { text-decoration: none; }

.modal-body img { position: relative; display: block; max-width: 100%; }

.modal-footer { padding: 0px; padding-top: 20px; margin: 0px; margin-top: 20px; border-top: 1px solid gold; }

.modal-body .related-posts { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; position: relative; }

.modal-body .related-post { width: 100%; margin-bottom: 15px; border: 1px solid rgba(255, 215, 0, 0.85); position: relative; }

.modal-body .related-post img { width: 100%; height: auto; }

.modal-body .related-post h4 { margin: 0; font-size: 1em; color: gold; }

.modal-body .related-post a { position: absolute; z-index: 100; bottom: 25%; background-color: rgba(0, 0, 0, 0.85); padding: 20px; text-align: center; font-size: 1.05em; border-top: 1px solid gold; border-bottom: 1px solid gold; width: 100%; }

/* Custom alert styles */
.custom-modal { border: 2px solid gold; display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 215, 0, 0.5); z-index: 1000; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.custom-modal-content { background-color: rgba(0, 0, 0, 0.85); margin: 15% auto; padding: 20px; border: gold; width: 80%; max-width: 600px; }

/* Dark mode styles */
body.dark-mode .custom-modal-content { background-color: #333; color: #fff; }

.custom-modal-close { color: gold; float: right; font-size: 28px; font-weight: bold; }

.custom-modal-close:hover, .custom-modal-close:focus { color: dark(gold); text-decoration: none; cursor: pointer; }

/* Notification Styles */
.custom-notification { background: rgba(0, 0, 0, 0.25); color: gold; padding: 10px; width: 100%; margin-bottom: 10px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); backdrop-filter: blur(15px) saturate(180%); -webkit-backdrop-filter: blur(15px) saturate(180%); transform: translateX(100%); transition: transform 0.25s ease-in-out; cursor: pointer; word-wrap: break-word; overflow: hidden; }

/* Animate In */
.custom-notification.animate-in { transform: translateX(0); }

/* Animate Out */
.custom-notification.animate-out { transform: translateX(-120%); }

/* Text Styles */
.notification-time { font-size: 0.8rem; font-weight: lighter; margin-bottom: 5px; }

.notification-body { font-size: 1rem; font-family: 'Open Sans', sans-serif; text-transform: uppercase; display: flex; flex-wrap: wrap; }

/* Ticker Letters */
.ticker-letter { opacity: 0; transform: translateY(20px); transition: all 0.3s ease-out; }

.ticker-letter.show { opacity: 1; transform: translateY(0); }

/* Notification Body */
.notification-body { /* Existing styles... */ white-space: pre-wrap; /* Preserve spaces and wrap text */ }

/* Flying Letters */
.flying-letter { display: inline-block; position: relative; opacity: 0; transform: translateX(50px); transition: transform 0.5s ease-out, opacity 0.5s ease-out; }

#dropzone { border: 1px solid gold; color: white; padding: 20px; }

#upload-form input { width: 100%; display: block; padding: 20px; margin: 20px 0px; background-color: gold; color: black; }

#upload-progress { width: 100%; }

#godai_preview { background-color: transparent; max-width: 100%; margin: 800px auto 200px auto; display: block; z-index: 2; text-align: center; }

#hello { background-color: transparent; max-width: 480px; margin: 1000px auto 500px auto; display: block; z-index: 2; text-align: center; }

#hello .img_holder { transition: all 0.3s ease; border-radius: 50%; overflow: hidden; border: 5px solid goldenrod; }

#hello:hover .img_holder { border-radius: 50%; overflow: hidden; border: 15px solid gold; }

#hello .text { transition: all 0.3s ease; font-size: 4.5rem; color: goldenrod; font-family: 'Cookie', cursive; }

#hello:hover .text { font-size: 4.5rem; color: gold; }

#hello .hidden_text { font-size: 2.5rem; opacity: 0; transition: all 0.3s ease; }

#hello:hover .hidden_text { opacity: 1; color: goldenrod; }

#hello .next_btn { transition: all 0.3s ease; background-color: #333; color: gold; }

#hello .next_btn:hover { background-color: #000; color: #ff8c00; }

/* ───────────────────────────────────────────────────────────── Homepage / IP pages: stacked smart panels with internal depth (Rewrite: preserves all existing selectors/classes + behaviors, removes ALL height-proportional scaling to prevent growing gaps.) ───────────────────────────────────────────────────────────── */
/* Page container: supports multiple cards stacked vertically */
#ip_page_container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; padding: clamp(4rem, 10vh, 5.5rem) 1.25rem clamp(4rem, 9vh, 5rem); height: 200%; position: relative; z-index: 200; }

/* Stack wrapper for multiple smart panels */
.smart-panel-stack { width: 100%; max-width: 680px; display: flex; flex-direction: column; position: relative; margin: 64px auto 96px; /* base vertical spacing between cards */ gap: 2.5rem; }

/* Main glass-card style panel (shared by all variants) */
.smart-panel { position: relative; width: 100%; margin: 20px auto; overflow: hidden; /* clip internal clouds to panel shape */ padding: clamp(1.9rem, 4vw, 2.6rem); /* Panel texture */ background: radial-gradient(circle at 20% 0, rgba(135, 196, 255, 0.2), rgba(0, 0, 0, 0.96)); border-radius: 2px; /* Border tone */ border: 1px solid rgba(173, 209, 255, 0.15); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(135, 196, 255, 0.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-align: center; color: #fdf7e3; cursor: default; z-index: 1; /* base “receded” state inside the stack IMPORTANT: translate only (constant). No scale => no height-based gap. */ transform: translateY(8px); opacity: 0.96; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease, filter 0.25s ease, opacity 0.25s ease; }

/* clouds layer — *idle by default* (no images, no animation) */
.smart-panel::before { content: ""; position: absolute; inset: -20%; pointer-events: none; /* no clouds loaded for inactive panels */ background: none; background-repeat: no-repeat; background-size: 180% auto, 140% auto, 120% auto; background-position: -130% 8%, 130% 50%, -140% 82%; opacity: 0; mix-blend-mode: screen; z-index: 0; /* no animation or GPU hint until panel is active */ animation: none; will-change: auto; transition: opacity 0.35s ease-out; }

/* make all actual content sit ABOVE the internal clouds */
.smart-panel > * { position: relative; z-index: 1; }

/* subtle glowing edge (sits on top but very faint) */
.smart-panel::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(255, 255, 255, 0.06); pointer-events: none; }

/* ───────────────────────────────────────────────────────────── Activate clouds only for active panels ───────────────────────────────────────────────────────────── */
/* “Active” = hover, focus-within, or explicit .smart-panel--clouds-active */
.smart-panel--clouds-active::before, .smart-panel:hover::before, .smart-panel:focus-within::before { background-image: url("/assets/img/c1.png"), url("/assets/img/c2.png"), url("/assets/img/c3.png"); background-repeat: no-repeat, no-repeat, no-repeat; background-size: 180% auto, 140% auto, 120% auto; background-position: -130% 8%, 130% 50%, -140% 82%; opacity: 1; will-change: background-position, opacity; }

/* Per-position cloud variants – only when active */
/* First panel: standard rightward flow */
.smart-panel-stack .smart-panel:nth-child(1).smart-panel--clouds-active::before, .smart-panel-stack .smart-panel:nth-child(1):hover::before, .smart-panel-stack .smart-panel:nth-child(1):focus-within::before { animation: panel-clouds-right 58s linear infinite, panel-clouds-fade 58s ease-in-out infinite; }

/* Second panel: reverse flow (right → left), slightly faster */
.smart-panel-stack .smart-panel:nth-child(2).smart-panel--clouds-active::before, .smart-panel-stack .smart-panel:nth-child(2):hover::before, .smart-panel-stack .smart-panel:nth-child(2):focus-within::before { animation: panel-clouds-left 48s linear infinite, panel-clouds-fade 48s ease-in-out infinite; }

/* Third panel: slower, more languid rightward drift */
.smart-panel-stack .smart-panel:nth-child(3).smart-panel--clouds-active::before, .smart-panel-stack .smart-panel:nth-child(3):hover::before, .smart-panel-stack .smart-panel:nth-child(3):focus-within::before { animation: panel-clouds-right 72s linear infinite, panel-clouds-fade 72s ease-in-out infinite; }

/* Fallback for any later panels: reuse rightward flow */
.smart-panel-stack .smart-panel:nth-child(n+4).smart-panel--clouds-active::before, .smart-panel-stack .smart-panel:nth-child(n+4):hover::before, .smart-panel-stack .smart-panel:nth-child(n+4):focus-within::before { animation: panel-clouds-right 60s linear infinite, panel-clouds-fade 60s ease-in-out infinite; }

/* Respect prefers-reduced-motion: kill cloud animations entirely */
@media (prefers-reduced-motion: reduce) { .smart-panel::before { animation: none !important; opacity: 0 !important; background: none !important; will-change: auto !important; } }

/* ───────────────────────────────────────────────────────────── Keyframes: position + transparency (smooth looping) ───────────────────────────────────────────────────────────── */
/* Left → right flow */
@keyframes panel-clouds-right { 0% { background-position: -130% 8%, 130% 50%, -140% 82%; }
  100% { background-position: 130% 12%, -130% 50%, 140% 78%; } }

/* Right → left flow (mirror of above so loop is seamless) */
@keyframes panel-clouds-left { 0% { background-position: 130% 12%, -130% 50%, 140% 78%; }
  100% { background-position: -130% 8%, 130% 50%, -140% 82%; } }

/* Shared fade: fully transparent → semi-visible → transparent */
@keyframes panel-clouds-fade { 0%, 100% { opacity: 0;
    /* completely invisible at loop seam */ }
  20% { opacity: 0.05; }
  50% { opacity: 0.15;
    /* “somewhat transparent” peak */ }
  80% { opacity: 0.08; } }

/* ───────────────────────────────────────────────────────────── Overlap / stacking: each subsequent panel nudges up slightly (Layout is constant; transforms are translate-only.) ───────────────────────────────────────────────────────────── */
.smart-panel + .smart-panel { margin-top: -1.5rem; /* creates the stacked overlap */ }

/* Make later cards sit visually “above” earlier ones */
.smart-panel-stack .smart-panel:nth-child(1) { z-index: 1; }

.smart-panel-stack .smart-panel:nth-child(2) { z-index: 2; }

.smart-panel-stack .smart-panel:nth-child(3) { z-index: 3; }

/* extend pattern for more cards if needed */
/* Hover / active / focus states – ONLY the active card pops forward IMPORTANT: translate only (constant). No scale => no height-based gap. */
.smart-panel:hover, .smart-panel:focus-within { transform: translateY(0); opacity: 1; box-shadow: 0 22px 55px rgba(0, 0, 0, 0.9), 0 0 32px rgba(135, 196, 255, 0.28); border-color: rgba(202, 229, 255, 0.28); filter: brightness(0.98); }

.smart-panel:active { transform: translateY(2px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.8), 0 0 20px rgba(135, 196, 255, 0.2); filter: brightness(0.98); }

.smart-panel:focus-within { outline: 1px solid rgba(202, 229, 255, 0.8); outline-offset: 3px; }

/* ───────────────────────────────────────────────────────────── Typography for IP card ───────────────────────────────────────────────────────────── */
.smart-panel h1 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 1.4rem; color: #e5f0ff; text-shadow: 0 0 4px rgba(0, 0, 0, 0.75); letter-spacing: 0.12em; text-transform: uppercase; }

/* IP itself – big and proud */
.ip-address { font-size: clamp(2.2rem, 5.5vw, 7rem); line-height: 1.1; font-weight: 400; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; text-align: center; letter-spacing: 0.08em; margin: 30px 0; }

/* Extra safety for very small phones */
@media (max-width: 480px) { .ip-address { font-size: 2.2rem; } }

/* The text under the IP */
.ip-subtitle { font-family: 'Open Sans', sans-serif; font-size: clamp(0.95rem, 2.3vw, 1.1rem); color: rgba(255, 255, 255, 0.86); margin-bottom: 0; }

/* Slight highlight of typography on hover */
.smart-panel:hover .ip-address, .smart-panel:focus-within .ip-address { color: gold; text-shadow: 0 0 10px black, 0 0 14px rgba(255, 215, 0, 0.45); }

.smart-panel:hover h1, .smart-panel:focus-within h1 { color: #ffe48f; }

/* ───────────────────────────────────────────────────────────── Typography & CTA for explainer cards ───────────────────────────────────────────────────────────── */
.smart-panel-title { font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin-bottom: 0.75rem; color: #e5f0ff; text-transform: uppercase; letter-spacing: 0.14em; }

.smart-panel:hover .smart-panel-title, .smart-panel:focus-within .smart-panel-title { color: #ffe48f; text-shadow: 0 0 3px rgba(0, 0, 0, 0.65); }

.smart-panel-lead { font-family: 'Open Sans', sans-serif; font-size: clamp(1rem, 2.2vw, 1.1rem); color: rgba(255, 255, 255, 0.9); margin-bottom: 0.6rem; }

.smart-panel-body { font-family: 'Open Sans', sans-serif; font-size: clamp(0.95rem, 2.1vw, 1.05rem); color: rgba(255, 255, 255, 0.8); margin-bottom: 0; }

/* Button – kept as-is (already translate-only, no scale) */
.smart-panel-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 1.2rem; margin-bottom: 1.2rem; padding: 0.65rem 1.6rem; border-radius: 999px; border: 1px solid rgba(255, 215, 0, 0.85); background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.1), rgba(255, 215, 0, 0.85)); color: #141008; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 0.95rem; text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; }

.smart-panel-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.9), 0 0 18px rgba(255, 215, 0, 0.55); background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.16), rgba(255, 215, 0, 0.95)); color: #0d0904; }

.smart-panel-cta:visited { color: #111; text-decoration: none; }

.smart-panel-cta:active { transform: translateY(0); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.85); }

.table-wrap .smart-panel-cta { margin-top: 20px; }

/* ───────────────────────────────────────────────────────────── Mobile-first tweaks ───────────────────────────────────────────────────────────── */
@media (max-width: 575px) { #ip_page_container { padding-top: clamp(3.2rem, 8vh, 4.2rem); padding-bottom: clamp(3.2rem, 8vh, 4.4rem); } .smart-panel { padding: 1.8rem 1.5rem; border-radius: 2px; /* mobile base state: translate-only (constant). No scale. */ transform: translateY(4px); } .smart-panel-stack { gap: 2rem; } .smart-panel + .smart-panel { margin-top: -1rem; } }

.ip_footer { text-align: center; padding: 40px 0 80px; }

.syndu_logo { height: 80px; width: auto; }

.surfshark_logo { width: 60%; margin: 10px auto; height: auto; display: block; }

.surfshark { text-align: center; }

.surfshark .smart-panel-header, .surfshark .smart-panel-body, .surfshark .smart-panel-lead { text-align: center !important; }

.smart-panel--simple::before { background: none !important; animation: none !important; opacity: 0 !important; }

.smart-panel--simple::before:hover { background: none !important; animation: none !important; opacity: 0 !important; }

/* ───────────────────────────────────────────────────────────── Smart-panel pagination – shared across the app ───────────────────────────────────────────────────────────── */
/* Footer area inside smart panels (for pagination, actions, etc.) */
.smart-panel__footer { margin-top: 1.4rem; }

.smart-panel-pagination { margin-top: 0.75rem; display: flex; flex-direction: column; /* stacked on mobile */ gap: 0.5rem; }

/* Three logical rows: [First/Prev], [Status], [Next/Last] */
.smart-panel-pagination__row { display: flex; gap: 0.5rem; width: 100%; /* row stretches to panel width */ }

/* On mobile, everything is full-width inside its row */
.smart-panel-pagination__btn, .smart-panel-pagination__status { flex: 1 1 0; margin: 1.2em; }

/* Buttons – “ghost CTA” style, aligned with smart-panel-cta */
.smart-panel-pagination__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1.2rem; border-radius: 999px; border: 1px solid rgba(255, 215, 0, 0.7); background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.05), rgba(12, 10, 18, 0.96)); color: #fdf7e3; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease; }

.smart-panel-pagination__btn:hover { transform: translateY(-1px); box-shadow: 0 11px 26px rgba(0, 0, 0, 0.85), 0 0 12px rgba(255, 215, 0, 0.4); }

.smart-panel-pagination__btn:active { transform: translateY(0); box-shadow: 0 7px 18px rgba(0, 0, 0, 0.85); }

/* Disabled state */
.smart-panel-pagination__btn[disabled], .smart-panel-pagination__btn--disabled { opacity: 0.45; cursor: default; box-shadow: none; }

/* Status pill – piggy-back on the existing CTA look */
.smart-panel-pagination__status { text-align: center; pointer-events: none; }

/* When you combine with .smart-panel-cta, it becomes the gold CTA pill */
.smart-panel-pagination__status.smart-panel-cta { margin-top: 1.2em; /* override CTA’s default margin */ font-size: 0.8rem; width: 100%; }

/* ─── Tablet / laptop: inline layout ───────────────────────── */
@media (min-width: 768px) { .smart-panel-pagination { flex-direction: row; /* single row */ align-items: center; justify-content: center; } .smart-panel-pagination__row { width: auto; } .smart-panel-pagination__btn, .smart-panel-pagination__status { flex: 0 0 auto; width: auto; } /* Small breathing room around the center pill */ .smart-panel-pagination__row--center { margin: 0 0.75rem; } }

.footer-category .smart-panel-cta { margin-top: 10px; margin-bottom: 10px; }

/* ───────────────────────────────────────────────────────────── Hero awareness panel (Card 1) ───────────────────────────────────────────────────────────── */
.hero-panel { padding: 0; /* overlay handles internal padding */ border-radius: 2px; overflow: hidden; /* clip video to panel shape */ position: relative; }

/* Video as background */
.hero-video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero-video { width: 100%; height: 100%; object-fit: cover; }

/* Glass overlay with standard smart-panel typography */
.hero-overlay { position: relative; z-index: 1; min-height: 260px; padding: clamp(2.2rem, 4vw, 3rem); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 10% 0%, rgba(135, 196, 255, 0.2), rgba(0, 0, 0, 0.92)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Small label above title */
.hero-kicker { font-family: 'Open Sans', sans-serif; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin: 0 0 0.75rem; }

/* Title: piggy-back on .smart-panel-title */
.hero-title.smart-panel-title { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.9rem; text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 0, 0, 0.9); }

/* Body: piggy-back on .smart-panel-body */
.hero-body.smart-panel-body { max-width: 34rem; font-size: clamp(0.98rem, 2.1vw, 1.08rem); color: rgba(255, 255, 255, 0.92); }

/* Hover / focus: subtle highlight */
.hero-panel:hover .hero-title, .hero-panel:focus-within .hero-title { color: #ffe48f; }

.hero-panel:hover .hero-body, .hero-panel:focus-within .hero-body { color: rgba(255, 255, 255, 0.97); }

/* Mobile tweaks */
@media (max-width: 575px) { .hero-overlay { padding: 1.8rem 1.4rem 2.1rem; min-height: 220px; } }

.crown-container { position: fixed; top: 0; z-index: 8000; width: 100%; max-height: 100px; }

.navbar-container { box-sizing: border-box; padding: 5px; display: flex; align-items: center; justify-content: space-between; }

.active-nav-item { color: white !important; /* or any other styling you prefer */ }

.active-nav-item:hover { color: goldenrod; /* or any other styling you prefer */ }

.form-check-input:checked { background-color: gold; /* Blue background when checked */ border-color: goldenrod; /* Blue border color when checked */ }

.form-check-input:focus { border-color: gold; /* Blue border color on focus */ box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Shadow effect on focus */ }

.form-check-label { color: gold; /* Blue text color */ font-family: "PlayFair Display", serif; /* Custom font */ font-size: 17px; /* Custom font size */ }

.navbar-brand { height: 50px; width: auto; }

.navbar-brand img { height: 50px; width: auto; }

/* Header styles */
#header { display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; padding: 5px; box-shadow: 0 0 6px rgba(51, 51, 51, 0.1); /* Standard syntax */ backdrop-filter: blur(5px); /* WebKit prefix for older Safari versions */ -webkit-backdrop-filter: blur(5px); position: fixed; top: 0; left: 0; right: 0; }

/* Account dropdown styles */
.account_dropdown { position: relative; display: inline-block; }

.account_button { background-color: #ffffff; color: gold; padding: 8px; border-radius: 4px; border: 1px solid #dcdcdc; cursor: pointer; }

.account_button:hover { background-color: #f5f5f5; }

.account_dropdown_content { display: none; position: absolute; background-color: #ffffff; min-width: 160px; box-shadow: 0 0 6px rgba(51, 51, 51, 0.1); z-index: 1; }

.account_dropdown_content a { color: #000000; padding: 8px; text-decoration: none; display: block; }

.account_dropdown_content a:hover { background-color: #f5f5f5; }

.account_dropdown:hover .account_dropdown_content { display: block; }

@media (min-width: 1400px) { .container { max-width: 100%; padding-left: 10px; padding-right: 10px; } }

/* Crown container: ensure it has enough z-index  so the chat panel is on top. */
.crown-container { position: fixed; top: 0; z-index: 8000; width: 100%; /* If you had max-height: 100px previously, consider removing or adjusting, because the chat panel will live inside this container. */ }

/* Chat Panel (dark glass) */
.chat-container-panel { position: fixed; top: 0; left: 0; right: 0; z-index: 8001; /* Above .crown-container content but below the toggle button */ /* Start at some reasonable height (e.g. 300px) */ max-height: 300px; overflow-y: auto; /* Dark glass effect */ background: rgba(0, 0, 22, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Smooth open/close transition */ transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; }

/* When collapsed, reduce to 0 height */
.chat-container-panel.collapsed { max-height: 0; overflow: hidden; padding: 0; /* remove any top/bottom padding for a cleaner collapse */ }

/* Toggle Button (Golden style) */
.chat-handle-button { position: fixed; top: 10px; right: 10px; z-index: 8002; /* On top of everything */ background: linear-gradient(135deg, #ffef77 0%, #d4af37 100%); border: 1px solid #c49f27; padding: 8px 12px; color: #111; font-weight: lighter; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: all 0.3s ease-in-out; }

.chat-handle-button:hover { transform: translateY(-2px); box-shadow: 0 0 10px rgba(255, 251, 175, 0.5), 0 0 20px rgba(255, 251, 175, 0.3); }

/* Example custom sizing for mobile: If you want the panel fully extended on small devices, you can override 'max-height' in a media query. */
@media (max-width: 600px) { .chat-container-panel { max-height: 80vh; /* 80% of viewport height, for instance */ } /* Possibly adjust toggle button size/placement */ .chat-handle-button { top: 5px; right: 5px; padding: 6px 10px; font-size: 14px; } }

body { background-color: #343a40; }

/* styles.css */
body { margin: 0; min-height: 100vh; justify-content: center; align-items: center; }

.body-container { margin-top: 132px; }

@media (max-width: 768px) { body { font-size: 18px; } }

.container-full-width { margin-top: 130px; width: 100%; }

.container-column { max-width: 600px !important; margin: 90px auto; }

.container-invite { display: block; position: relative; max-width: 600px !important; padding: 20px; margin: 0px auto; background-color: #111; border: 1px solid gold; border-radius: 5px; }

.logout_cancel { position: relative; display: block; margin-top: 20px; color: goldenrod; }

#background { background-size: cover; background-position: center center; z-index: -10; position: fixed; top: 80px; min-height: calc(100vh - 80px); width: 100%; }

#account_page { min-height: 100vh !important; }

.account_row { min-height: 100vh !important; }

#panel_column { min-height: 100vh !important; }

#panel { min-height: 100vh !important; }

#main_scene #clouds_wrapper { z-index: 0; }

.form-container { width: 90%; max-width: 500px; padding: 20px; box-sizing: border-box; border-radius: 5px; }

.form-container input { background-color: white; color: black; }

.form-container input:focus { background-color: #ffffee; color: #333; }

.form-container input[type=text], .form-container input[type=password], .form-container input[type=email] { width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 3px; }

.form-container a { color: gold; }

.form-container a:hover { color: goldenrod; }

.form-container h1, .form-container h2, .form-container h3, .form-container h4, .form-container h5, .form-container h6 { margin-bottom: 20px; font-family: 'Roboto', sans-serif; font-weight: 500; margin-bottom: 20px; }

#home { max-width: 100%; overflow: hidden; background-color: #000206; }

.container-full-width { margin-top: 0px; width: 100%; }

#frontpage_main { height: 100vh !important; min-height: 100%; width: 100vw; background-color: #000000; display: block; position: relative; }

#background_main { background-size: cover; background-position: center center; animation: move-bg 100s ease-in-out 1; height: 200%; width: 200%; }

.title-container { z-index: 200; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }

.main_title { color: gold; font-size: 16rem; font-weight: bold; font-family: 'Playfair Display', serif; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); margin-bottom: 1rem !important; z-index: 200; }

@media screen and (max-width: 768px) { .main_title { font-size: 8rem; } .main_subtitle { font-size: 3rem; } }

.main_subtitle { font-family: 'Playfair Display', sans-serif; color: goldenrod !important; font-size: 2em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); z-index: 300; margin-top: 150px; }

@keyframes move-bg { 0% { background-position: center top; }
  100% { background-position: center bottom; } }

/* Example for header navbar with 50px height */
#header_navbar { height: 50px; }

#panel { display: block; overflow: hidden !important; position: relative; max-height: 100vh; }

#main_scene { height: 100%; width: 100%; }

#mountain { position: absolute; bottom: 0px; width: 100%; z-index: 100; }

#mountain img { width: 100%; }

#moon { width: 200px; height: 200px; position: absolute; top: 25%; left: 25%; margin-top: -50px; /* half of svg height */ margin-left: -50px; /* half of svg width */ z-index: 0; }

#moon img { width: 100%; height: 100%; }

.cloud_image { width: 100%; height: 100%; z-index: 120; }

#cloud1 { width: calc(600px * 1.8); height: calc(280px * 1.8); position: absolute; top: 18%; z-index: 220; left: -200px; }

#cloud1 img { width: 180%; height: 180%; }

#cloud2 { width: calc(600px * 1.4); height: calc(280px * 1.4); position: absolute; top: 18%; z-index: 190; left: -100px; }

#cloud2 img { width: 140%; height: 140%; }

#cloud3 { width: calc(600px * 1.2); height: calc(280px * 1.2); position: absolute; top: 18%; z-index: 180; left: -120px; }

#cloud3 img { width: 120%; height: 120%; }

#cloud4 { width: calc(600px * 0.9); height: calc(280px * 0.9); position: absolute; top: 18%; z-index: 160; left: -200px; }

#cloud4 img { width: 90%; height: 90%; }

#cloud5 { width: calc(600px * 1.6); height: calc(280px * 1.6); position: absolute; left: -220px; top: 14%; z-index: 60; }

#cloud5 img { width: 160%; height: 160%; }

#cloud6 { width: calc(600px * 1.4); height: calc(280px * 1.4); position: absolute; top: 14%; z-index: 40; left: -240px; }

#cloud6 img { width: 140%; height: 140%; }

body { background-color: #343a40; }

.core-container-full-width { margin-top: 96px; padding: 0px; background-color: #f8f9fa; padding: 20px; background-color: rgba(0, 0, 0, 0.75); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: #f8f9fa; max-width: 90%; border: 2px solid gold; }

.core-container-full-width h1 { color: gold; font-family: 'PlayFair Display', serif; }

.core-container-full-width h2 { color: gold; font-family: 'PlayFair Display', serif; }

.core-container-full-width table { border: 1px solid #222; color: white; font-family: 'Roboto', sans-serif; font-weight: 100; }

.core-container-column { max-width: 600px !important; margin: 136px auto; padding: 20px; min-height: 60vh; display: block; position: relative; z-index: 100; border: 2px solid gold; box-shadow: 0px 0px 50px gold; background-color: rgba(0, 0, 0, 0.75); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: #f8f9fa; }

.core-container-column h2 { color: gold; }

.core-container-column .form-control { color: white; }

.model-link { color: goldenrod; }

.model-link:hover { color: gold; }

.terms_container { padding: 20px; background-color: rgba(0, 0, 0, 0.9); padding: 30px; background-color: rgba(0, 0, 0, 0.9); box-shadow: 0px 0px 100px gold; margin-top: 100px; margin-bottom: 100px; }

.terms_container h1 { color: gold; }

.terms_container h2 { color: gold; }

.terms_container h3 { color: gold; }

.profile_container { margin-top: 80px; padding: 10px; }

.profile_masthead { background: #343a40; background-position: cover; height: auto; padding-bottom: 15px; padding-top: 10px; overflow: hidden; min-height: 70vh; }

@media screen and (max-width: 768px) { .profile_masthead { display: none; } .card { flex-direction: column; } .card .card-body { order: 2; } .card .col-md-4 { order: 1; } .card .col-md-8 { order: 3; } }

#profile { display: flex; align-items: center; }

#profile_picture { margin-right: 8px; }

.main_profile_name { font-weight: bold; text-align: left; }

#profile_details { display: block; width: 100%; }

#profile_picture { overflow: hidden; display: block; margin: 10px 20px; width: 40px; height: 40px; border: 2px solid #c17d00; border-radius: 50%; }

.main_profile_pic { display: block; width: 40px; height: 40px; }

.main_profile_name { display: block; width: 110px; height: auto; text-align: left; font-size: 1.5rem; font-weight: 700; color: #343a40; margin: 10px auto; }

body { font-size: 17px; }

/* Mobile devices (default) */
.profile-container { width: 100%; padding: 1em; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { .profile-container { max-width: 540px; margin: auto; padding: 1em; } }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { .profile-container { max-width: 720px; margin: auto; padding: 1em; } }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { .profile-container { max-width: 960px; margin: auto; padding: 1em; } }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { .profile-container { max-width: 1140px; margin: auto; padding: 1em; } }

.shadow { box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1); }

.btn-danger { color: #fff; background-color: #f00000; border-color: #dc281e; }

.profile-masthead { background: #343a40; background-position: cover; height: auto; padding-bottom: 15px; padding-top: 10px; overflow: hidden; min-height: 70vh; }

.profile-overlay { height: 70vh; background-repeat: no-repeat; background-size: cover; background-position: center center; }

.card-header { border-radius: 0px !important; }

@media screen and (max-width: 768px) { .card { flex-direction: column; } .blog_container .card .col-md-6 { flex: 1 0 auto; } }

.studio-container { margin-top: 80px; border: 1px solid rgba(255, 215, 0, 0.5); padding: 20px; }

.thumbnail { display: inline-block; margin: 2.5%; }

.thumbnail-image { width: 180px; height: auto; display: inline-block; vertical-align: top; border: 1px solid #eee; }

.container-column img { display: block; position: relative; max-width: 100%; }

.asset-thumbnails { justify-content: center; text-align: center; }

.studio-container #load-more { margin: 20px 0px; }

.studio-container #search-input { font-size: 1em; }

.thumbnail-image { opacity: 0; transition: opacity 1s ease-out; }

.thumbnail-image.loaded { opacity: 1; background-color: none !important; }

.asset-thumbnail { background-color: rgba(255, 215, 0, 0.25); /* Placeholder color */ display: inline-block; width: 200px; /* Set to your desired width */ height: 200px; /* Set to your desired height */ padding: 10px; }

.thumbnail-image { display: block; width: 100%; height: auto; }

.studio-container { margin-top: 80px; border: 1px solid rgba(255, 215, 0, 0.5); padding: 20px; }

.asset-thumbnail { display: inline-block; width: 100%; }

.thumbnail-image { width: 100%; height: auto; display: inline-block; vertical-align: top; margin: 15px 0; border: 1px solid #eee; opacity: 0; transition: opacity 0.5s ease-out; }

.thumbnail-image.loaded { opacity: 1; }

.container-column img { display: block; position: relative; max-width: 100%; }

.asset-thumbnails { justify-content: center; text-align: center; }

.studio-container #load-more { margin: 20px 0px; }

.studio-container #search-input { font-size: 1em; }

@media (min-width: 768px) { .asset-thumbnail { width: calc(30% - 10px); display: inline-block; margin: 15px; } .thumbnail-image { width: 100%; margin: 0; } }

@media (min-width: 992px) { .asset-thumbnail { width: 300px; height: 300px; } }

body { font-family: "Open Sans", sans-serif; font-size: 17px; }

.background_blog { background-size: cover; background-position: center center; height: 100%; width: 100%; opacity: 0.5; position: fixed; z-index: -1000; top: 0px; }

.blog_post_masthead { background-color: transparent !important; padding-bottom: 15px; padding-top: 10px; height: 20vh; }

.the_zone { position: relative; top: 30%; max-height: 100%; height: 100%; margin: 0px auto; }

.site-heading { padding: 20px; position: relative; width: 100%; }

#search-input { background-color: rgba(0, 0, 0, 0.5); padding: 10px; font-family: "PlayFair Display", serif; color: white; font-size: 1.5rem; border: 2px solid gold; color: gold; -webkit-backdrop-filter: blur(10px); }

.search-minor { font-size: 1.1rem !important; padding: 5px 10px !important; }

/* Mobile devices (default) */
.blog_container { width: 100%; position: relative; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 100; padding: 10px 10px 100px 10px; margin-top: 100px; padding-bottom: 100px; }

.blog_post_container { width: 100%; position: relative; padding-top: 100px; margin-top: 100px; margin-bottom: 100px; background-color: rgba(0, 0, 0, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 100; padding: 10px 10px 100px 10px; }

.title_link { text-decoration: none !important; }

.blog_container h1, .blog_container h2, .blog_container h3, .blog_container h4, .blog_container h5, .blog_container h6 { color: gold; font-family: 'Playfair Display', serif; }

.card .blog_post_action_row { transition-duration: 0.3ms; visibility: hidden; width: 100%; position: absolute; top: 0px; padding: 20px; margin: 0px; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

.card .blog_post_action_row .blog_post_action { text-align: center; }

.card:hover .blog_post_action_row { visibility: visible; }

.blog_post_action_row a { font-size: 0.9em; color: gold; text-decoration: none; text-align: center; display: block; }

.blog_post_action_row a:hover { font-size: 0.9em; color: white; text-decoration: none; text-align: center; display: block; }

.blog_post_action_row a:hover .fas { color: white; }

.blog_post_container h1, .blog_post_container h2, .blog_post_container h3, .blog_post_container h4, .blog_post_container h5, .blog_post_container h6 { color: gold; font-family: 'Playfair Display', serif; }

#social_share { margin: 20px 0px; display: block; position: relative; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { .blog_container { max-width: 540px; margin: auto; margin-top: 200px; margin-bottom: 200px; } .blog_post_container { max-width: 540px; margin: auto; margin-top: 200px; margin-bottom: 200px; } .site-heading { max-width: 540px; } #blog_list_inner .blog_list_post h2 { margin: 0; font-size: 1.2em; color: gold; } #blog_list_inner .blog_list_post h4 { margin: 0; font-size: 1em; color: gold; } }

@media screen and (max-width: 768px) { .blog_container .card { flex-direction: column; } .title_link { font-size: 1.3em; } .blog_container .card .col-md-6 { flex: 1 0 auto; } .blog_post_container { max-width: 720px; margin: auto; margin-top: 200px; margin-bottom: 200px; } #blog_list_inner .blog_list_post h4 { margin: 0; font-size: 1.1em; color: gold; } }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { .blog_container { max-width: 720px; margin: auto; margin-top: 200px; margin-bottom: 200px; } .blog_post_container { max-width: 720px; margin: auto; margin-top: 200px; margin-bottom: 200px; } .site-heading { max-width: 720px; } #blog_list_inner .blog_list_post h4 { margin: 0; font-size: 1.3em; color: gold; } }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { .blog_container { max-width: 960px; margin: auto; margin-top: 200px; margin-bottom: 200px; } .blog_post_container { max-width: 800px; margin: auto; margin-top: 200px; margin-bottom: 200px; } .site-heading { max-width: 960px; } }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { .blog_container { max-width: 720px; position: absolute; left: 77px; top: 77px; margin: auto; margin-bottom: 300px; margin-top: 300px; } .blog_post_container { max-width: 800px; margin: auto; padding: 20px; margin-top: 300px; margin-bottom: 300px; } .the_zone { max-width: 1120px; } .site-heading { max-width: 1120px; } }

.shadow { box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1); }

.btn-danger { color: #fff; background-color: #f00000; border-color: #dc281e; }

.blog_masthead { background: transparent; padding-bottom: 15px; padding-top: 10px; overflow: hidden; height: 30vh; }

.blog_masthead .container { position: relative; display: block; position: relative; height: 100%; }

#blog_list { z-index: 1; position: relative; max-width: 100%; margin: 0px auto; }

#blog_list_inner { z-index: 100; }

#blog_list_inner .blog_list_post { width: 100%; margin-bottom: 15px; border: 1px solid rgba(255, 215, 0, 0.85); position: relative; }

#blog_list_inner .blog_list_post h4 { margin: 0; font-size: 1.2em; color: gold; }

#blog_list_inner .blog_list_post .post_link { position: absolute; z-index: 100; bottom: 40%; background-color: rgba(0, 0, 0, 0.85); padding: 20px; text-align: center; font-size: 1.1em; border-top: 1px solid gold; border-bottom: 1px solid gold; left: 0px; right: 0px; }

#postModal .modal-content { padding: 20px; }

#postModal .modal-header { padding: 0px; }

/* styles/main.scss */
/* Common styles for search bar */
.search-bar { margin: 20px 0; }

/* Top-positioned search bar */
.top-search { /* Styles specific to top placement */ /* For example, larger font size, prominent colors */ }

/* Bottom-positioned search bar */
.bottom-search { /* Styles specific to bottom placement */ /* For example, subdued colors, smaller size */ }

.golden-search-info { color: gold; font-size: 1rem; margin: 10px 0; text-shadow: 0px 0px 2px rgba(255, 215, 0, 0.5); }

/* ============================= */
/*   Shared Golden Button Style  */
/* ============================= */
.gold-button, .pagination-button { position: relative; display: inline-block; margin: 0 5px; padding: 8px 16px; border-radius: 2px; text-decoration: none; text-transform: uppercase; font-weight: lighter; text-align: center; text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.8); background: linear-gradient(135deg, #ffef77 0%, #d4af37 100%); color: #111; transform: translateY(-2px); box-shadow: 0 0 0px rgba(255, 215, 0, 0.4); border: none; transition: all 0.3s ease-in-out; }

/* Button Glow Layer */
.gold-button::before, .pagination-button::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.5), transparent 50%); opacity: 0.3; pointer-events: none; }

/* Hover */
.gold-button:hover, .pagination-button:hover { background-color: #c9a136; transform: translateY(-2px); box-shadow: 0 0 15px rgba(255, 251, 138, 0.1), 0 0 30px rgba(255, 251, 175, 0.5), 0 0 45px rgba(255, 255, 255, 0.9); color: #111; }

/* Pressed State */
.gold-button:active, .pagination-button:active { background: linear-gradient(135deg, #ffef77 0%, #a8861f 100%); transform: translateY(0); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.1); text-shadow: none; }

/* ============================= */
/*         Pagination Block      */
/* ============================= */
.pagination { text-align: center; margin-top: 1rem; }

.pagination .step-links { display: inline-block; font-size: 1rem; font-weight: lighter; color: #000; }

/* Visited pagination links */
.step-links a { color: #111; font-weight: lighter; font-size: 1rem; }

/* Current page span styled like a disabled button */
.pagination-button.current { cursor: default; color: #111; font-weight: lighter; pointer-events: none; }

.pagination-button.current::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.5), transparent 50%); opacity: 0.3; pointer-events: none; }

/* ============================= */
/*     Mobile: Stack Buttons     */
/* ============================= */
@media screen and (max-width: 768px) { .pagination .step-links { display: flex; flex-direction: column; align-items: center; width: 100%; } .pagination-button { display: block; width: 100%; max-width: 100%; margin: 10px auto; } }

/* _edit_post.scss */
#div_id_featured_file { background: rgba(0, 0, 0, 0.5); padding: 10px; }

.post-edit-form-container { margin-top: 100px; }

.form-label { color: gold !important; }

.post-image { position: relative; height: 300px; /* Increase the height as per your requirement */ background-position: center; background-repeat: no-repeat; background-size: cover; }

#id_categories { height: 300px; }

.post-image-input-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.form-control-file { width: 100%; height: 100%; cursor: pointer; color: white; }

.form-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; background-color: rgba(0, 0, 0, 0.6); padding: 20px; }

.post-form-container { margin-top: 20px; background-color: rgba(0, 0, 0, 0.75); color: #fff; padding: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; max-width: 80%; }

.post-form-container h2 { color: gold; font-family: 'PlayFair Display', serif; }

.btn-block { font-size: 1.2rem; padding: 0.8rem 0; color: #343a40; background-color: #f8f9fa; }

label { color: #f8f9fa; }

.post-image a { color: white; }

.post-image .form-control { color: white; }

.post-edit-form-container .post_form_column { display: inline-block; vertical-align: top; box-sizing: border-box; padding: 10px; }

/* Responsive CSS - one below another */
@media (max-width: 768px) { /* Adjust breakpoint as needed */ .post-edit-form-container .post_form_column { display: block; } }

.img-flag { max-width: 100%; }

#chat_background { background-size: cover; background-position: center center; z-index: -10; position: fixed; top: 80px; min-height: calc(100vh - 80px); width: 100%; }

#chat_background img { height: 100vh; }

#chat { position: relative; padding: 0px; margin: auto; }

.chat-container-column { background-color: rgba(0, 0, 0, 0.8); max-width: 640px !important; margin: 100px auto 10px auto; display: block; position: relative; padding: 10px; height: calc(100vh - 80px); box-shadow: 0px 0px 5px gold; border: 2px solid gold; z-index: 100; }

#chatbot_effects { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: index -10; /* rest of your styles */ }

#chatbot_effects { min-height: 100%; min-width: 100%; margin: 0px; padding: 0px; position: relative; overflow: hidden; }

html, body { height: 100%; }

#folders-list { position: relative; width: 100%; }

.code-reflection { height: calc(100vh -90px); }

.code-container-full-width { padding: 0px; background-color: black; z-index: 100; display: block; position: relative; margin-top: 90px; }

#code_reflection { padding: 10px; }

#folders-list .folder-name { transition: background-color 0.3s ease, color 0.3s ease; border-radius: 2px; font-size: 0.8rem; }

#folders-list .folder-name:hover { background-color: turquoise; color: white; font-weight: bold; }

#folders-list .folder-name.selected { background-color: #336699; color: white; font-weight: bold; padding: 5px 10px; overflow: hidden; text-transform: uppercase; }

.container-files-content { background-color: #333; padding: 5px; }

.code_reflection_code_content { width: 10px; height: 100%; background-color: #111; }

#folder-list { list-style: none; padding: 5px; }

.folder, .file { color: white; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; border-radius: 2px; font-size: 0.8rem; list-style: none; }

.file:hover { color: white; cursor: pointer; background-color: magenta; font-weight: bold; }

.file.selected { background-color: #FF66CC; font-weight: bold; }

.file-version-container { border: 1px solid #111; padding: 5px; }

.file { padding: 5px 10px; vertical-align: middle; font-family: 'Roboto', sans-serif; font-size: 0.8rem; font-weight: 100; }

.contents { padding-left: 25px; padding-top: 5px; }

pre { margin: 5px 0px !important; }

.file-version-header { display: flex; flex-direction: column; /* Stack children vertically */ align-items: flex-start; /* Align items to the start of the column */ gap: 10px; width: 100%; padding: 10px; background-color: gold; }

.file-version-body { display: none; /* Hide initially */ background-color: #111; }

.actions { display: flex; /* Use flexbox to distribute buttons */ justify-content: space-around; /* Space buttons evenly across the width */ width: 100%; font-size: 0.75rem; padding: 10px 0; /* Add some padding for visual separation */ }

.action { color: gold; font-weight: lighter; text-transform: uppercase; border: 1px solid gold; cursor: pointer; padding: 5px 10px; flex-grow: 1; text-align: center; transition: background-color 0.3s, color 0.3s; }

.action:hover { color: yellow; background-color: rgba(255, 255, 0, 0.1); }

.file-version-header-text { width: 100%; color: black; cursor: pointer; /* Makes the text look clickable */ font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 0.75rem; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }

.expand { margin-left: auto; font-size: 0.75rem; color: #666; text-transform: uppercase; cursor: pointer; }

.file-version-header-text-version { color: black; font-size: 0.75rem; cursor: initial; text-transform: uppercase; cursor: pointer; }

#code_reflection_navigator { background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari support */ border: 1px solid rgba(255, 255, 255, 0.1); /* Optional border */ margin: 0px; height: 100vh; /* Set the height to 100% of the viewport height */ overflow-y: auto; /* Add a scrollbar if the content overflows */ position: relative; }

#code_reflection_code_content { background-color: #000; padding: 0px; height: 100vh; /* Set the height to 100% of the viewport height */ overflow-y: auto; /* Add a scrollbar if the content overflows */ position: relative; }

#code_reflection_chatbot { left: 0px; height: calc(100% - 76px); background-color: rgba(0, 0, 0, 0.75); padding: 5px 10px; overflow-y: auto; /* Add a scrollbar if the content overflows */ }

.container-code-content { background-color: #666; padding: 5px; }

.folder { position: relative; cursor: pointer; list-style: none; }

.folder-toggle { position: absolute; left: 5px; padding-right: 5px; }

.folder-name { padding: 5px 10px; vertical-align: middle; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 100; color: white; text-transform: uppercase; }

.folder-content .folder .folder-content { padding-left: 20px; }

.folder-content .file { padding-left: 20px; }

.file-name::before { content: ""; display: inline-block; height: 1rem; width: 1rem; background-image: url("./svg/file-earmark-text.svg"); background-repeat: no-repeat; background-size: contain; background-color: #CC33CC; margin: 0px 5px 0pc 0px; border: 3px solid #CC33CC; border-radius: 3px; vertical-align: middle; }

.folder-name::before { content: ""; display: inline-block; height: 1rem; width: 1rem; background-image: url("./svg/folder2.svg"); background-repeat: no-repeat; background-size: contain; background-color: #336699; margin: 0px 5px 0pc 0px; border: 3px solid #66CCFF; border-radius: 3px; vertical-align: middle; }

/* Add these new styles for the chat input box */
#input { position: sticky; bottom: 10px; left: 10px; right: 10px; }

h4 { margin: 10px; color: #f8f9fa; }

.chatbot_title { color: #343a40; }

#messages { margin-top: 16px; }

.slider_body { width: 100%; display: inline-block; vertical-align: top; }

.slider_handle { display: inline-block; vertical-align: top; cursor: col-resize; }

.chatbot-handle { width: 10px; height: 100%; background-color: #ddd; }

.navigator-handle { width: 10px; height: 100%; background-color: #999; }

.panel.ui-resizable-e { width: 15px; background-color: rgba(255, 215, 0, 0.5); right: -5px; top: 0; height: 100%; cursor: ew-resize; }

.code-context-header { padding: 10px; }

.code-context-buttons { display: flex; justify-content: space-between; align-items: center; /* Optional: Centers buttons vertically if they have varying heights */ padding: 0; /* Ensure there's no padding interfering */ margin: 0; /* Ensure there's no margin interfering */ }

.code-context-btn { font-family: 'Roboto', sans-serif; padding: 5px 10px; border: 2px solid #993399; background-color: transparent; color: magenta; text-align: center; /* Centers text within buttons */ margin: 0 5px; font-size: 0.8rem; transition: background-color 0.3s, color 0.3s; text-transform: uppercase; font-weight: bold; cursor: pointer; }

.code-context-btn i { margin-right: 5px; color: magenta !important; }

.code-context-btn:hover { background-color: magenta; color: white; }

.code-context-btn:hover .fa, .code-context-btn:hover .fas { color: white; }

.code-context-btn:hover i { margin-right: 5px; color: white !important; }

#code-search-input { width: 100%; background-color: rgba(0, 0, 0, 0.5); padding: 5px 10px; font-family: 'Roboto', sans-serif; font-weight: lighter; font-size: 1.4rem; border: 1px solid gold; color: gold; margin: 10px auto; border-radius: 2px; }

/* Media query for small/mobile devices */
@media (max-width: 576px) { /* Increase font size of folder/file labels */ #folders-list .folder-name, .file { font-size: 1.2rem; /* Larger text for mobile */ } /* Increase icon size for folders/files */ #folders-list .folder-name::before, .file::before { width: 1.4rem; /* Increase icon width */ height: 1.4rem; /* Increase icon height */ } }

.logs-container-full-width { margin-top: 80px; padding: 0px; background-color: white; }

.inquiry-container-column { max-width: 600px !important; margin: 136px auto; padding: 20px; min-height: 60vh; position: relative; z-index: 100; }

.inquiry-container-column h2 { font-family: 'Playfair Display', serif; color: gold; }

.leaflet-popup-content-wrapper { background: rgba(0, 0, 0, 0.9) !important; color: greenyellow !important; border-radius: 0px !important; border: 1px solid yellowgreen !important; }

.leaflet-popup-tip-container { width: 40px; height: 20px; }

.leaflet-popup-tip { background: rgba(0, 0, 0, 0.9) !important; border: none  !important; box-shadow: none  !important; border: 1px solid yellowgreen !important; }

/* Dark mode for zoom control */
.leaflet-control-zoom { background-color: #2c3e50 !important; /* Dark blue */ border-radius: 2px !important; box-shadow: none !important; }

.leaflet-top.leaflet-right .leaflet-control-zoom { margin-top: 116px !important; }

.leaflet-control-zoom a { color: #ecf0f1 !important; /* Light gray */ background-color: transparent !important; border: none !important; }

.leaflet-control-zoom a:hover { background-color: rgba(255, 255, 255, 0.1) !important; /* Slightly lighter color on hover */ }

.leaflet-popup-content { font-size: 12px !important; font-family: 'Avenir', 'Avenir Next'; }

.leaflet-control-attribution { font-size: 10px; }

.learn-more-btn { display: block; margin: 5px auto; padding: 5px; text-align: center; width: 100%; background-color: turquoise; color: black; }

.profile_container { margin-top: 80px; padding: 10px; }

.profile_masthead { background: #343a40; background-position: cover; height: auto; padding-bottom: 15px; padding-top: 10px; overflow: hidden; min-height: 70vh; }

@media screen and (max-width: 768px) { .profile_masthead { display: none; } .card { flex-direction: column; } .card .card-body { order: 2; } .card .col-md-4 { order: 1; } .card .col-md-8 { order: 3; } }

#profile { display: flex; align-items: center; }

#profile_picture { margin-right: 8px; }

.main_profile_name { font-weight: bold; text-align: left; }

#profile_details { display: block; width: 100%; }

#profile_picture { overflow: hidden; display: block; margin: 10px 20px; width: 40px; height: 40px; border: 2px solid #c17d00; border-radius: 50%; }

.main_profile_pic { display: block; width: 40px; height: 40px; }

.main_profile_name { display: block; width: 110px; height: auto; text-align: left; font-size: 1.5rem; font-weight: 700; color: #343a40; margin: 10px auto; }

body { font-size: 17px; }

/* Mobile devices (default) */
.profile-container { width: 100%; padding: 1em; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { .profile-container { max-width: 540px; margin: auto; padding: 1em; } }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { .profile-container { max-width: 720px; margin: auto; padding: 1em; } }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { .profile-container { max-width: 960px; margin: auto; padding: 1em; } }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { .profile-container { max-width: 1140px; margin: auto; padding: 1em; } }

.shadow { box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1); }

.btn-danger { color: #fff; background-color: #f00000; border-color: #dc281e; }

.profile-masthead { background: #343a40; background-position: cover; height: auto; padding-bottom: 15px; padding-top: 10px; overflow: hidden; min-height: 70vh; }

.profile-overlay { height: 70vh; background-repeat: no-repeat; background-size: cover; background-position: center center; }

.card-header { border-radius: 0px !important; }

@media screen and (max-width: 768px) { .card { flex-direction: column; } .blog_container .card .col-md-6 { flex: 1 0 auto; } }

/* _user_profile.scss */
.user_profile_container { margin-top: 100px; }

.form-label { color: gold !important; }

.cover-image { position: relative; height: 400px; /* Increase the height as per your requirement */ background-position: center; background-repeat: no-repeat; background-size: cover; }

.cover-input-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.form-control-file { width: 100%; height: 100%; cursor: pointer; color: white; }

.form-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; background-color: rgba(0, 0, 0, 0.6); padding: 20px; }

.user-profile-form-container { margin-top: 110px; background-color: rgba(0, 0, 0, 0.75); color: #fff; padding: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; max-width: 80%; }

.user-profile-form-container h2 { color: gold; font-family: 'PlayFair Display', serif; }

.btn-block { font-size: 1.2rem; padding: 0.8rem 0; color: #343a40; background-color: #f8f9fa; }

label { color: #f8f9fa; }

.textarea-profile { border: 1px solid gold !important; background-color: rgba(0, 0, 0, 0.9); color: white; }

.textarea-profile:focus { border: 1px solid gold !important; background-color: rgba(0, 0, 0, 0.9); color: gold; }

/* .textarea-profile { background-color: #515a62; border-color: #444; color: #fff; } #id_description, #id_profile_name { background-color: #515a62; border-color: #444; color: #fff; } #id_description:focus, #id_profile_name:focus { background-color: #495057; border-color: #80bdff; color: #f8f9fa; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); } */
#div_id_cover { padding: 20px; background-color: rgba(0, 0, 0, 0.5); }

.cover-input-overlay a { color: white; }

#div_id_photo a { color: white; }

#div_id_photo .form-control { color: white; }

.user_profile_form_column.profile-columns { display: inline-block; vertical-align: top; box-sizing: border-box; padding: 10px; width: 48%; /* Adjust as needed */ }

/* Responsive CSS - one below another */
@media (max-width: 768px) { /* Adjust breakpoint as needed */ .user_profile_form_column.profile-columns { display: block; width: 100%; } }

.library-container { margin-top: 100px; padding: 10px; }

.library-container .form-control { background-color: #666; color: white; }

.library-container .form-control::placeholder { color: gold; }

.library-container .card-title a { color: gold; }

#library_book .card-title { margin-bottom: 30px; border-bottom: 1px solid #999; padding-bottom: 30px; }

#library_chatbot { left: 0px; height: calc(100% - 80px); background-color: #fff; padding: 5px 10px; overflow-y: auto; /* Add a scrollbar if the content overflows */ z-index: 1000; position: relative; display: block; }

/*
#library_chatbot .chatbot_fixed_wrapper {
position: fixed; 
top:0px;
left:0px;
height:100vh;
}*/
#library_book { padding: 0px 10px; }

#library_book .btn-full { width: 100%; margin-bottom: 60px !important; }

.position-sticky { overflow-y: auto; height: calc(100vh - 80px); /* So it doesn't overflow viewport height */ position: fixed !important; }

.wallet_container { margin-top: 80px; padding: 10px; min-height: calc(100vh - 80px); }

.wallet_container #balance { background-color: gold; }

.wallet_container #balance #card_wallet_label { font-weight: bold; color: #333; }

.wallet_container #balance #card_main { display: flex; }

.wallet_container #balance #card_currency, .wallet_container #balance #card_balance { font-size: 5rem; color: black; font-weight: bold; }

@media (max-width: 1200px) { .wallet_container #balance #card_currency, .wallet_container #balance #card_balance { font-size: 3rem; } }

@media (max-width: 767px) { .wallet_container #balance #card_currency, .wallet_container #balance #card_balance { font-size: 2rem; } }

@media (max-width: 575px) { .wallet_container #balance #card_currency, .wallet_container #balance #card_balance { font-size: 1.8rem; } }

.wallet_container #balance .card-text { color: black; }

.wallet_container #balance .card-body label { color: #000; }

.wallet_container #balance .card-body input { color: #000; width: 100%; margin-bottom: 10px; }

.wallet_container #balance .row { width: 100%; margin-bottom: 10px; }

.wallet_container #top_up input { line-height: 2rem; border: 1px solid goldenrod !important; color: gold; border-radius: 0px; }

.wallet_container #withdraw input { line-height: 2rem; border: 1px solid goldenrod !important; color: gold; border-radius: 0px; }

#downline_table { width: 100%; margin-top: 20px; }

#downline_table td { padding: 10px; border-bottom: 1px solid #ccc; }

#downline_table th:nth-child(2) { text-align: right; }

#downline_table td:nth-child(2) { text-align: right; }

#downline_table th { color: goldenrod; }

#downline td { color: wheat; }

#invite_button { float: right; width: auto; }

#referral_link p { color: orange; }

#referral_link p a { color: orange; text-decoration: underline; }

.modal-content { border-radius: 0px; background-color: rgba(0, 0, 0, 0.9); padding: 40px; box-shadow: 0px 0px 36px gold; }

.modal-content #id_invitee_email { width: 75%; line-height: 2em; }

#background img { height: 100vh; }

#edit_lesson { position: absolute; right: 5px; top: 5px; color: gold; }

h5 { position: relative; }

.ll_container { margin: 80px auto; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { .ll_container { max-width: 540px; margin: 80px auto; } }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { .ll_container { max-width: 720px; margin: 80px auto; padding: 1em; } }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { .ll_container { max-width: 960px; margin: 80px auto; } }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { .ll_container { max-width: 1120px; margin: 80px auto; } }

.lesson-form-container { margin-top: 110px; background-color: #333; color: #fff; padding: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; max-width: 80%; }

.lesson-form-container .form-container { max-width: 100%; width: 100%; }

.lesson-form-container .form-columns { display: inline-block; vertical-align: top; box-sizing: border-box; padding: 10px; width: 48%; /* Adjust as needed */ }

.lesson-form-container .form-select { min-height: 400px; }

.lesson-form-container #id_content { background-color: #515a62; border-color: #444; color: #fff; }

.lesson-form-container #id_description { background-color: #515a62; border-color: #444; color: #fff; }

#form_column { background-color: rgba(0, 0, 0, 0.9); z-index: 50; }

#panel_column { padding: 0px; }

#form_column .form-container { z-index: 100; }

#main_scene #clouds { position: fixed; top: 0px; z-index: 0; width: 100%; left: 0px; }

.additional-options { display: flex; justify-content: space-between; margin-top: 20px; }

.additional-option { width: 50%; text-align: left; }

#thank_you_container .card-body { position: absolute; top: 33%; background-color: rgba(0, 0, 0, 0.7); width: 100%; }

#thank_you_container h1 { color: gold; }

#todo_list { list-style: none; padding: 0px; }

.todo_item { background-color: rgba(0, 0, 0, 0.8); border: 1px rgba(255, 227, 128, 0.32) solid; padding: 10px; margin: 10px 0px; }

.todo_edit_button { display: block; float: right; cursor: pointer; }

.todo_delete_button { display: block; float: right; cursor: pointer; }

.todo_play_button { display: block; float: right; cursor: pointer; }

.pencil_icon { height: 30px; width: 30px; }

.bin_icon { height: 30px; width: 30px; }

.todo_item a { font-size: 1.1em; text-decoration: none; cursor: pointer; font-family: 'PlayFair Display', serif; }

.property .label { font-weight: normal; font-size: 11px; color: #ccc; margin-right: 10px; }

.property .data { font-weight: bold; font-size: 11px; color: #fff; }

.todo_top_actions { margin-top: 10px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid gold; }

#todo-detail h1 { color: gold; font-family: 'Roboto' sans-serif; font-weight: lighter; margin-top: 1rem; }

#todo-detail .properties { width: 100%; margin: 20px auto; border: 1px solid #333; padding: 10px; }

.processing { /* Style for processing state, e.g., a neutral color */ color: yellow; }

.success { /* Style for success state, e.g., green color */ color: green; }

.error { /* Style for error state, e.g., red color */ color: red; }

/* styles.css */
.fade-in-animation { animation: fadeIn 0.5s ease-in-out; }

@keyframes fadeIn { from { opacity: 0;
    transform: translateY(-10px); }
  to { opacity: 1;
    transform: translateY(0); } }

.file_item { background-color: rgba(0, 0, 0, 0.8); border: 1px rgba(255, 227, 128, 0.32) solid; padding: 10px; margin: 10px 0px; }

.file_item_inner { display: flex; align-items: top; }

.file_col { padding: 5px; }

.file_col a { text-decoration: none; }

.file_item a { text-decoration: none; }

.file_item h5 { margin-bottom: 10px; }

.file_item .file_preview_wrapper { overflow: hidden; height: 100px; width: 100px; margin: 5px; display: block; }

.file_item .file_preview { height: 150%; width: auto; }

.file_item .file_type { background-color: magenta; padding: 5px; height: 40px; color: white; }

.file_item:hover { box-shadow: 0 0 20px gold; transition-duration: 100ms; }

.add_new { text-align: right; margin-top: 10px; }

.add_new a { color: gold; text-decoration: none; }

.modal-backdrop.show { z-index: 1040; }

.modal { z-index: 1050; }

.error_page_container { width: 100%; position: relative; background-color: rgba(0, 0, 0, 0.3); }

.error_container { top: calc(50% - 250px); left: calc(50% - 250px); position: fixed; width: 500px; height: 500px; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 300; padding: 20px; border: 2px solid gold; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); }

.error_code { color: gold; font-size: 180px; font-weight: bold; text-align: center; font-family: 'PlayFair Display', serif; text-shadow: 0px 0px 1px black; }

.error_container h1 { text-align: center; font-size: 32px; }

.error_container { text-align: center; font-size: 24px; }

.edit-mode .form-control, .edit-mode .form-control:focus { border: 1px solid gold !important; color: white; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* styles/effects/_clouds.scss */
#clouds_wrapper { width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; z-index: -1; }

.cloud { position: absolute; }

.effect_cloud { visibility: hidden; }

#clouds { max-height: 100%; max-width: 100%; z-index: -1; position: relative; }

#cloud1 { width: calc(600px * 1.8); height: calc(280px * 1.8); position: absolute; z-index: 220; left: -800px; opacity: 0.4; animation: blur-to-sharp 22s ease-in-out infinite; }

#cloud1 img { width: 180%; height: 180%; }

#cloud2 { width: calc(600px * 1.4); height: calc(280px * 1.4); position: absolute; z-index: 190; left: -800px; opacity: 0.4; animation: blur-to-sharp 24s ease-in-out infinite; }

#cloud2 img { width: 140%; height: 140%; }

#cloud3 { width: calc(600px * 1.2); height: calc(280px * 1.2); position: absolute; z-index: 180; left: -800px; opacity: 0.5; animation: blur-to-sharp 26s ease-in-out infinite; }

#cloud3 img { width: 120%; height: 120%; }

#cloud4 { width: calc(600px * 0.9); height: calc(280px * 0.9); position: absolute; z-index: 160; left: -800px; opacity: 0.5; animation: blur-to-sharp 28s ease-in-out infinite; }

#cloud4 img { width: 90%; height: 90%; }

#cloud5 { width: calc(600px * 1.6); height: calc(280px * 1.6); position: absolute; left: -800px; z-index: 60; opacity: 0.6; animation: blur-to-sharp 30s ease-in-out infinite; }

#cloud5 img { width: 160%; height: 160%; }

#cloud6 { width: calc(600px * 1.4); height: calc(280px * 1.4); position: absolute; z-index: 40; left: -800px; opacity: 0.7; animation: blur-to-sharp 34s ease-in-out infinite; }

#cloud6 img { width: 140%; height: 140%; }

@keyframes blur-to-sharp { 0% { filter: blur(0);
    /* Object is completely blurred */
    opacity: 0.6; }
  50% { filter: blur(10px);
    opacity: 0.1; }
  100% { filter: blur(0);
    /* Object is completely sharp */
    opacity: 0.6; } }

#kaleidoscope_wrapper { width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; z-index: -1; }

.kaleidoscope { position: absolute; }

#kaleidoscope { max-height: 100%; max-width: 100%; z-index: -1; position: relative; }

.black-glass-effect { background: rgba(0, 0, 0, 0.5); /* Dark transparent background */ border-radius: 15px; /* Smooth corners */ border: 1px solid rgba(255, 255, 255, 0.1); /* Light border for contrast */ backdrop-filter: blur(10px); /* Frosted glass blurring effect */ -webkit-backdrop-filter: blur(10px); /* Safari support */ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); /* Dark shadow for depth */ padding: 20px; /* Padding for content */ color: #fff; /* White text for contrast */ }

/*# sourceMappingURL=main.css.map */