:root{--accent:#df2935;--accent-sec:#611117;--accent-pink:#ff00d4;--socials:var(--accent);--python:#3572a5;--javascript:#f1e05a;--html:#e34c26;--css:#639;--typescript:#3178c6;--service-running:#28a745;--service-sleeping:#6c757d;--service-runtime-error:#dc3545;--service-paused:#ffc107;--service-build-error:#e83e8c;--service-config-error:#fd7e14;--service-building:#17a2b8;--service-app-starting:#007bff;--service-running-app-starting:#20c997;--status-success:#28a745;--status-info:#17a2b8;--status-warning:#ffc107;--status-error:#dc3545;--status-critical:#b30000;--status-pending:#f80;--status-neutral:#6c757d;--status-disabled:#4b4b4b;--shadow-red-1:#f003;--shadow-red-2:#ff000030;--shadow-red-3:#f006;--shadow-red-4:#ff000061;--shadow-pink-1:var(--accent-pink);--shadow-pink-2:var(--accent-pink);--shadow-pink-3:var(--accent-pink);--shadow-pink-4:var(--accent-pink);--link:#3772ff;--yellow:#fdca40}html[data-theme=dark]{--main-bg:#080708;--sec-bg:#222;--main-text:#e6e8e6;--sec-text:var(--accent);--text-muted:#aaa;--badge-warning-bg:#ffc10726;--badge-warning-bg-light:#ffc10740;--badge-warning-border:#ffc10766;--badge-info-bg:#17a2b826;--badge-info-bg-light:#17a2b833}html[data-theme=light]{--main-bg:#e6e8e6;--sec-bg:#d6d8d6;--main-text:#080708;--sec-text:var(--accent);--text-muted:#555;--badge-warning-bg:#ffc1074d;--badge-warning-bg-light:#ffc10759;--badge-warning-border:#ffc10780;--badge-info-bg:#17a2b840;--badge-info-bg-light:#17a2b84d}html{scroll-behavior:smooth}html,body{height:100%;margin:0}body{background:var(--main-bg);color:var(--main-text);text-align:center;padding:0 50px;font-family:Arial,sans-serif}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--main-bg)}::-webkit-scrollbar-thumb{background:var(--accent);border:3px solid var(--main-bg);border-radius:5px}::-webkit-scrollbar-thumb:hover{background-color:var(--accent-sec)}*{scrollbar-color:var(--accent) var(--main-bg)}.page{flex-direction:column;min-height:100vh;display:flex}.topbar{z-index:50;background:var(--main-bg);border-bottom:2px solid var(--accent);justify-content:space-between;align-items:center;gap:16px;padding:10px 16px;display:flex;position:sticky;top:0}main{box-sizing:border-box;flex:1;justify-content:center;align-items:center;width:100%;margin:0 auto;padding:32px 16px}.github{align-items:center;display:flex}.github .github-avatar{padding-top:4px}.github .github-nickname{color:var(--main-text);cursor:pointer;padding-left:10px;text-decoration:none}@media (width<=768px){body{padding-left:0;padding-right:0}}.dropdown{display:inline-block;position:relative}.dropBtn{appearance:none;border:1px solid var(--accent);background-color:var(--main-bg);color:var(--accent);cursor:pointer;border-radius:10px;padding:8px 12px;font-weight:600;transition:transform 50ms,background .2s}.dropBtn:hover{background-color:var(--accent);color:var(--main-bg)}.dropdown-content{background-color:var(--main-bg);min-width:160px;box-shadow:0 8px 16px 0 var(--shadow-red-3), 0 6px 20px 0 var(--shadow-red-4);z-index:1;border-radius:10px;display:none;position:absolute}.dropdown-content a{color:var(--sec-text);padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:var(--accent);color:var(--main-bg);border-radius:10px;transition:transform 50ms,background .2s}.dropdown:hover .dropdown-content{display:block}.actions{align-items:center;gap:8px;display:flex}#burgerBtn{color:var(--accent);background:var(--main-bg);border:1px solid var(--accent);cursor:pointer;border-radius:6px;outline:none;display:none}#burgerBtn:hover,#burgerBtn:focus,#burgerBtn:active{color:var(--accent);background:var(--main-bg)}@media (width<=650px){.dropdown{width:100%}.dropBtn{text-align:left;width:100%}.dropdown-content{box-shadow:none;min-width:unset;border:none;margin-top:4px;display:none;position:relative}.dropdown-content.show{display:block}.dropdown-content a{padding-left:24px}#burgerBtn{background:var(--main-bg);border:1px solid var(--accent);cursor:pointer;z-index:1001;border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;font-size:20px;display:flex;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.actionsWrapper{z-index:1000;flex-direction:column;width:max-content;display:flex;position:fixed;top:0;right:0;overflow:hidden}.actionsWrapper .dropdown{order:1;width:100%}.actionsWrapper .actions{background:var(--main-bg);border-left:1px solid var(--accent);border-bottom:1px solid var(--accent);border-radius:0 0 0 8px;flex-direction:column;order:2;gap:8px;padding:70px 8px 8px;transition:none;display:flex;transform:translate(100%)}.actionsWrapper .actions.active{transition:transform .3s;transform:translate(0)}.actionsWrapper .actions button{align-self:flex-start}}.btn{appearance:none;border:1px solid var(--accent);background:var(--main-bg);color:var(--accent);cursor:pointer;border-radius:10px;padding:8px 12px;font-weight:600;transition:transform 50ms,background .2s}.btn:hover{background-color:var(--accent);color:var(--main-bg)}.projects{text-align:center;padding:40px 20px}h1.myProjects{color:var(--main-text);margin-bottom:30px;font-size:2.2rem}.projects-grid{isolation:isolate;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;max-width:1000px;margin:auto;display:grid}@media (width<=480px){.projects-grid{grid-template-columns:1fr;gap:15px}}.project-card{background:var(--main-bg);text-align:center;color:var(--sec-text);z-index:1;border-radius:15px;padding:25px;text-decoration:none;transition:transform .3s;position:relative;overflow:visible}.project-card:hover{z-index:2;transform:translateY(-8px)scale(1.02)}.project-card h2{color:var(--main-text);margin-bottom:10px;font-size:1.4rem}.project-card p{opacity:.9;font-size:.95rem}.project-card:before{content:"";width:100%;height:100%;box-shadow:0 8px 16px 0 var(--shadow-red-1), 0 6px 20px 0 var(--shadow-red-2), 0 16px 32px 0 var(--shadow-red-3), 0 12px 40px 0 var(--shadow-red-4);z-index:-1;opacity:0;border-radius:13px;transition:opacity .4s ease-in-out;position:absolute;top:2px;left:2px}.project-card:hover:before{opacity:1}.repos{color:var(--sec-text);flex-direction:column;align-items:center;display:flex}h1.myRepos{color:var(--main-text)}a.repo{color:inherit;margin:15px;font-size:20px;text-decoration:none;display:inline-block;position:relative}a.repo:after{content:"";background:var(--accent);width:0;height:3px;filter:drop-shadow(0 2px 4px var(--shadow-red-1)) drop-shadow(0 4px 6px var(--shadow-red-2)) drop-shadow(0 0 10px var(--shadow-red-3)) drop-shadow(0 0 20px var(--shadow-red-4));transition:width .4s;position:absolute;bottom:-4px;left:0}a.repo:hover:after{width:100%}.pinnedRepos{flex-wrap:wrap;justify-content:flex-start;gap:10px;display:flex}.pinnedRepo{border:1px solid var(--accent);background:var(--main-bg);min-width:250px;max-width:calc(33.333% - 10px);color:var(--accent);box-sizing:border-box;border-radius:10px;flex-direction:column;flex:calc(33.333% - 10px);min-height:120px;padding:8px 12px;text-decoration:none;display:flex;position:relative}.repoHeader{align-items:center;gap:10px;margin-bottom:10px;display:flex}.repoName{color:var(--accent);font-weight:600;text-decoration:none;position:relative}.repoName:after{content:"";background:var(--accent);width:0;height:3px;filter:drop-shadow(0 2px 4px var(--shadow-red-1)) drop-shadow(0 4px 6px var(--shadow-red-2)) drop-shadow(0 0 10px var(--shadow-red-3)) drop-shadow(0 0 20px var(--shadow-red-4));transition:width .4s;position:absolute;bottom:-4px;left:0}a.repoName:hover:after{width:100%}.repoDescription{color:var(--main-text);text-align:left;margin-bottom:30px;font-size:14px}.repoFooter{color:var(--main-text);align-items:center;gap:5px;font-size:12px;display:flex;position:absolute;bottom:10px;left:12px}@media (width<=915px){.pinnedRepo{max-width:unset;flex:calc(50% - 12px)}}@media (width<=768px){.pinnedRepo{max-width:unset;flex:100%}}.material-symbols-outlined{font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-outlined.proLang{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.pinnedRepo .badge{background:var(--badge-warning-bg);color:var(--status-warning);border-radius:6px;align-items:center;gap:4px;padding:4px 8px;font-size:.75em;font-weight:500;display:flex;position:absolute;top:8px;right:8px}.pinnedRepo .badge .material-symbols-outlined{color:var(--status-warning);font-size:1em;line-height:1}.proLang.python{color:var(--python)}.proLang.javascript{color:var(--javascript)}.proLang.html{color:var(--html)}.proLang.css{color:var(--css)}.proLang.typescript{color:var(--typescript)}.proLang.unknown{color:var(--text-muted)}.SAM{color:var(--sec-text);flex-direction:column;align-items:center;display:flex}h1.samTitle{color:var(--main-text)}.services{flex-wrap:wrap;justify-content:flex-start;gap:10px;display:flex}.service{border:1px solid var(--accent);background:var(--main-bg);min-width:400px;max-width:calc(33.333% - 10px);color:var(--accent);box-sizing:border-box;border-radius:10px;flex-direction:column;flex:calc(33.333% - 10px);min-height:60px;padding:8px 12px;text-decoration:none;display:flex;position:relative}@media (width<=460px){.service{min-width:250px}}.serviceHeader{align-items:center;gap:10px;margin-bottom:40px;display:flex}.serviceIcon{color:var(--accent)}.serviceName{color:var(--accent);font-size:25px;font-weight:600;text-decoration:none;position:relative}@media (width<=420px){.serviceName{font-size:14px}}.serviceName:after{content:"";background:var(--accent);width:0;height:3px;filter:drop-shadow(0 2px 4px var(--shadow-red-1)) drop-shadow(0 4px 6px var(--shadow-red-2)) drop-shadow(0 0 10px var(--shadow-red-3)) drop-shadow(0 0 20px var(--shadow-red-4));transition:width .4s;position:absolute;bottom:-4px;left:0}a.serviceName:hover:after{width:100%}.serviceType{font-weight:100}.serviceFooter{color:var(--main-text);align-items:center;gap:5px;font-size:20px;display:flex;position:absolute;bottom:10px;left:12px}.serviceStatus.maxChatbotBackend{color:var(--service-sleeping);margin-right:8px;font-size:1.2rem}.status{font-weight:700;display:inline-block}.countdown{display:none}@media (width<=915px){.service{max-width:unset;flex:calc(50% - 12px)}}@media (width<=768px){.service{max-width:unset;flex:100%}}.material-symbols-outlined.serviceStatus{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.service .badge{background:var(--badge-info-bg);color:var(--status-info);border-radius:6px;align-items:center;gap:4px;padding:4px 8px;font-size:.75em;font-weight:500;display:flex;position:absolute;top:8px;right:8px}.service .badge .material-symbols-outlined{color:var(--status-info);font-size:1em;line-height:1}.service .badge{top:auto;bottom:10px;right:10px}.serviceStatus.running{color:var(--service-running)}.serviceStatus.sleeping{color:var(--service-sleeping)}.serviceStatus.runtime_error,.serviceStatus.error{color:var(--service-runtime-error)}.serviceStatus.paused{color:var(--service-paused)}.serviceStatus.building{color:var(--service-building)}.serviceStatus.app_starting{color:var(--service-app-starting)}.serviceStatus.running_app_starting{color:var(--service-running-app-starting)}.project-card .disclaimer{color:var(--text-muted);margin-top:.5em;font-size:.85em;font-style:italic}.project-card{position:relative}.project-card .badge{background:var(--badge-warning-bg);color:var(--status-warning);border-radius:8px;align-items:center;gap:6px;padding:4px 10px;font-size:.8em;font-weight:500;display:flex;position:absolute;top:10px;right:10px}.pinnedRepo .badge{top:auto;bottom:10px;right:10px}.project-card .badge .material-symbols-outlined{font-size:1.1em;line-height:1}.material-symbols-outlined.project-card-symbol{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.project-card-symbol.badge.warning{color:var(--status-warning)}.galleryGrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;display:grid}.spriteCard{background:var(--sec-bg);flex-direction:column;align-items:center;padding:15px;transition:transform .2s;display:flex}.spriteCard:hover{background-color:var(--shadow-red-1);transform:translateY(-5px)}.spriteDisplay{background:var(--shadow-red-1);border:2px solid var(--shadow-red-1);cursor:pointer;background-image:url(../assets/sprites/BackgroundCanvas.png);background-size:cover;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;width:140px;height:140px;margin-bottom:10px;padding:15px;display:flex;overflow:hidden}.spriteDisplay .spriteIcon:nth-child(n+10),.spriteDisplay .spriteModel:nth-child(n+5){display:none}.spriteTitle{color:var(--sec-text);margin:0;font-family:Courier New,monospace;font-size:1.1rem;font-weight:700}.modal{z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);width:100%;height:100%;display:none;position:fixed;top:0;left:0}.closeModal{color:var(--main-text);cursor:pointer;font-size:40px;font-weight:700;position:absolute;top:20px;right:30px}.modalContent{background-color:var(--main-bg);border:4px solid var(--shadow-red-1);width:80%;height:80vh;color:var(--main-text);box-sizing:border-box;max-width:95vw;margin:5% auto;font-family:Courier New,monospace;display:flex}.modalPreviewSide{background:var(--main-bg);box-sizing:border-box;flex-direction:column;flex:1.5;justify-content:space-between;align-items:center;min-width:0;height:100%;padding:20px;display:flex;position:relative}.modalImageContainer{background-image:linear-gradient(45deg, var(--sec-bg) 25%, transparent 25%), linear-gradient(-45deg, var(--sec-bg) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--sec-bg) 75%), linear-gradient(-45deg, transparent 75%, var(--sec-bg) 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;flex:1;justify-content:center;align-items:center;width:100%;height:calc(100% - 100px);display:flex;position:relative;overflow:auto}#modalImg{image-rendering:pixelated;object-fit:contain;max-width:100%;max-height:100%;margin:auto;transition:none;display:block}#modalCanvas{object-fit:contain;cursor:grab;width:100%;height:100%;image-rendering:pixelated;margin:auto;display:block}#modalCanvas:active{cursor:grabbing}.modalInfoSide{background:var(--se-bg);flex:1;min-width:0;padding:30px;overflow-y:auto}.zoomControls{justify-content:center;align-items:center;margin-bottom:10px;display:flex}.zoomControls button{background:var(--main-bg);color:var(--main-text);cursor:pointer;border:none;margin:0 2px;padding:5px 15px;font-weight:700}.zoomControls button:hover{background:var(--shadow-red-1)}.modalThumbs{white-space:nowrap;box-sizing:border-box;flex-wrap:nowrap;gap:10px;width:100%;margin-top:15px;padding-bottom:8px;display:flex;overflow:auto hidden}.modalThumb{object-fit:contain;background:var(--shadow-red-1);border:2px solid var(--shadow-red-1);cursor:pointer;height:50px;image-rendering:pixelated;box-sizing:border-box;flex:0 0 50px}.modalThumb.active{border-color:var(--accent)}.metaTable{border-collapse:collapse;width:100%;margin-top:10px}.metaTable td{border-bottom:1px solid var(--shadow-red-1);padding:8px 0}.metaTable td:last-child{text-align:right;color:var(--sec-text);font-family:Courier New,monospace}footer{border-top:2px solid var(--accent);margin-top:auto}.socials{justify-content:center;align-items:center;display:flex}a#socials{margin:15px;font-size:20px;display:block}a.mail,a.max{color:var(--sec-text);text-decoration:none}a:hover{text-decoration:none}.fa{text-align:center;width:20px;box-shadow:0 8px 16px 0 var(--shadow-red-1), 0 6px 20px 0 var(--shadow-red-2);border-radius:20px;padding:20px;font-size:30px;text-decoration:none;transition-duration:.4s}.fa:hover{background-color:var(--socials);color:var(--main-bg);box-shadow:0 16px 32px 0 var(--shadow-red-3), 0 12px 40px 0 var(--shadow-red-4);text-decoration:none}.fa-github,.fa-linkedin{color:var(--socials);border:2px solid var(--socials)}.copyright{color:var(--main-text);text-align:center;padding:10px 16px;font-size:13px}h1{font-size:220%}
