body {body { font-family: Cambria, Calibri; }
  background: #223; color: #ccc; margin: 0;padding: 1em; line-height: 1.8;}
body.light { background: #f2f2f2; color: #333;}
header, footer { text-align: center; color: #ccc; margin-top: 3em;
  max-width: 750px; margin: 0 auto; padding: 1rem;}   
  h1 { font-size: 1.8em; margin: 0.2em 0;}
 #site-nav { position: fixed; top: 1em; left: 1em; z-index: 1000; background: #150221;
    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: #f0f0f0;}
footer { text-align: center; font-size: 0.9em; color: #ccc; 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: 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 { position:fixed; top: 20px; right: 10px; }
header h1 { clear: both; text-align: center; margin: 0.5em 0;}
a:link { color: #cc88aa;}
body.light a:link { color: #4e0648; text-decoration: none;}
section { padding: 0.01rem; line-height: 1.3; max-width: 650px; margin: 0.1em auto;}
.room-button { display: inline-block; margin: 0.1em 0 0 0; padding: 0.5em 1em;
    background: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer;
    font-size: 1.1em;}
.room-button:hover { background: #555;}
body.light .room-button { background: #ccc; color: #333;}
body.light .room-button:hover { background: #aaa;}
#chat-log { background: #222; color: #585353; height: 60vh; overflow-y: scroll;
    padding: 1em; border: 1px solid #555; border-radius: 5px; margin-bottom: 1em;
    font-size: 1em;}
.room-button.active { background: #555; color: #fff; border: 1px solid #555;
   border-radius: 5px;}
body.light #chat-log { background: #f9f9f9; color: #333; border: 1px solid #ccc;}
#chat-input { width: 75%; padding: 0.75em; font-size: 1em; border: 1px solid #555;
    border-radius: 5px; background: #333; color: #fff;}
body.light #chat-input { background: #fff; color: #333; border: 1px solid #ccc;}
#send-button { padding: 0.75em 1em; font-size: 1em; background: #555;
    color: #fff; border: none; border-radius: 5px; margin-left: 0.5em; cursor: pointer;}
#send-button:hover { background: #777;}
body.light #send-button { background: #ccc; color: #333;}
body.light #send-button:hover { background: #aaa;}
@media (max-width: 600px) { #chat-input { width: 100%; margin-bottom: 0.5em;}
  #send-button { width: 100%; margin-left: 0; }}
#chat-email, #chat-input { padding: 0.75em; font-size: 1em; border: 1px solid #555;
    border-radius: 5px; background: #333; color: #fff;}
body.light #chat-email, body.light #chat-input { background: #fff; color: #333;
    border: 1px solid #ccc;}
 #chat-email, #chat-input { width: 100%; padding: 0.75em; font-size: 1em;
    border: 1px solid #555; border-radius: 5px; background: #333;
    color: #fff;margin-bottom: 0.5em;}
body.light #chat-email, body.light #chat-input {background: #fff;color: #333;border: 1px solid #ccc;}
a:link {  color: #ffffff; }
a:visited {  color: rgb(119, 152, 152);}
a:hover {  color: rgb(225, 229, 193);}
a:active {  color: rgb(255, 255, 255);}
body.light a:link {  color: rgb(42, 0, 139);}
body.light a:visited {  color: rgb(69, 65, 65);}
body.light a:hover {  color: darkred; }
body.light a:active {  color: rgb(59, 2, 46); }
 #meep { position: fixed; top: 10px; left: 10px; z-index: 9999;}
#meep img { width: 60px; height: auto;
  border-radius: 45px;}
@media (max-width: 600px) {
  #meep { top: 10px; left: 10px; }
  #meep img { width: 60px; }}
  #nomnom { position: fixed; bottom: 10px; right: 10px; z-index: 9999;}
  #nomnom img { width: 60px; height: auto; border-radius: 45px;}