:root[data-theme=dark]{--bg: #0f0f0f;--surface:#1c1c1e;--text: #f2f2f7;--accent: #0a84ff;--accent2:#ff453a}:root[data-theme=light]{--bg: #ffffff;--surface:#f5f7fa;--text: #1a1a1a;--accent: #0066ff;--accent2:#ff4d4f}body{margin:0;font-family:system-ui,sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh}.side-nav{position:fixed;top:0;left:0;height:100vh;width:200px;background:var(--surface);padding:2rem 1rem 1rem;z-index:10;display:grid;grid-template-rows:auto 1fr auto;gap:1.5rem}.side-nav .home{display:flex;align-items:center;width:0%;text-decoration:none;color:var(--text)}.side-nav .logo{width:3.6rem;display:flex;align-items:center;justify-content:flex-start}.side-nav .logo img{height:3rem;width:auto;object-fit:contain;position:static;margin-left:.6rem}.side-nav .logo img.logo-white{position:static;margin:0}.side-nav .logo img.logo-black{position:static;margin-left:.6rem}.side-nav ul{list-style:none;padding:0;margin:0;display:grid;gap:.75rem;align-self:center}.side-nav ul li{font-family:Roboto,sans-serif;margin-bottom:4rem;margin-left:1rem;display:flex;justify-content:start}.side-nav a{color:var(--text);text-decoration:none;font-weight:600;transition:color .2s}.side-nav a:hover{color:var(--accent)}#theme-toggle{align-self:end;margin-bottom:40%;background:none;border:1px solid var(--text);border-radius:4px;padding:.25rem .5rem;cursor:pointer}main{margin-left:200px}#theme-toggle .sun{display:none}:root[data-theme=light] #theme-toggle .sun{display:inline}:root[data-theme=light] #theme-toggle .moon{display:none}main{flex:1;padding-bottom:4rem;max-width:900px;margin:0 20% 0 auto}.content{max-width:780px;width:100%;margin:0 auto;text-align:left;box-sizing:border-box;padding-left:0}.content>*{margin-left:0}.stack>*+*{margin-block-start:0rem}.stack h2 a{font-family:Roboto,sans-serif;color:#06f;text-decoration:none}.stack h2 a:hover{color:#003c97;text-decoration:none}#projects,#werkprocessen{padding-bottom:5%}.grid-list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));padding:0;list-style:none}.intro{min-height:100vh;display:grid;place-items:center;padding:2rem;text-align:center}.intro__text{margin-top:10rem}.intro__title{font-family:Merriweather,serif;font-size:clamp(2.5rem,5vw,4rem);letter-spacing:-.03em;margin:0 0 1rem;color:var(--accent)}.intro__tagline{font-family:Roboto,sans-serif;font-size:1.25rem;margin:0 0 .5rem;overflow:hidden;border-right:.15rem solid #0a84ff;white-space:nowrap;margin:0 auto;letter-spacing:.15rem;animation:typing 10s steps(40) infinite,blink-caret .75s step-end infinite}.languages{min-height:8vh;font-family:Roboto,sans-serif;width:100%;display:flex;flex-direction:row;justify-content:space-evenly}.html{min-height:8vh;width:20%;background-color:#0a84ff;display:flex;align-items:center;justify-content:center;border-radius:4%;transition:transform .2s,box-shadow .2s}.html:hover{transform:translateY(-4px);box-shadow:0 6px 12px #00000026}.css{min-height:8vh;width:20%;background-color:#0a84ff;display:flex;align-items:center;justify-content:center;border-radius:4%;transition:transform .2s,box-shadow .2s}.css:hover{transform:translateY(-4px);box-shadow:0 6px 12px #00000026}.csharp{min-height:8vh;width:20%;background-color:#0a84ff;display:flex;align-items:center;justify-content:center;border-radius:4%;transition:transform .2s,box-shadow .2s}.csharp:hover{transform:translateY(-4px);box-shadow:0 6px 12px #00000026}.python{min-height:8vh;width:20%;background-color:#0a84ff;display:flex;align-items:center;justify-content:center;border-radius:4%;transition:transform .2s,box-shadow .2s}.python:hover{transform:translateY(-4px);box-shadow:0 6px 12px #00000026}.card{background:var(--surface);border-radius:8px;padding:1rem;transition:transform .2s,box-shadow .2s;cursor:pointer}.card.about{display:flex;flex-direction:row;align-items:center;gap:1rem;width:125%}.card.about img{width:100px;height:auto;border-radius:8px;flex-shrink:0}#about-info{flex-grow:1}.card h3,.card p{font-family:Roboto,sans-serif}.card:hover{transform:translateY(-4px);box-shadow:0 6px 12px #00000026}@keyframes typing{0%{width:0}20%{width:0}40%{width:100%}60%{width:100%}80%{width:0}to{width:0}}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:#0a84ff}}@media (max-width: 720px){.side-nav{position:static;width:100%;height:auto;grid-template-rows:auto;grid-auto-flow:column;align-items:center;padding:.75rem 1rem}.content-left{max-width:100%;padding-left:.5rem;padding-right:.5rem}.side-nav ul{display:flex;gap:1rem}main{margin-left:0}}