:root{--topbar-height:60px}body{background:var(--bg-color);color:var(--text-color);font-size:clamp(.9rem,2.5vw,1.1rem);line-height:1.6;transition:background .25s,color .25s}#bg-canvas{z-index:-1;background:0 0;width:100vw;height:100vh;position:fixed;top:0;left:0}.top-bar{width:100%;height:var(--topbar-height);background:var(--bg-color);z-index:10;background:rgba(var(--bg-color), .9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);justify-content:flex-end;align-items:center;padding:0 5px;display:flex;position:fixed;top:0;left:0;box-shadow:0 2px 5px #0000001a}.top-bar nav a{color:var(--text-color);margin:0 .5rem;padding-right:.5rem;font-size:1.1rem;font-weight:500;text-decoration:none;transition:color .2s,transform .2s;display:inline-block;position:sticky}@media (width>=768px){.top-bar nav a{margin:0 1rem;padding-right:1rem;font-size:1.5rem}}.top-bar nav a:hover{color:var(--hover-color);transform:scale(1.05)}.footer{background:rgba(var(--bg-color), .9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10;flex-direction:column;align-items:center;width:100%;padding:10px 0;display:flex;position:fixed;bottom:0;left:0;box-shadow:0 -2px 5px #0000001a}.socials{gap:25px;display:flex}.footer .copyright{color:var(--text-color);opacity:.7;margin-top:4px;font-size:.75rem}.icon svg{width:32px;height:32px;fill:var(--icon-color);transition:all .2s}.icon:hover svg{fill:var(--hover-color);transform:scale(1.2)}.icon{text-decoration:none}a{color:var(--icon-color);transition:color .2s,transform .2s;display:inline-block}a:hover{color:var(--hover-color);transform:scale(1.025)}:root{--bg-color:#fff;--text-color:#181818;--icon-color:#222;--card-color:#cdedcf;--hover-color:#28823e;--shadow-color:#00000020;--wood-color:#d5bdb2}[data-theme=dark]{--bg-color:#232323;--text-color:#e2daca;--card-color:#263729;--icon-color:#ddd;--hover-color:#00ea4e;--shadow-color:#e8e8e820;--wood-color:#472921}#theme-toggle{cursor:pointer;background:0 0;border:none;width:32px;height:32px;padding:0;position:fixed;top:8px;left:12px}#theme-toggle svg{width:100%;height:100%;fill:var(--icon-color);transition:transform .2s,fill .25s}#theme-toggle:hover svg{transform:scale(1.15)}