/* CSS Variables for easy tweaking */
:root {
--base-color: #182C4A;
--mobile-base-color: #FFFFFF;
--primary-glow: #00FFFF;
--secondary-glow: rgb(168, 222, 207);
--white-glow: #FFFFFF;
--glow-blur: 75px;
--animation-speed: 30s;
--parallax-strength: 0.225;
--blend-mode: screen;
--plasma-intensity: 0.75;
--heart-color1: #ADD8E6; /* Light blue for morphing */
--heart-color2: #00FFFF; /* Cyan for morphing */
--side-gap: 5mm;
--current-bg: var(--base-color);
--current-text: #FFFFFF;
--current-rgb: 255, 255, 255;
--inverse-rgb: 0, 0, 0;
--transparent-bg: rgba(255, 255, 255, 0.1);
--transparent-low: rgba(255, 255, 255, 0.08);
--transparent-border: rgba(255, 255, 255, 0.18);
--copyright-color: rgba(255, 255, 255, 0.7);
--stroke-color: #FFFFFF;
--border-color: #FFFFFF;
--shadow-color: #FFFFFF;
--glow-color: var(--primary-glow);
--chat-input-bg: rgba(255, 255, 255, 0.1);
--chat-send-bg: var(--current-text);
--chat-send-text: rgb(var(--inverse-rgb));
--bouncing-border: var(--border-color);
--bouncing-shadow: var(--shadow-color);
--beta-shadow: #FFFFFF;
--muted-line: #FFFFFF;
}
/* Desktop Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: var(--current-bg);
color: var(--current-text);
font-family: 'Arial', sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding-top: env(safe-area-inset-top); /* For mobile safe areas (e.g., notches) */
padding-bottom: env(safe-area-inset-bottom); /* For mobile safe areas (e.g., bottom bars) */
}
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
pointer-events: none;
background: linear-gradient(to right, var(--base-color) 0%, rgba(24, 44, 74, 0.5) 25%, rgba(0, 229, 255, 0.15) 50%, rgba(0, 229, 255, 0.3) 75%, rgba(0, 229, 255, 0.3) 100%); /* Added more stops to reduce banding */
}
.glow-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
will-change: transform;
transition: transform 0.225s ease-out;
overflow: visible;
}
.glow {
position: absolute;
mix-blend-mode: var(--blend-mode);
filter: blur(var(--glow-blur));
opacity: 0.6;
will-change: transform;
}
.glow-primary {
background: radial-gradient(circle at 50% 50%, var(--primary-glow) 0%, rgba(0, 255, 255, 0.7) 20%, rgba(0, 255, 255, 0.4) 40%, rgba(0, 255, 255, 0.2) 60%, transparent 80%); /* Added more stops to smooth banding */
top: -50%;
left: 33%;
width: 100%;
height: 200%;
animation: drift-primary var(--animation-speed) ease-in-out infinite;
}
.glow-secondary {
background: linear-gradient(to right, transparent 0%, #93e3cc4d 20%, var(--secondary-glow) 50%, rgba(4, 253, 182, 0.3) 80%, transparent 100%); /* Added more stops */
top: 0;
left: 20%;
width: 100%;
height: 100%;
opacity: 0.525;
animation: drift-secondary calc(var(--animation-speed) * 1.5) ease-in-out infinite;
}
.glow-tertiary {
background: radial-gradient(circle at 50% 50%, var(--base-color) 0%, rgba(24, 44, 74, 0.5) 20%, rgba(24, 44, 74, 0.3) 40%, transparent 60%); /* Added more stops */
top: -50%;
left: -50%;
width: 200%;
height: 200%;
opacity: 0.15;
animation: drift-tertiary calc(var(--animation-speed) * 0.8) ease-in-out infinite;
}
.glow-white {
background: radial-gradient(circle at 50% 50%, var(--white-glow) 0%, rgba(255, 255, 255, 0.7) 20%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.2) 60%, transparent 80%); /* Added more stops */
top: -50%;
left: 33%;
width: 100%;
height: 200%;
opacity: 0.225;
animation: drift-white calc(var(--animation-speed) * 1.2) ease-in-out infinite;
}
#plasma-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: var(--blend-mode);
opacity: var(--plasma-intensity);
filter: blur(calc(var(--glow-blur) / 2));
}
@keyframes drift-primary {
  0% { transform: translate(0%, 0%) rotate(0deg); }
  20% { transform: translate(15%, 11.25%) rotate(7.5deg); }
  40% { transform: translate(22.5%, 18.75%) rotate(0deg); }
  60% { transform: translate(15%, 26.25%) rotate(-7.5deg); }
  80% { transform: translate(7.5%, 18.75%) rotate(0deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}
@keyframes drift-secondary {
  0% { transform: translate(0%, 0%) scale(1); }
  20% { transform: translate(11.25%, 15%) scale(1.1125); }
  40% { transform: translate(0%, 26.25%) scale(1); }
  60% { transform: translate(-11.25%, 15%) scale(0.8875); }
  80% { transform: translate(0%, 0%) scale(1.075); }
  100% { transform: translate(0%, 0%) scale(1); }
}
@keyframes drift-tertiary {
  0% { transform: translate(0%, 0%) rotate(0deg); }
  20% { transform: translate(-15%, 7.5%) rotate(11.25deg); }
  40% { transform: translate(-22.5%, 0%) rotate(0deg); }
  60% { transform: translate(-15%, -7.5%) rotate(-11.25deg); }
  80% { transform: translate(-7.5%, 0%) rotate(0deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}
@keyframes drift-white {
  0% { transform: translate(11.25%, -11.25%) rotate(5.25deg); }
  25% { transform: translate(18.75%, 3.75%) rotate(-5.25deg); }
  50% { transform: translate(11.25%, 11.25%) rotate(5.25deg); }
  75% { transform: translate(3.75%, 18.75%) rotate(-5.25deg); }
  100% { transform: translate(11.25%, -11.25%) rotate(5.25deg); }
}
#content {
position: relative;
z-index: 1;
text-align: center;
padding: 80px var(--side-gap) 150px var(--side-gap);
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden; /* prevent scrollbar */
min-height: 100vh; /* allow content to grow if needed */
box-sizing: border-box; /* ensure padding doesn’t overflow */
}
#content::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
width: 0 !important;
height: 0 !important;
background: transparent;
}
#content::-webkit-scrollbar-thumb,
#content::-webkit-scrollbar-track {
background: transparent;
}
p {
font-size: 0.9rem;
line-height: 1.5;
}
#central-heart {
width: 100%;
max-width: 1036.8px;
height: auto;
aspect-ratio: 720 / 300;
margin-bottom: 20px;
background: var(--transparent-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--transparent-border);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: transform 0.225s ease, box-shadow 0.225s ease, filter 0.225s ease;
cursor: pointer;
clip-path: polygon(50% 90%, 25% 70%, 25% 50%, 37.5% 30%, 50% 45%, 62.5% 30%, 75% 50%, 75% 70%, 50% 90%);
overflow: hidden;
touch-action: manipulation;
position: relative;
}
#central-heart.chat-active {
background-color: #000000;
clip-path: none;
border: none;
overflow: hidden;
}
#central-heart.chat-active #heart-svg {
display: none;
}
#central-heart.chat-active .bouncing-outline {
display: block;
animation: bounce-outline 2s infinite ease-in-out;
}
.bouncing-outline {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid var(--bouncing-border);
clip-path: polygon(50% 95%, 20% 75%, 25% 45%, 40% 25%, 50% 40%, 60% 25%, 75% 45%, 80% 75%, 50% 95%);
box-shadow: 0 0 10px var(--bouncing-shadow);
}
@keyframes bounce-outline {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
#chat-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 20px;
background: transparent;
color: var(--current-text);
overflow-x: hidden;
word-wrap: break-word;
}
#chat-messages {
flex: 1;
overflow-y: auto;
margin-bottom: 10px;
overflow-x: hidden;
word-break: break-all;
}
#chat-input {
background: var(--chat-input-bg);
border: 1px solid var(--border-color);
color: var(--current-text);
padding: 10px;
}
#chat-send {
background: var(--chat-send-bg);
color: var(--chat-send-text);
border: none;
padding: 10px;
cursor: pointer;
}
#chatbot-icon {
position: fixed;
bottom: var(--side-gap);
right: var(--side-gap);
width: 100px;
height: 100px;
cursor: pointer;
z-index: 10;
overflow: visible;
background: transparent;
}
#chatbot-icon svg {
width: 100%;
height: 100%;
}
#chatbot-icon svg path {
fill: none;
stroke: var(--stroke-color);
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; filter: drop-shadow(0 0 20px white); }
}
#central-heart:hover,
#central-heart:active {
transform: scale(1.075);
box-shadow: 0 7.5px 15px rgba(0, 0, 0, 0.2);
filter: brightness(1.2);
}
#central-content {
width: 100%;
max-width: 360px;
height: auto;
margin-bottom: 20px;
background: var(--transparent-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--transparent-border);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.225s ease, box-shadow 0.225s ease, filter 0.225s ease;
cursor: pointer;
overflow: hidden;
padding: 5%;
text-align: center;
}
#central-content:hover,
#central-content:active {
transform: scale(1.075);
box-shadow: 0 7.5px 15px rgba(0, 0, 0, 0.2);
filter: brightness(1.2);
}
@media (prefers-reduced-motion: reduce) {
.glow {
animation: none;
  }
#plasma-canvas {
display: none;
  }
}
#central-heart svg {
width: 100%;
height: 100%;
display: block;
}
.glow-heart {
animation: pulse 2s infinite ease-in-out;
}
@keyframes pulse {
  0% { opacity: 0.225; }
  50% { opacity: 0.6; }
  100% { opacity: 0.225; }
}
#menu-dots {
position: fixed;
top: 20px;
right: var(--side-gap);
display: flex;
flex-direction: column;
gap: 5px;
z-index: 20;
align-items: center;
transform: none;
pointer-events: auto;
}
.dots-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 9px;
width: 37.5px;
height: 45px;
justify-items: center;
align-items: center;
position: relative;
}
.dot {
width: 2.25px;
height: 2.25px;
background-color: var(--current-text);
border-radius: 0;
position: relative;
cursor: pointer;
transition: box-shadow 0.15s ease;
pointer-events: auto;
}
.dot::before {
content: '';
position: absolute;
top: -6px;
left: -6px;
width: 16.5px;
height: 16.5px;
background: transparent;
}
.dot:hover,
.dot:focus,
.dot:active {
box-shadow: 0 0 7.5px var(--primary-glow), 0 0 15px var(--primary-glow);
}
#hover-text {
position: absolute;
right: 100%;
margin-right: 1.5cm;
top: 50%;
color: var(--current-text);
font-size: 12.5px;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
letter-spacing: 0.5em;
text-align: right;
white-space: nowrap;
opacity: 0;
transform: translateY(-50%) translateX(calc(100% + 1.5cm));
transition: opacity 0.675s ease, transform 0.675s ease;
}
#hover-text::after {
content: '';
position: absolute;
bottom: -7.5px;
left: 0;
width: 100%;
height: 1.5px;
background: linear-gradient(to right, transparent, var(--glow-color), transparent);
filter: blur(2.25px);
opacity: 0;
transition: opacity 0.675s ease;
animation: flare-flicker 0.5s infinite ease-in-out;
}
#hover-text.shown::after {
opacity: 1;
}
@keyframes flare-flicker {
  0% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.075); }
  100% { opacity: 0.5; transform: scale(1); }
}
.menu-label {
color: var(--current-text);
font-size: 9px;
font-family: 'Montserrat', sans-serif;
font-weight: 200;
letter-spacing: 0.5em;
text-align: center;
margin-top: 10px;
}
.app-name {
position: fixed;
top: 20px;
left: var(--side-gap);
color: var(--current-text);
font-size: 18px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
z-index: 20;
transform: none;
cursor: pointer;
letter-spacing: 0.5em;
white-space: nowrap;
text-decoration: none;
}
.you-matter {
color: var(--current-text);
font-size: 17.75px;
font-family: 'Montserrat', sans-serif;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
font-weight: 300;
}
.page-title {
color: var(--current-text);
font-size: 1.2rem;
font-family: 'Montserrat', sans-serif;
font-weight: 200;
letter-spacing: 0.5em;
position: fixed;
top: 60px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
background: transparent;
padding: 10px 0;
display: inline-block;
margin-bottom: 40px;
}
.page-title::after {
content: '';
position: absolute;
bottom: -7.5px;
left: 0;
width: 100%;
height: 1.5px;
background: linear-gradient(to right, transparent, var(--glow-color), transparent);
filter: blur(2.25px);
animation: flare-flicker 0.5s infinite ease-in-out;
}
.page-description {
color: var(--current-text);
font-size: 13.5px;
font-family: 'Montserrat', sans-serif;
font-weight: 200;
margin-top: 20px;
}
.slogan {
color: var(--current-text);
font-size: 12px;
font-family: 'Montserrat', sans-serif;
text-align: center;
margin-top: 5px;
font-weight: 300;
letter-spacing: 0.5em;
text-transform: uppercase;
}
@keyframes glowy-outward {
  0% {
opacity: 0.8;
transform: scale(1);
box-shadow: 0 0 5px 1px var(--white-glow);
  }
  100% {
opacity: 0;
transform: scale(1);
box-shadow: 0 0 20px 5px var(--white-glow);
  }
}
#music-toggle {
position: fixed;
bottom: calc(20px + 0.5cm);
left: var(--side-gap);
z-index: 2;
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: transparent;
transition: none;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
touch-action: manipulation;
}
#music-toggle svg {
width: 100%;
height: 100%;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#music-toggle svg circle {
stroke: var(--stroke-color);
stroke-width: 0.3;
stroke-opacity: 1;
fill: none;
}
#music-toggle svg path {
stroke: var(--stroke-color);
}
#music-toggle:hover svg circle,
#music-toggle:active svg circle {
stroke: rgba(255, 255, 255, 0.8);
}
#music-toggle:hover::after,
#music-toggle:active::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: transparent;
pointer-events: none;
opacity: 0.8;
box-shadow: 0 0 5px 1px var(--white-glow);
/* No animation */
}
#music-toggle.muted svg path {
  d: 'M5 20 L35 20';
}
#music-toggle.muted::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
background-color: var(--muted-line);
transform: translate(-50%, -50%) rotate(45deg);
}
.beta-suffix {
position: absolute;
right: -5px;
top: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Montserrat', sans-serif;
font-weight: 250;
font-size: 0.7em;
color: var(--current-text);
background: var(--transparent-bg);
padding: 4px;
width: 65px;
height: 20px;
border-radius: 4px;
box-shadow: 0 0 10px var(--beta-shadow);
}
#footer {
position: fixed;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
text-align: center;
z-index: 999;
}
#social-links {
display: flex;
justify-content: center;
gap: 14px;
margin-bottom: 2px;
}
#social-links a {
display: flex;
align-items: center;
justify-content: center;
background: var(--transparent-low);
border-radius: 50%;
padding: 6px;
transition: all 0.3s ease;
}
#social-links a:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
#social-links svg {
fill: var(--stroke-color);
}
.copyright {
font-size: 11px;
color: var(--copyright-color);
margin: 0;
}
/* Hide mobile dropdown on desktop */
#mobile-dropdown {
display: none;
}
/* Talk page popup styles override for blur and size */
#overlay.active {
filter: blur(5px);
}
#popup {
width: 80%;
height: 80%;
max-width: none;
max-height: none;
}
@media (min-width: 769px) {
html, body {
height: 100%;
overflow: hidden;
  }
#content {
height: 100vh;
overflow: hidden;
padding: calc(80px + env(safe-area-inset-top)) var(--side-gap) 0 var(--side-gap);
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
  }
/* Optional: remove rounding error scrollbar */
body {
overflow-y: clip; /* prevents even 1px overflow scrollbar */
  }
#central-heart {
margin-top: -100px; /* Move the heart up by 100px in desktop; adjust as needed */
}
}
/* End of Desktop Styles */
/* Mobile Styles */
@media (max-width: 768px) {
:root {
--glow-blur: 56.25px;
--animation-speed: 14.0625s;
--plasma-intensity: 0.5625;
--current-bg: var(--mobile-base-color);
--current-text: #000000;
--current-rgb: 0, 0, 0;
--inverse-rgb: 255, 255, 255;
--transparent-bg: rgba(0, 0, 0, 0.1);
--transparent-low: rgba(0, 0, 0, 0.08);
--transparent-border: rgba(0, 0, 0, 0.18);
--copyright-color: rgba(0, 0, 0, 0.7);
--stroke-color: #000000;
--border-color: #000000;
--shadow-color: #000000;
--glow-color: #000000;
--chat-input-bg: rgba(0, 0, 0, 0.1);
--chat-send-bg: var(--current-text);
--chat-send-text: rgb(var(--inverse-rgb));
--bouncing-border: #000000;
--bouncing-shadow: #000000;
--beta-shadow: #000000;
--muted-line: #000000;
  }
body {
height: auto;
min-height: 100vh;
overflow: hidden;
  }
#background {
background: var(--current-bg);
  }
.glow-container, .glow {
display: none;
  }
#plasma-canvas {
display: none;
  }
#central-heart {
max-width: calc(100% - 2*var(--side-gap));
transform: scale(1.3);
box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.05);
background: linear-gradient(135deg, #ADD8E6, #00FFFF, #04fdb6ff, #FF69B4, #FFD700, #FF4500, #ADD8E6);
background-size: 400% 400%;
animation: glossymorph 10s ease-in-out infinite;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.7);
border: none;
transform-origin: center;
margin-bottom: 10px;
  }
#heart-svg polygon {
stroke: none;
fill: none;
opacity: 1;
  }
@keyframes glossymorph {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
#central-content {
max-width: 270px;
  }
.you-matter {
font-size: 11.8125px;
margin-top: 10px;
margin-bottom: 10px;
  }
.page-title {
font-size: 1.2rem;
position: fixed;
top: 60px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
background: transparent;
padding: 10px 0;
margin-bottom: 40px;
  }
.page-description {
font-size: 10.125px;
  }
#menu-dots {
top: 50px;
right: var(--side-gap);
display: none;
  }
.dots-container {
width: 28.125px;
gap: 6.75px;
height: 33.75px;
display: none;
  }
.menu-label {
font-size: 6.75px;
letter-spacing: 0.375em;
margin-top: 7.5px;
  }
#hover-text {
font-size: 7.875px;
letter-spacing: 0.375em;
margin-right: 0.5cm;
white-space: nowrap;
word-break: normal;
  }
.app-name {
letter-spacing: 1px;
text-decoration: none;
  }
#content {
top: auto;
padding: 80px var(--side-gap) 150px var(--side-gap); /* Increased top padding for fixed title */
max-width: calc(100% - 2*var(--side-gap));
margin: 0 auto;
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
justify-content: center;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
scrollbar-color: transparent transparent;
  }
#content::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
width: 0 !important;
height: 0 !important;
background: transparent;
  }
#content::-webkit-scrollbar-thumb,
#content::-webkit-scrollbar-track {
background: transparent;
  }
#music-toggle {
bottom: calc(30px + 1cm);
left: var(--side-gap);
width: 22.5px;
height: 22.5px;
border-width: 0.375px;
  }
#music-toggle.muted::after {
width: 18px;
height: 1.5px;
  }
#music-toggle svg {
width: 100%;
height: 100%;
  }
#mobile-dropdown {
display: block;
position: fixed;
top: 50px;
right: var(--side-gap);
z-index: 20;
pointer-events: auto;
  }
.menu-toggle {
display: none;
  }
.dropdown-toggle {
background: var(--current-bg);
color: var(--current-text);
padding: 5px 10px;
cursor: pointer;
border: 1px solid gray;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
display: block;
text-align: center;
font-weight: 300;
  }
.dropdown-menu {
display: none;
background: var(--current-bg);
color: var(--current-text);
list-style: none;
padding: 0;
margin: 0;
border: 1px solid gray;
position: absolute;
top: 100%;
right: 0;
width: auto;
min-width: 150px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
.dropdown-menu li {
border-bottom: 1px solid lightgray;
  }
.dropdown-menu li:last-child {
border-bottom: none;
  }
.dropdown-menu a {
display: block;
padding: 10px;
color: var(--current-text);
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 12px;
  }
.dropdown-menu a:hover {
background: lightgray;
  }
.menu-toggle:checked + .dropdown-toggle + .dropdown-menu {
display: block;
  }
#footer {
position: fixed;
bottom: 5px;
  }
#chatbot-icon {
position: fixed;
bottom: var(--side-gap);
right: var(--side-gap);
  }
#music-toggle {
position: fixed;
  }
.slogan {
margin-top: 40px;
  }
#social-links {
margin-bottom: 2px;
  }
}
/* New media query for very small screens (e.g., <480px) */
@media (max-width: 480px) {
:root {
--glow-blur: 40px;
--plasma-intensity: 0.4;
  }
.glow {
opacity: 0.3;
  }
#plasma-canvas {
filter: blur(20px);
  }
#central-heart {
max-width: calc(100% - 2*var(--side-gap));
transform: scale(1.3);
padding: 10px;
background: linear-gradient(135deg, #ADD8E6, #00FFFF, #04fdb6ff, #FF69B4, #FFD700, #FF4500, #ADD8E6);
background-size: 400% 400%;
animation: glossymorph 10s ease-in-out infinite;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.7);
border: none;
transform-origin: center;
margin-bottom: 10px;
  }
#heart-svg polygon {
stroke: none;
fill: none;
opacity: 1;
  }
@keyframes glossymorph {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
#central-content {
max-width: calc(100% - 2*var(--side-gap));
padding: 15px;
  }
.you-matter {
font-size: 1rem;
margin-top: 10px;
margin-bottom: 10px;
  }
.page-title {
font-size: 1.2rem;
position: fixed;
top: 60px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
background: transparent;
padding: 10px 0;
margin-bottom: 40px;
  }
.page-description {
font-size: 0.875rem;
  }
#menu-dots {
top: 15px;
right: var(--side-gap);
display: none;
  }
.dots-container {
width: 25px;
gap: 5px;
height: 30px;
display: none;
  }
.menu-label {
font-size: 0.625rem;
  }
#hover-text {
font-size: 0.75rem;
margin-right: 1cm;
  }
.app-name {
font-size: 1rem;
left: var(--side-gap);
text-decoration: none;
  }
#content {
padding: 80px var(--side-gap) 150px var(--side-gap); /* Increased top padding for fixed title */
max-width: calc(100% - 2*var(--side-gap));
margin: 0 auto;
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
justify-content: center;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
scrollbar-color: transparent transparent;
  }
#content::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
width: 0 !important;
height: 0 !important;
background: transparent;
  }
#content::-webkit-scrollbar-thumb,
#content::-webkit-scrollbar-track {
background: transparent;
  }
#music-toggle {
bottom: 35px;
left: var(--side-gap);
width: 25px;
height: 25px;
  }
#mobile-dropdown {
display: block;
position: fixed;
top: 15px;
right: var(--side-gap);
z-index: 20;
pointer-events: auto;
  }
.menu-toggle {
display: none;
  }
.dropdown-toggle {
background: var(--current-bg);
color: var(--current-text);
padding: 5px 10px;
cursor: pointer;
border: 1px solid gray;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
display: block;
text-align: center;
font-weight: 300;
  }
.dropdown-menu {
display: none;
background: var(--current-bg);
color: var(--current-text);
list-style: none;
padding: 0;
margin: 0;
border: 1px solid gray;
position: absolute;
top: 100%;
right: 0;
width: auto;
min-width: 150px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
.dropdown-menu li {
border-bottom: 1px solid lightgray;
  }
.dropdown-menu li:last-child {
border-bottom: none;
  }
.dropdown-menu a {
display: block;
padding: 10px;
color: var(--current-text);
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 10px;
  }
.dropdown-menu a:hover {
background: lightgray;
  }
.menu-toggle:checked + .dropdown-toggle + .dropdown-menu {
display: block;
  }
#footer {
position: fixed;
bottom: 5px;
  }
#chatbot-icon {
position: fixed;
bottom: var(--side-gap);
right: var(--side-gap);
  }
#music-toggle {
position: fixed;
  }
.slogan {
margin-top: 40px;
  }
#social-links {
margin-bottom: 2px;
  }
}
/* End of Mobile Styles */
/* Ensure scroll on desktop by capping max-height lower (adjust 45vh as needed; e.g., 40-50vh or 400-500px for consistency) */
@media (min-width: 769px) {
.services-section .scrollable-content {
max-height: 45vh; /* Forces overflow on typical desktop content height (~650-750px) while keeping ~60vh feel on mobile */
  }
.page-title {
top: 80px; /* Bring down by 1 line (~20px) for desktop */
  }
}