body { background-image: url('data:image/svg+xml;charset=UTF-8,'); background-repeat: repeat; background-size: cover; background-color: #FFB634; font-size: 20px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; transition: background 0.3s, color 0.3s } .dropdown { position: fixed; right: 0; top: 0; display: inline-block; } .settings-btn { background: #1f2937; color: white; border: none; padding: 10px 14px; border-radius: 10px; cursor: pointer; font-size: 16px; display: flex; align-items: center; gap: 8px; } .menu { position: absolute; right: 0; top: 110%; width: 260px; background: white; color: black; border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); padding: 10px 0; opacity: 0; transform: translateY(-20px); /* slide from top */ pointer-events: none; transition: transform 0.25s ease, opacity 0.25s ease; } .menu.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .menu-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-size: 15px; cursor: pointer; } .menu-item:hover { background: #f3f4f6; } .menu-left { display: flex; align-items: center; gap: 12px; } .switch { position: relative; width: 40px; height: 22px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; background-color: #d1d5db; border-radius: 20px; transition: 0.3s; } .slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: white; border-radius: 50%; transition: 0.3s; } input:checked + .slider { background-color: #2563eb; } input:checked + .slider:before { transform:translateX(18px); } .divider { height: 1px; background: #e5e7eb; margin: 6px 0; } .menu-left svg { width: 20px; height: 20px; fill: #2563eb; } .middle { width: 45%; margin: auto; padding: 20px; background: #000; color: #FFF; } .override_bg { background-color: rgba(255, 255, 255, 0); } .transparent-middle-page .middle { background: transparent !important; } .inline-h6 { display: inline; font-size: 0.67em; } .inline-h3 { display: inline; font-size: 1.17em; } section { width: 100%; } section img { width: 100%; } a { text-decoration: none; } .innersection { width: 70%; margin: auto; } .banner { width: 100%; display: block; margin-left: auto; margin-right: auto; } .svgbanner object { width: 100vw; justify-content: center; display: block; } .menu2 { margin: auto; background-color: rgba(255, 255, 255, 0); width: 45%; } .sidenav a { position: absolute; left: -150px; transition: 0.3s; padding: 15px; width: 150px; text-decoration: none; font-size: 20px; color: white; } .sidenav a:hover { left: 0; } .normal { display: inline; } .extended { display: none; } @custom-media --motionOK (prefers-reduced-motion: no-preference); input[type="checkbox"]::before { --thumb-scale: .01; /* initial scale of highlight */ --thumb-highlight-size: var(--space-xl); content: ""; inline-size: var(--thumb-highlight-size); block-size: var(--thumb-highlight-size); clip-path: circle(50%); /* circle shape */ position: absolute; /* this is why position relative on parent */ top: 50%; /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */ left: 50%; background: var(--thumb-highlight-color); transform-origin: center center; /* goal is a centered scaling circle */ transform: /* order here matters!! */ translateX(-50%) /* counter balances left: 50% */ translateY(-50%) /* counter balances top: 50% */ translateZ(-1px) /* PUTS IT BEHIND THE CHECKBOX */ scale(var(--thumb-scale)) /* value we toggle for animation */ ; will-change: transform; @media (--motionOK) { /* transition only if motion is OK */ & { transition: transform .2s ease; } } } /* on hover, set scale custom property to "in" state */ input[type="checkbox"]:hover::before { --thumb-scale: 1; } .lucky { top: 276px; background-color: #D2492A; /*#6E9EAF*/ } .bean { top: 336px; background-color: #4F2D7F; /*#6639B7*/ } .soji { top: 396px; background-color: #A70240; /*#FF6E00*/ } .bert { top: 456px; background-color: #006D55; /*#0094B3*/ } .pig { top: 516px; background-color: #005293; /*#0094B3*/ } .sonic { top: 576px; background-color: #920075; /*#6E9EAF8*/ } .external-link a { text-decoration: wavy underline blue; } #sky { position: relative; width: 100vw; height: 100vh; } img.glitter-star { position: absolute; height: 16px; width: 16px; animation: glitter 2s linear 0s infinite normal; } @keyframes glitter { 0% { -webkit-transform: scale(3.0); opacity: 1; } 25% { -webkit-transform: scale(0.5); opacity: 0; } 50% { -webkit-transform: scale(2.0); opacity: 1; } 75% { -webkit-transform: scale(0.5); opacity: 0; } 100% { -webkit-transform: scale(3.0); opacity: 1; } } ul { list-style-type: none; display: flex; justify-content: center; padding: 0px; padding-top: 7px; margin: 0px; } li { width: 20%; padding-left: 10px; padding-right: 10px; } .dev { display: none; } .dev li { width: 0%; padding-left: 0px; padding-right: 0px; } #catGPT { position: fixed; bottom: 20px; right: 20px; width: 280px; background: #161616; color: #fff; border-radius: 10px; font-family: "Segoe UI", sans-serif; box-shadow: 0 8px 25px rgba(0,0,0,0.3); display: flex; flex-direction: column; } .hidden-cat-gpt { display: none; } .cat-header { padding: 10px; background: #ff8c00; font-weight: bold; text-align: center; } .cat-messages { padding: 10px; height: 200px; overflow-y: auto; font-size: 13px; } #catGPTInput { border: none; padding: 10px; border-top: 1px solid #333; background: #222; color: #fff; } .cat-header { padding: 8px; background: #ff8c00; display: flex; align-items: center; gap: 8px; font-weight: bold; } .cat-avatar { font-size: 24px; animation: float 2.5s ease-in-out infinite; transition: transform 0.2s ease; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0px); } } .cat-thinking { animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }