:root{--teal:teal;--navy:navy;--gray:silver;--light:#fff;--shadow:gray;--dark:#000;--link:#00e;--visited:#551a8b;--yahoo:#c00;--sans:Arial, Helvetica, sans-serif;--serif:"Times New Roman", Times, serif}*{box-sizing:border-box}body{background-color:var(--teal);min-height:100vh;font-family:var(--serif);color:#000;image-rendering:pixelated;background-image:linear-gradient(45deg,#0000001f 25%,#0000 25% 75%,#0000001f 75%),linear-gradient(45deg,#0000001f 25%,#0000 25% 75%,#0000001f 75%);background-position:0 0,2px 2px;background-size:4px 4px;margin:0;font-size:16px}a{color:var(--link)}a:visited{color:var(--visited)}a:active{color:var(--yahoo)}.raised{background:var(--gray);border:2px solid;border-color:var(--light) var(--dark) var(--dark) var(--light);box-shadow:inset -1px -1px 0 var(--shadow), inset 1px 1px 0 #dfdfdf}.sunken{background:var(--light);border:2px solid;border-color:var(--shadow) var(--light) var(--light) var(--shadow);box-shadow:inset 1px 1px 0 var(--dark)}.btn{font-family:var(--sans);background:var(--gray);color:#000;border:2px solid;border-color:var(--light) var(--dark) var(--dark) var(--light);box-shadow:inset -1px -1px 0 var(--shadow), inset 1px 1px 0 #dfdfdf;cursor:pointer;padding:4px 14px;font-size:13px}.btn:active{border-color:var(--dark) var(--light) var(--light) var(--dark);box-shadow:inset 1px 1px 0 var(--shadow);padding:5px 13px 3px 15px}.btn:disabled{color:var(--shadow);text-shadow:1px 1px #fff;cursor:default}.titlebar{background:linear-gradient(90deg, var(--navy), #1084d0);color:#fff;font-family:var(--sans);justify-content:space-between;align-items:center;padding:3px 4px;font-size:14px;font-weight:700;display:flex}.titlebar .ctrls{gap:2px;display:flex}.titlebar .ctrls span{text-align:center;color:#000;background:var(--gray);border:2px solid;border-color:var(--light) var(--dark) var(--dark) var(--light);width:18px;height:16px;font-size:11px;line-height:12px}.desktop{max-width:1000px;margin:0 auto;padding:16px}.browser{margin-bottom:40px}.toolbar{flex-wrap:wrap;align-items:center;gap:6px;padding:6px;display:flex}.toolbar .btn{min-width:52px;padding:4px 10px}.urlrow{font-family:var(--sans);align-items:center;gap:6px;padding:0 6px 6px;font-size:13px;display:flex}.urlrow .sunken{white-space:nowrap;text-overflow:ellipsis;flex:1;padding:3px 6px;font-family:Courier New,monospace;font-size:13px;overflow:hidden}.viewport{background:#fff;min-height:480px;margin:0 4px 4px;padding:0}.page{padding:20px 24px 28px}.statusbar{font-family:var(--sans);justify-content:space-between;gap:12px;padding:3px 8px;font-size:12px;display:flex}.statusbar>span{border:1px solid;border-color:var(--shadow) var(--light) var(--light) var(--shadow);flex:1;padding:1px 4px}.logo{color:var(--yahoo);letter-spacing:-1px;text-shadow:2px 2px #000;margin:0;font-family:Times New Roman,serif;font-size:56px;font-weight:700;line-height:1}.logo small{color:#000;text-shadow:none;letter-spacing:0;font-size:20px;font-style:italic}.hero{border-bottom:3px double #000;flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:14px;padding-bottom:14px;display:flex}.marquee-wrap{color:#0f0;white-space:nowrap;background:#000;margin:10px 0;padding:4px 0;font-family:Courier New,monospace;overflow:hidden}.marquee{padding-left:100%;animation:18s linear infinite scroll;display:inline-block}@keyframes scroll{to{transform:translate(-100%)}}.blink{animation:1s step-end infinite blink}@keyframes blink{50%{visibility:hidden}}.rainbow{background:linear-gradient(90deg,#61bb46 0 16.6%,#fdb827 0 33.3%,#f5821f 0 50%,#e03a3e 0 66.6%,#963d97 0 83.3%,#009ddc 0);border:0;height:8px;margin:14px 0}.sunken-input{border:2px solid;border-color:var(--shadow) var(--light) var(--light) var(--shadow);font-family:var(--sans);background:#fff}.directory{grid-template-columns:1fr 1fr;gap:14px 40px;margin-top:10px;display:grid}@media (width<=640px){.directory{grid-template-columns:1fr}.logo{font-size:40px}.page{padding:14px}}.directory li{list-style:none}.directory ul{margin:0;padding:0}.directory .cat{font-family:var(--sans);font-size:17px;font-weight:700}.directory .cat:before{content:"■ ";color:#000;font-size:12px}.directory .sub{font-family:var(--sans);color:#333;margin-left:16px;font-size:12px}.directory .sub a{margin-right:2px}.panel{margin-bottom:18px}.panel .titlebar{background:#3366a8;justify-content:center;font-size:13px}.panel .body{background:#f1f4fb;border:1px solid #3366a8;border-top:0;padding:10px 14px}h2.section{font-family:var(--sans);border-bottom:2px solid var(--navy);color:var(--navy);margin:0 0 8px;font-size:22px}.project{border-bottom:1px dotted #888;padding:8px 0}.project h3{font-family:var(--sans);margin:0;font-size:18px}.project .tech{font-family:var(--sans);color:#444;font-size:12px}.tag{font-family:var(--sans);background:#ff9;border:1px solid #000;margin:2px 4px 0 0;padding:0 5px;font-size:11px;display:inline-block}.badge{font-family:var(--sans);color:#fff;background:#000;border:2px outset #888;margin:3px;padding:3px 8px;font-size:11px;display:inline-block}.footer{text-align:center;margin-top:20px;font-size:13px}.contact-form label{font-family:var(--sans);margin:6px 0 2px;font-size:13px;display:block}.contact-form input,.contact-form textarea{width:100%;max-width:420px;padding:4px;font-size:14px}.construction{font-family:var(--sans);background:repeating-linear-gradient(45deg,#fc0 0 10px,#000 10px 20px);margin:6px 0;padding:4px 14px;font-weight:700;display:inline-block}.construction span{background:#fc0;padding:2px 8px}.err{color:var(--yahoo);font-family:var(--sans);font-size:13px}.modal-bg{z-index:10;background:#00000059;grid-template-columns:minmax(0,1fr);place-items:center;padding:12px;display:grid;position:fixed;inset:0}.dialog{width:460px;max-width:100%}.dialog .stage{background:var(--teal);justify-content:space-around;align-items:center;margin:4px;padding:20px;font-size:56px;display:flex}.dialog .stage .globe{animation:3s steps(8,end) infinite spin;display:inline-block}@keyframes spin{50%{transform:scaleX(-1)}}.dialog .msg{font-family:var(--sans);min-height:32px;padding:8px 10px 4px;font-size:13px}.progress{gap:2px;height:20px;margin:4px 10px 10px;padding:2px;display:flex}.progress i{background:var(--navy);width:12px}.dialog .actions{text-align:center;padding-bottom:10px}.tabs{border-bottom:2px solid var(--dark);flex-wrap:wrap;gap:2px;margin:10px 0 14px;display:flex}.tab{font-family:var(--sans);cursor:pointer;color:#000;background:var(--gray);border:2px solid;border-color:var(--light) var(--dark) transparent var(--light);padding:4px 14px;font-size:13px}.tab.active{background:#fff;padding-bottom:6px;font-weight:700;position:relative;top:2px}.hero{display:block}.namerow{flex-wrap:wrap;align-items:center;gap:18px;margin-bottom:8px;display:flex}.pfp{object-fit:cover;border:3px solid var(--navy);border-radius:50%;flex:none;width:96px;height:96px;box-shadow:2px 2px #000}@media (width<=640px){.desktop{padding:6px}.browser{margin-bottom:12px}.titlebar{font-size:13px}.toolbar .btn,.tab{min-height:34px}.page{padding:12px}.pfp{width:72px;height:72px}.namerow{gap:12px}.project ul,.page>ul{padding-left:20px}.project h3{overflow-wrap:anywhere}.contact-form input,.contact-form textarea{max-width:100%;font-size:16px}.contact-form .btn{min-height:38px}.dialog .stage{padding:14px;font-size:40px}.footer .badge{font-size:10px}}.hp{width:1px;height:1px;position:absolute;left:-9999px;overflow:hidden}
