body {font-family: Calibri,Cambria;background: #250338;color: #e0e0e0;
    margin-top: 3em;padding: 0.5em;line-height: 1.6;}
body.light {background: #9e9d9d;color: #0d0914;}
main {max-width: 750px;}
header {text-align: center;margin-bottom: 1em;}
h1 {font-size: 1.8em;margin: 0.2em 0;}
footer {text-align: center;font-size: 0.9em;color: #999;margin-top: 1em;}
body.light footer {color: #666;}
.boxed {max-width: 750px;align-items: center;margin: 2em auto;border: 3px solid #1e1e1e;
    background: #1c0529;color: rgb(190, 181, 181);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);}
.link-tree ul {list-style: none;padding: 0;margin: 0;}
.link-tree li {margin: 3px 0;}
.link-tree a {display: block;padding: 10px;max-width: 400px;margin: 5px auto;
  background: #1c0529;color: #eddfdf;text-align: center;border: 1px #010102;
  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;}
.blox-tree ul {list-style: none;padding: 0;margin: 0;}.blox-tree li {margin: 5px 0;}
.blox-tree a.blox {display: flex;align-items: center;max-width: 400px;margin: 5px auto;
    padding: 10px;background: #444;color: #e0e0e0;
    border: 1px solid #666;border-radius: 5px;text-decoration: none;}
body.light .blox-tree a.blox {background: #7ca6b8;color: #333;border: 1px solid #ccc;}
.blox-tree a.blox img {max-width: 80px;height: auto;margin-right: 1em;}
.blox-tree a.blox p {margin: 0;font-size: 1em;}
.blox-tree a.blox:hover {background: #666;color: #fff;}
body.light .blox-tree a.blox:hover {background: #e0e0e0;color: #18321c;}
body.light .clear-button a {background: rgb(59, 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, 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);}
#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;}