body { font-family: system-ui, sans-serif;background: #121212; color: #e0e0e0;
  margin: 0; padding: 1em; line-height: 1.8;}
body.light { background: #f2f2f2; color: #333;}
header, footer { text-align: center; color: #999; margin-top: 3em; max-width: 750px;
  margin: 0 auto; padding: 1rem;}
section { padding: 2rem; line-height: 1.6;}
h1 { font-size: 1.8em; margin: 0.2em 0;}
#site-nav { position: fixed; top: 1em; left: 1em; z-index: 1000; background: #1e1e1e;padding: 0.5em;
  border-radius: 0.5em; box-shadow: 2px 2px 5px rgba(0,0,0,0.5);font-size: 1rem; }
body.light #site-nav { background: #b2b2b2; }
footer {text-align: center; font-size: 0.9em; color: #999; margin-top: 3em; }
body.light footer {color: #666; }
.link-tree ul {list-style: none;padding: 0; margin: 0; }
.link-tree li { margin: 5px 0; }
.link-tree a { display: block; padding: 10px;max-width: 400px;margin: 5px auto;
  background: #444; color: #e0e0e0; text-align: center; border: 1px solid #666;
  border-radius: 5px; text-decoration: none;}
body.light .link-tree a { background: #7ca6b8; color: #333; border: 1px solid #ccc;}
.link-tree a:hover {background: #666; color: #fff;}  
body.light .link-tree a:hover { background: #e0e0e0; color: #18321c; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem; margin-top: 1rem; padding: 1rem;}
.project-card { display: block; padding: 1em; background: #444; color: #e0e0e0;
    border: 1px solid #666; border-radius: 8px; text-decoration: none;
    transition: background 0.2s, color 0.2s;}
.project-card:hover { background: #666; color: #fff;}
body.light .project-card { background: #7ca6b8; color: #333; border: 1px solid #ccc;}
body.light .project-card:hover { background: #e0e0e0; color: #18321c;}
.project-card img { max-width: 100%; height: auto; border-radius: 5px; display: block;
  margin-bottom: 0.5em;}
nav ul { list-style: none; padding: 0; display: flex; justify-content: center;
    gap: 2rem; margin-top: 1rem;}
nav a { color: #e0e0e0; text-decoration: none;}
body.light nav a { color: #333;}
#toggle-theme { float: right; margin: 1em;}
header h1 { clear: both; text-align: center; margin: 0.5em 0;}
a:link { color: #cc88aa;}
body.light a:link { color: #4e0648; text-decoration: none;}
.boxed {max-width: 750px; margin: 2em auto; border: 3px solid #555; background: #333;
    border-radius: 12px; padding: 1.5em;box-shadow: 2px 2px 8px rgba(0,0,0,0.3);}
body.light .boxed {border: 3px solid #ccc;background: #868472;
   box-shadow: 2px 2px 8px rgba(0,0,0,0.05);}