html[data-theme=dark]{--bg:#121212;--text:#e0e0e0;--border:#e0e0e0}html[data-theme=light]{--bg:#fcfcfc;--text:#1a1a1a;--border:#1a1a1a}:root{--bg:#fcfcfc;--text:#1a1a1a;--accent:#ff0000;--border:#1a1a1a}@media(prefers-color-scheme:dark){:root{--bg:#121212;--text:#e0e0e0;--border:#e0e0e0}}body{background-color:var(--bg);color:var(--text);font-family:courier new,Courier,monospace;line-height:1.6;padding:2rem;max-width:800px;margin:0}h1,h2,h3{font-family:arial black,Gadget,sans-serif;text-transform:uppercase;display:inline-block;padding:5px 10px;background-color:var(--bg);color:var(--text);border:5px solid var(--border)}h2:has(a:hover),h3:has(a:hover){background-color:var(--text);color:var(--bg);cursor:pointer}h2:has(a:hover),h3:has(a:hover){background-color:var(--text);color:var(--bg);cursor:pointer}h2 a,h3 a{color:inherit;text-decoration:none;display:inline-block}nav ul{list-style:none;padding:0;margin:30px 0;display:flex;flex-direction:row;gap:15px;color:var(--text)}nav li{margin:0;padding:0;color:var(--text)}nav a{display:inline-block;width:120px;text-align:center;padding:10px 0;margin:0;border:5px solid var(--border);font-weight:700;text-transform:uppercase;color:var(--text);background-color:var(--bg);text-decoration:none}a{color:var(--text);background-color:transparent}a:hover,nav a:hover{background-color:var(--text);color:var(--bg)}hr{border:0;border-top:5px solid var(--border);margin:2rem}img{filter:grayscale(100%);border:4px solid var(--border);max-width:100%;height:auto}@media(max-width:600px){nav ul{flex-direction:column;align-items:flex-start}nav a{width:100%;max-width:200px}}main{border-left:10px solid var(--border)}nav button{background:0 0;border:none;padding:0;cursor:pointer;appearance:none;-webkit-appearance:none;display:flex;align-items:center;justify-content:center;width:auto;margin-left:10px;margin-top:10px;color:var(--text);transition:transform .1s ease}nav button:hover{background-color:transparent !important;color:var(--text);transform:scale(1.1)}nav button svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:2.5}nav button:active{transform:scale(.9)}@media(max-width:600px){nav button{margin-left:0;margin-top:20px;justify-content:flex-start}}