:root { --ink:#090b12; --panel:#11151e; --line:#293142; --muted:#8793a5; --text:#eef4fa; --lime:#65f5a3; }
* { box-sizing:border-box; }
html { min-height:100%; scroll-behavior:smooth; background:#05060a; }
body { margin:0; min-height:100vh; min-height:100lvh; color:var(--text); background:#05060a; font-family:Silkscreen,monospace; overflow-x:hidden; }
button,input,textarea,select { font-family:inherit; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.17; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.plasma { position:fixed; inset:0; width:100vw; height:100vh; height:100lvh; z-index:0; pointer-events:none; filter:saturate(1.28) contrast(1.12); }
.mist { position:fixed; z-index:0; width:120vmax; height:120vmax; left:50%; top:50%; pointer-events:none; border-radius:43% 57% 61% 39% / 41% 36% 64% 59%; opacity:.22; mix-blend-mode:screen; filter:blur(34px); background:conic-gradient(from 90deg, #ff225b, #ffea00, #00ff95, #00a6ff, #a43aff, #ff225b); animation:mistFold 15s steps(24,end) infinite, rainbowPulse 5s steps(10,end) infinite; will-change:transform,opacity; }
.mist--two { width:85vmax; height:85vmax; opacity:.15; animation-duration:19s, 7s; animation-direction:reverse, normal; }
@keyframes mistFold { 0%,100% { transform:translate(-50%,-50%) rotate(0deg) scale(.75,1.1); border-radius:43% 57% 61% 39% / 41% 36% 64% 59%; } 50% { transform:translate(-50%,-50%) rotate(180deg) scale(1.15,.7); border-radius:65% 35% 31% 69% / 32% 62% 38% 68%; } }
@keyframes rainbowPulse { 0%,100% { opacity:.12; } 50% { opacity:.3; } }
.page-shell { position:relative; z-index:2; width:min(920px,82vw); margin:0 auto; display:grid; grid-template-columns:52px minmax(0,816px) 52px; min-height:100vh; min-height:100lvh; }
.side-rail { position:sticky; z-index:3; top:0; height:100vh; height:100lvh; overflow:visible; isolation:isolate; background:rgba(4,5,8,.32); border-inline:3px solid #030304; backdrop-filter:blur(5px); }
.rail-clip { position:absolute; inset:0; overflow:hidden; }
.rail-track { position:absolute; z-index:4; top:0; inset-inline:0; display:flex; flex-direction:column; align-items:center; animation:railDown 28s linear infinite; will-change:transform; }
.rail-loop { display:flex; flex-direction:column; align-items:center; gap:34px; padding-bottom:34px; }
.rail-loop span { writing-mode:vertical-rl; font:700 9px Silkscreen,monospace; letter-spacing:.25em; text-shadow:0 2px 8px #000; }
.side-rail--right .rail-track { animation:railUp 28s linear infinite; }
.side-rail--right .rail-loop span { transform:rotate(180deg); }
@keyframes railDown { from { transform:translate3d(0,-50%,0); } to { transform:translate3d(0,0,0); } }
@keyframes railUp { from { transform:translate3d(0,0,0); } to { transform:translate3d(0,-50%,0); } }
.profile { min-width:0; background:rgba(9,11,18,.94); box-shadow:0 0 70px #000; }
.hero { height:350px; position:relative; overflow:hidden; background:#171824; }
.banner { width:100%; height:100%; display:block; object-fit:cover; object-position:center -50px; image-rendering:pixelated; }
.banner-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,10,.3),transparent 60%),linear-gradient(transparent 55%,rgba(9,11,18,.96)); }
.identity { position:relative; min-height:170px; padding:34px 34px 34px 222px; display:flex; align-items:center; }
.avatar-frame { position:absolute; left:34px; top:-93px; width:164px; height:164px; padding:7px; background:#090b12; filter:drop-shadow(0 15px 20px rgba(0,0,0,.55)); }
.avatar-frame::before,.avatar-frame::after,.avatar-pixels { content:""; position:absolute; inset:0; z-index:-1; background:conic-gradient(from var(--angle,0deg),#ff174f,#ffeb00,#16ff73,#00c8ff,#8b4dff,#ff3bd4,#ff174f); animation:borderSpin 1.35s steps(12) infinite; }
.avatar-frame::after { inset:-4px; filter:blur(10px); opacity:.08; animation:borderSpin 1.35s steps(12) infinite, borderGlowFade 8s ease-in-out infinite; }
.avatar-pixels { inset:-5px; clip-path:polygon(0 0,12px 0,12px 5px,calc(100% - 12px) 5px,calc(100% - 12px) 0,100% 0,100% 12px,calc(100% - 5px) 12px,calc(100% - 5px) calc(100% - 12px),100% calc(100% - 12px),100% 100%,calc(100% - 12px) 100%,calc(100% - 12px) calc(100% - 5px),12px calc(100% - 5px),12px 100%,0 100%,0 calc(100% - 12px),5px calc(100% - 12px),5px 12px,0 12px); }
@property --angle { syntax:"<angle>"; initial-value:0deg; inherits:false; } @keyframes borderSpin { to { --angle:360deg; } }
@keyframes borderGlowFade { 0%,100% { opacity:.08; } 50% { opacity:1; } }
.avatar-frame img { width:100%; height:100%; object-fit:cover; display:block; image-rendering:pixelated; background:#141722; }
.identity-copy { position:absolute; top:20px; right:34px; left:222px; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.identity h1 { margin:0; font:700 clamp(27px,3.7vw,40px) Silkscreen,monospace; line-height:1; }
.identity-copy p { margin:0; color:#a6b0bf; font:700 10px Silkscreen,monospace; letter-spacing:.08em; }
.floating-dot { width:12px; height:12px; flex:0 0 auto; color:#ff174f; background:currentColor; clip-path:polygon(25% 0,75% 0,75% 25%,100% 25%,100% 75%,75% 75%,75% 100%,25% 100%,25% 75%,0 75%,0 25%,25% 25%); filter:drop-shadow(3px 3px 0 rgba(0,0,0,.55)); animation:dotColorShift .9s steps(1,end) infinite; image-rendering:pixelated; }
@keyframes dotColorShift { 0% { color:#ff174f; } 16.66% { color:#ffeb00; } 33.33% { color:#16ff73; } 50% { color:#00c8ff; } 66.66% { color:#8b4dff; } 83.33% { color:#ff3bd4; } }
.social-links { display:flex; gap:8px; }
.social-group { display:flex; flex:0 0 auto; align-items:center; gap:18px; }
.social-links a { width:38px; height:38px; display:grid; place-items:center; color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--line); text-decoration:none; transition:background .2s,border-color .2s,transform .2s,box-shadow .2s; }
.social-links svg { width:20px; height:20px; fill:currentColor; }
.social-links a:focus-visible { background:rgba(101,245,163,.12); border-color:var(--lime); box-shadow:0 0 16px rgba(101,245,163,.2); transform:translateY(-2px); outline:none; }
.social-links a:active { background:rgba(101,245,163,.12); border-color:var(--lime); box-shadow:0 0 16px rgba(101,245,163,.2); transform:translateY(-1px); }
@media (hover:hover) { .social-links a:hover { background:rgba(101,245,163,.12); border-color:var(--lime); box-shadow:0 0 16px rgba(101,245,163,.2); transform:translateY(-2px); } }
.retro-viewport { padding:0 34px 48px; }
.retro-screen { position:relative; height:520px; overflow:hidden; border:5px solid #c4c4c4; border-color:#fff #3a3a3a #3a3a3a #fff; background:#008080; box-shadow:0 18px 40px rgba(0,0,0,.55); font-family:Silkscreen,monospace; image-rendering:pixelated; isolation:isolate; }
.retro-screen::before { content:""; position:absolute; inset:0 0 38px; z-index:-2; background:#ff315f; animation:desktopRainbow 18s linear infinite; }
.retro-screen::after { content:""; position:absolute; inset:0 0 38px; z-index:-1; opacity:.22; background:repeating-linear-gradient(0deg,transparent 0 5px,#000 5px 7px),repeating-linear-gradient(90deg,transparent 0 5px,#fff 5px 7px); mix-blend-mode:overlay; }
@keyframes desktopRainbow { 0% { background:#ff315f; } 16.66% { background:#ff9b32; } 33.33% { background:#ffe83f; } 50% { background:#45e884; } 66.66% { background:#24b8ff; } 83.33% { background:#8a51ff; } 100% { background:#ff315f; } }
.desktop-icons { position:absolute; inset:18px auto 54px 18px; display:flex; flex-direction:column; gap:20px; }
.desktop-icon { width:90px; padding:2px; display:grid; justify-items:center; gap:6px; border:0; color:#fff; background:transparent; font:700 9px Silkscreen,monospace; line-height:1.35; text-shadow:2px 2px #111; cursor:pointer; }
.desktop-icon:focus-visible,.desktop-icon.is-selected { outline:2px dotted #fff; outline-offset:2px; background:rgba(0,0,100,.4); }
.desktop-icon[hidden] { display:none; }
.pixel-icon { position:relative; width:42px; height:34px; display:block; filter:drop-shadow(3px 3px 0 rgba(0,0,0,.5)); }
.pixel-icon--computer { border:4px solid #eee; background:#16314a; box-shadow:inset 0 0 0 3px #62e4ff; }
.pixel-icon--computer::after { content:""; position:absolute; width:30px; height:5px; left:2px; bottom:-9px; background:#ddd; border-right:5px solid #555; }
.pixel-icon--folder { margin-top:6px; height:28px; background:#ffd43b; border:4px solid #542; box-shadow:inset 0 4px #fff17d; }
.pixel-icon--folder::before { content:""; position:absolute; left:-4px; top:-10px; width:20px; height:8px; background:#ffd43b; border:4px solid #542; border-bottom:0; }
.pixel-icon--mail { margin-top:3px; height:30px; background:#eee; border:4px solid #18345b; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
.pixel-icon--mail::after { content:""; position:absolute; inset:0; background:linear-gradient(35deg,transparent 48%,#285998 49% 55%,transparent 56%),linear-gradient(-35deg,transparent 48%,#285998 49% 55%,transparent 56%); }
.pixel-icon--mine { width:36px; height:36px; border-radius:50%; background:#252525; border:5px solid #888; box-shadow:inset 4px 4px #111,inset -3px -3px #000; }
.pixel-icon--mine::before { content:""; position:absolute; inset:-7px; z-index:-1; background:repeating-conic-gradient(#222 0 8deg,transparent 8deg 45deg); }
.pixel-icon--mine::after { content:""; position:absolute; width:8px; height:8px; top:6px; left:7px; background:#fff; }
.pixel-icon--tetris { width:38px; height:38px; background:linear-gradient(90deg,transparent 0 9px,#ff315f 9px 19px,transparent 19px),linear-gradient(90deg,#ffe83f 0 19px,#24b8ff 19px 29px,#8a51ff 29px); background-size:100% 10px,100% 20px; background-position:0 0,0 19px; background-repeat:no-repeat; border-bottom:9px solid #45e884; filter:drop-shadow(3px 3px 0 rgba(0,0,0,.5)); }
.retro-window { position:absolute; width:min(470px,calc(100% - 150px)); min-height:210px; padding:4px; color:#111; background:#c6c6c6; border:4px solid; border-color:#fff #303030 #303030 #fff; box-shadow:8px 9px 0 rgba(0,0,0,.3); }
.window-titlebar { height:30px; padding:4px 5px 4px 9px; display:flex; align-items:center; justify-content:space-between; color:#fff; background:linear-gradient(90deg,#000080,#198bd0); font-size:11px; cursor:move; touch-action:none; user-select:none; }
.window-controls { display:flex; gap:3px; }
.window-controls i,.window-close { width:20px; height:20px; padding:0; display:grid; place-items:center; color:#111; background:#c6c6c6; border:2px solid; border-color:#fff #333 #333 #fff; font:700 13px Silkscreen,monospace; font-style:normal; }.window-close { cursor:pointer; }.window-close:active { border-color:#333 #fff #fff #333; }
.window-body { min-height:166px; padding:25px; display:flex; align-items:center; gap:22px; background:#dedede; border:2px solid; border-color:#555 #fff #fff #555; }
.window-body h2 { margin:0 0 13px; font-size:15px; line-height:1.35; }.window-body p { margin:0; font:400 10px/1.7 Silkscreen,monospace; }.window-body a { color:#000080; }.window-art { flex:0 0 auto; width:64px; height:64px; display:grid; place-items:center; color:#111; font:700 24px Silkscreen,monospace; white-space:nowrap; transform:scaleY(1.8); }
.retro-window--projects { width:min(580px,calc(100% - 135px)); height:min(390px,calc(100% - 68px)); }
.retro-window--contact { width:min(500px,calc(100% - 135px)); min-height:0; }
.window-body--contact { min-height:0; padding:15px; display:block; }
.contact-form { display:grid; grid-template-columns:74px minmax(0,1fr); align-items:center; gap:9px 10px; }
.contact-form label { font-size:9px; text-align:right; }
.contact-form input,.contact-form textarea { width:100%; min-width:0; padding:7px 8px; color:#111; background:#fff; border:2px solid; border-color:#555 #fff #fff #555; border-radius:0; font:400 10px/1.35 Silkscreen,monospace; }
.contact-form textarea { resize:vertical; min-height:105px; }
.contact-form input:focus,.contact-form textarea:focus { outline:2px solid #000080; outline-offset:-3px; }
.contact-trap { position:absolute!important; left:-9999px!important; }
.contact-actions { grid-column:2; display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.contact-status { flex:1; color:#8b0000; font:700 8px/1.35 Silkscreen,monospace; }
.contact-send,.confirmation-ok { min-width:78px; padding:7px 12px; color:#111; background:#c6c6c6; border:3px solid; border-color:#fff #555 #555 #fff; font:700 9px Silkscreen,monospace; cursor:pointer; }
.contact-send:active,.confirmation-ok:active { border-color:#555 #fff #fff #555; }
.contact-send:disabled { color:#666; cursor:wait; }
.retro-window--confirmation { width:min(390px,calc(100% - 80px)); min-height:0; }
.window-body--confirmation { min-height:130px; padding:20px; }
.confirmation-icon { width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center; color:#fff; background:#07833d; border:3px solid; border-color:#5dff9c #004d22 #004d22 #5dff9c; font:700 25px Silkscreen,monospace; }
.window-body--confirmation h2 { margin-bottom:6px; }
.confirmation-ok { float:right; margin-top:13px; }
.retro-window--minesweeper { width:358px; min-height:0; }
.window-body--minesweeper { position:relative; min-height:0; padding:12px; display:block; background:#c0c0c0; }
.mine-toolbar { padding:6px 8px; display:grid; grid-template-columns:minmax(0,61px) 38px minmax(0,61px); align-items:center; justify-content:space-between; gap:8px; border:3px solid; border-color:#777 #fff #fff #777; }
.mine-counter,.mine-timer { width:100%; min-width:0; height:32px; padding:4px 2px; overflow:hidden; color:#ff3030; background:#160000; border:2px inset #ddd; font:700 clamp(16px,5vw,20px)/20px Silkscreen,monospace; font-variant-numeric:tabular-nums; letter-spacing:-.08em; text-align:center; white-space:nowrap; }
.mine-reset,.mine-flag-mode { color:#111; background:#c6c6c6; border:3px solid; border-color:#fff #555 #555 #fff; cursor:pointer; }
.mine-reset { width:38px; height:38px; padding:0; font-size:20px; }
.mine-reset:active,.mine-flag-mode:active,.mine-flag-mode[aria-pressed="true"] { border-color:#555 #fff #fff #555; }
.mine-actions { margin:8px 0; display:flex; align-items:center; justify-content:space-between; gap:8px; color:#444; font-size:8px; }
.mine-flag-mode { padding:5px 7px; font:700 8px Silkscreen,monospace; }
.mine-grid { width:306px; height:306px; display:grid; grid-template-columns:repeat(9,34px); border:3px solid; border-color:#777 #fff #fff #777; background:#aaa; }
.mine-cell { width:34px; height:34px; padding:0; display:grid; place-items:center; color:#111; background:#c6c6c6; border:3px solid; border-color:#fff #555 #555 #fff; font:700 16px/1 Silkscreen,monospace; cursor:pointer; }
.mine-cell:active:not(.is-revealed),.mine-cell.is-revealed { border:1px solid #888; background:#bbb; }
.mine-cell.is-flagged { font-size:15px; }
.mine-cell.is-mine { color:#111; font-size:22px; }
.mine-cell.is-hit { color:#111; background:#f33; }
.mine-cell.is-wrong { color:#b00000; }
.mine-cell[data-count="1"] { color:#0000c5; }.mine-cell[data-count="2"] { color:#087708; }.mine-cell[data-count="3"] { color:#d00000; }.mine-cell[data-count="4"] { color:#000080; }.mine-cell[data-count="5"] { color:#800000; }.mine-cell[data-count="6"] { color:#008080; }.mine-cell[data-count="7"] { color:#111; }.mine-cell[data-count="8"] { color:#666; }
.mine-help { margin:8px 0 0!important; color:#555; font-size:9px!important; text-align:center; }
.mine-secret { position:absolute; z-index:3; inset:76px 22px 38px; display:none; padding:20px; color:#fff; background:#000080; border:4px solid; border-color:#fff #333 #333 #fff; text-align:center; animation:secretFlash .8s steps(2,end) infinite; }
.mine-secret.is-visible { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.mine-secret strong { color:#fff36b; font-size:9px; }
.mine-secret span { font:400 9px/1.4 Silkscreen,monospace; }
@keyframes secretFlash { 50% { background:#750075; } }
body.minesweeper-victory .plasma { filter:hue-rotate(150deg) saturate(2.3) contrast(1.2); }
body.minesweeper-victory .mist { opacity:.48; animation-duration:5s,1.5s; }
body.minesweeper-victory .profile { animation:victoryGlow 2.4s steps(8,end) infinite; }
body.minesweeper-victory .retro-screen::before { animation-duration:2.4s; }
body.minesweeper-victory .side-rail { color:#fff36b; }
@keyframes victoryGlow { 0%,100% { box-shadow:0 0 70px #00e5ff; } 33% { box-shadow:0 0 90px #ff24a7; } 66% { box-shadow:0 0 90px #fff137; } }
.retro-window--tetris { width:370px; min-height:0; }
.window-body--tetris { min-height:0; padding:10px; display:block; background:#c0c0c0; }
.tetris-game { display:flex; justify-content:center; align-items:flex-start; gap:10px; }
.tetris-board { width:180px; height:360px; flex:0 0 auto; display:block; border:4px solid; border-color:#555 #fff #fff #555; background:#090b18; image-rendering:pixelated; outline:none; }
.tetris-board:focus-visible { outline:2px dotted #000080; outline-offset:2px; }
.tetris-panel { width:118px; display:flex; flex-direction:column; align-items:stretch; gap:4px; color:#222; }
.tetris-label { margin-top:3px; color:#555; font-size:8px; }
.tetris-panel strong { padding:5px 4px; color:#ff4b4b; background:#160000; border:2px inset #ddd; font:700 12px Silkscreen,monospace; text-align:right; }
.tetris-next { width:80px; height:80px; align-self:center; border:3px solid; border-color:#555 #fff #fff #555; image-rendering:pixelated; }
.tetris-new,.tetris-controls button { color:#111; background:#c6c6c6; border:3px solid; border-color:#fff #555 #555 #fff; font:700 8px Silkscreen,monospace; cursor:pointer; }
.tetris-new { margin-top:6px; padding:7px 3px; }
.tetris-new:active,.tetris-controls button:active { border-color:#555 #fff #fff #555; }
.tetris-controls { margin-top:8px; display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.tetris-controls button { min-height:31px; padding:4px 2px; touch-action:manipulation; }
.tetris-help { margin:6px 0 0!important; color:#555; font-size:7px!important; text-align:center; }
.window-body--projects { height:calc(100% - 30px); min-height:0; padding:16px; display:flex; flex-direction:column; align-items:stretch; gap:13px; }
.projects-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.projects-heading h2 { margin-bottom:4px; }
.projects-heading .projects-count { color:#555; font:400 9px/1.4 Silkscreen,monospace; }
.projects-heading > a { flex:0 0 auto; padding:6px 8px; border:2px solid; border-color:#fff #444 #444 #fff; background:#c6c6c6; font-size:9px; text-decoration:none; }
.projects-heading > a:active { border-color:#444 #fff #fff #444; }
.projects-list { min-height:0; overflow:auto; display:grid; gap:8px; padding-right:4px; }
.projects-status { padding:24px 8px; text-align:center; color:#555; }
.projects-status--error { color:#8b0000; }
.repo-card { padding:10px 11px; display:flex; flex-direction:column; gap:6px; color:#111!important; border:2px solid; border-color:#fff #555 #555 #fff; background:#eee; text-decoration:none; }
.repo-card:hover,.repo-card:focus-visible { color:#fff!important; background:#000080; outline:2px dotted #111; outline-offset:-5px; }
.repo-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.repo-card__header strong { overflow-wrap:anywhere; font-size:11px; }
.repo-stars { flex:0 0 auto; color:#8a5b00; font-size:10px; }
.repo-card:hover .repo-stars,.repo-card:focus-visible .repo-stars { color:#ffe66d; }
.repo-description { font:400 9px/1.55 Silkscreen,monospace; }
.repo-meta { display:flex; gap:12px; color:#555; font-size:9px; }
.repo-card:hover .repo-meta,.repo-card:focus-visible .repo-meta { color:#ddd; }
.retro-taskbar { position:absolute; z-index:10000; inset:auto 0 0; height:38px; padding:4px; display:flex; align-items:center; gap:5px; color:#111; background:#c3c3c3; border-top:3px solid #fff; font-size:9px; }
.start-button,.task-item,.task-clock { height:28px; padding:0 9px; display:flex; align-items:center; gap:6px; border:2px solid; border-color:#fff #444 #444 #fff; }.start-button b { color:#158c5a; font-size:16px; }.task-divider { height:28px; flex:0 0 auto; border-left:2px solid #777; border-right:2px solid #fff; }.task-list { min-width:0; flex:1; display:flex; gap:5px; overflow:hidden; }.task-item { min-width:0; max-width:145px; flex:1 1 110px; justify-content:flex-start; overflow:hidden; color:#111; background:#c3c3c3; font:700 9px Silkscreen,monospace; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; }.task-item.is-active { border-color:#444 #fff #fff #444; background:#aaa; }.task-item:focus-visible { outline:2px dotted #111; outline-offset:-5px; }.task-clock { flex:0 0 auto; margin-left:auto; border-color:#777 #fff #fff #777; }
@media (max-width:800px) { .page-shell { width:82vw; grid-template-columns:clamp(28px,5.2vw,42px) minmax(0,1fr) clamp(28px,5.2vw,42px); }.hero { height:245px; }.identity { padding:70px 20px 30px; }.avatar-frame { width:120px; height:120px; top:-61px; left:20px; }.identity-copy { left:158px; top:18px; gap:10px; }.social-links { gap:6px; }.social-links a { width:34px; height:34px; } }
@media (min-width:801px) and (max-width:900px) { .identity-copy { right:24px; } }
@media (min-width:521px) and (max-width:800px) { .identity-copy { right:14px; } }
@media (max-width:520px) { .side-rail { display:none; }.page-shell { width:90vw; display:block; }.profile { border-inline:1px solid rgba(135,147,165,.28); }.hero { height:220px; }.identity { min-height:175px; padding:68px 16px 28px; }.avatar-frame { width:120px; height:120px; }.identity-copy { left:152px; top:17px; gap:7px; }.identity h1 { font-size:24px; }.identity-copy p { font-size:8px; }.social-links { gap:5px; }.social-links a { width:30px; height:30px; }.social-links svg { width:17px; height:17px; }.retro-viewport { padding:0 12px 28px; }.retro-screen { height:500px; }.desktop-icons { inset:12px 5px auto; display:grid; grid-template-columns:repeat(5,1fr); width:calc(100% - 10px); gap:2px; }.desktop-icon { width:auto; font-size:7px; }.retro-window { width:calc(100% - 24px); }.retro-window--projects { height:350px; }.retro-window--minesweeper { width:334px; max-width:calc(100% - 8px); }.retro-window--tetris { width:334px; max-width:calc(100% - 8px); }.window-body { padding:20px 16px; gap:12px; }.window-body--contact { padding:12px 10px; }.contact-form { grid-template-columns:58px minmax(0,1fr); gap:7px; }.contact-form label { font-size:7px; }.contact-form textarea { min-height:90px; }.retro-window--confirmation { width:calc(100% - 36px); }.window-body--confirmation { padding:17px 13px; }.window-body--projects { padding:12px; }.window-body--minesweeper { padding:7px; }.window-body--tetris { padding:6px; }.mine-grid { width:288px; height:288px; grid-template-columns:repeat(9,32px); margin:auto; }.mine-cell { width:32px; height:32px; }.tetris-game { gap:6px; }.tetris-board { width:180px; height:360px; }.tetris-panel { width:102px; }.tetris-controls { margin-top:5px; gap:3px; }.tetris-controls button { min-height:27px; }.projects-heading > a { display:none; }.window-art { width:50px; height:50px; }.start-button { padding:0 5px; }.start-button b { display:none; }.task-clock { display:none; }.task-item { padding:0 5px; font-size:7px; } }
@media (max-width:520px) {
  .mist { width:100vmax; height:100vmax; filter:blur(24px); animation-duration:24s,9s; }
  .identity { min-height:188px; }
  .identity-copy { right:14px; }
  .social-group { gap:7px; }
  .retro-window { max-height:calc(100% - 118px); overflow:auto; }
}
@media (max-width:360px) {
  .hero { height:195px; }
  .avatar-frame { left:14px; width:108px; height:108px; }
  .identity { min-height:176px; }
  .identity-copy { left:136px; right:10px; }
  .identity h1 { font-size:20px; }
  .desktop-icon { width:74px; font-size:8px; }
  .window-body { padding:16px 12px; }
  .window-art { width:42px; height:42px; }
}