:root{--bg:#7a9f75;--innerbg:#aaaa95;--accent:#4e5aba;--text:#03061c;
    --db:#98aec2;--notice:#145cae;--warning:#ff5a14;--shadow:#43454a}

.themea {--bg: #92759f;--innerbg: #b0ae87;--accent: #ba7b4e;--text: #03061c;
    --db: #98aec2;--notice: #ddff00 ;--warning: #ff14b8;--shadow: #43454a;}
.themeb {--bg: #7a9f75;--innerbg: #aaaa95;--accent: #4e5aba;--text: #03061c;
    --db: #98aec2;--notice: #145cae ;--warning: #ff5a14;--shadow: #43454a;}
.themec{--bg: #0a1128;--innerbg: #031b44;--accent: #0f4857;--text: #fefcfb;
    --db: #034078;--notice: #14aeae ;--warning: #ff1414;--shadow: #43454a ;}
html {margin: 0;padding: 0;}
body { background: var(--bg);color: var(--text);font-family: Calibri,Cambria;
    margin: 0;padding: 0;line-height: 1.6;}
body.light {background: #9e9d9d;color: #0d0914;}
main {max-width: 750px;}
header {background: #7ca6b8;color: #0b0529;text-align: center;margin-bottom: 1em;}
h1 {font-size: 1.8em;margin: 0.2em 0;}
h1,h2,h3,h4,h5 {text-align: center;text-shadow: #393939;}
footer {text-align: center;font-size: 0.9em;color: #999;margin-top: 1em;}
body.light footer {color: #7ca6b8;}
.boxed {max-width: 750px;align-items: center;margin: 2em auto;border: 3px solid #1e1e1e;
    background: #0c0529;color: #010102;border-radius: 12px;
    padding: 1.5em;}
body.light .boxed {border: 3px solid #ccc;background: #7ca6b8;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.05);}
.tree ul {list-style: none;padding: 0;margin: 0;}
.tree li {margin: 3px 0;}
.tree a {display: block;padding: 10px;max-width: 400px;margin: 5px auto;
  background: #070529;color: #eddfdf;text-align: center;border: 1px #010102;
  border-radius: 5px;text-decoration: none;}
body.light .tree a {background: #7ca6b8;color: #333;border: 1px solid #ccc;}
.tree a:hover {background: #7ca6b8;color: #fff;}
body.light .tree a:hover {background: #e0e0e0;color: #18321c;}
.boxtree ul {list-style: none;padding: 0;margin: 0;}.boxtree li {margin: 5px 0;}
.boxtree a.blox {display: flex;align-items: center;max-width: 400px;margin: 5px auto;
    padding: 10px;background: #444;color: #e0e0e0;
    border: 1px solid #7ca6b8;border-radius: 5px;text-decoration: none;}
body.light .boxtree a.blox {background: #7ca6b8;color: #333;border: 1px solid #ccc;}
.boxtree a.blox img {max-width: 80px;height: auto;margin-right: 1em;}
.boxtree a.blox p {margin: 0;font-size: 1em;}
.boxtree a.blox:hover {background: #7ca6b8;color: #fff;}
body.light .boxtree a.blox:hover {background: #e0e0e0;color: #18321c;}
body.light .clear-button a {background: rgb(18, 18, 68);
    color: #fff;}
#toggle-theme {position: fixed;top: 1em;right: 1em;z-index: 1000;}
#calendar {max-width: 1000px;margin: 0 auto;padding: 1em;}
body.light .fc {background: #fff;color: #222;}
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, 37, 88); }
body.light a:visited {color: rgb(69, 65, 65); }
body.light a:hover {  color: rgb(97, 3, 3); }
body.light a:active {color: rgb(10, 2, 59);}
#gnome {position: fixed;top: 10px;left: 10px;z-index: 9999; }
#gnome img {width: 60px;height: auto;border-radius: 45px; }
@media (max-width: 600px) {#gnome {top: 20px;left: 10px; } #gnome img {width: 60px;  } }
#post {position: fixed;top: 90px;right: 10px;z-index: 9999; }
#post img {width: 60px;height: auto;border-radius: 45px; }
@media (max-width: 600px) {#join {top: 90px;right: 10px; } #join img { width: 60px;  } }
#back {position: fixed;bottom: 10px;left: 10px;z-index: 9999; }
#back img {width: 60px;height: auto;border-radius: 45px; }
@media (max-width: 600px) {#back {bottom: 10px;left: 10px; } #back img {width: 60px;  } }
#note {position: fixed;bottom: 90px;right: 10px;z-index: 9999; }
#note img {width: 60px;height: auto;border-radius: 45px; }
@media (max-width: 600px) {#note {bottom: 90px;left: 10px; } #note img { width: 60px;  } }
#join {position: fixed;bottom: 10px;right: 10px;z-index: 9999; }
#join img {width: 60px;height: auto;border-radius: 45px; }
@media (max-width: 600px) {#note {bottom: 10px;right: 10px; } #note img { width: 60px;  } }
main { max-width: 900px; margin: 0 auto; padding: 1rem;}


.theme-buttons { position: fixed;top: 10px; right: 10px; z-index: 9999; display: flex;}
.theme-buttons button { background: var(--accent);  color: var(--text); border: none;
     border-radius: 6px; padding: 0.4em 0.8em; font-weight: bold; cursor: pointer;}
.theme-buttons button:hover {  background: var(--inbg);}



#themeui{position: fixed;bottom: 1em;right: 1em;z-index: 1000;}
#themeui button{background:var(--notice);color:var(--text);border:1px solid var(--shadow);border-radius:8px;padding:.3rem .6rem}
#themeui button.active{outline:2px solid var(--accent)}