body {--bg: #0a1128;--inbg: #001f54;--accent: #1282a2;--text: #fefcfb;
    --db: #034078;background: var(--bg);color: var(--text);
    font-family: Calibri,Cambria;margin-top: 3em;padding: 0.5em;line-height: 1.6;}
body.light {--bg: #fefae0;--inbg: #dda15e;--accent: #bc6c25;--db: #606c38;
    --text: #0d0914;background: var(--bg);color: var(--text);}
main {max-width: 900px;margin: 0 auto;padding: 1rem;}
header {text-align: center;margin-bottom: 1em;background: var(--bg);color: var(--text);}
h1,h2,h3,h4 {text-align: center;}
footer {text-align: center;font-size: 0.9em;color: var(--text);margin-top: 1em;}
.boxed {text-align: left;max-width: 750px;align-items: center;margin: 2em auto;border: 3px solid var(--db);
    background: var(--inbg);color: var(--text);border-radius: 12px;padding: 1.5em;
    box-shadow: 2px 2px 8px var(--bg);}
.boxed img {width: 160px;height: auto;float: right;margin-left: 1em;margin-bottom: 0.5em;}
.linktree ul, .bltree ul {list-style: none;padding: 0;margin: 0;}
.linktree li, .bltree li {margin: 3px 0;}
.linktree a {display: block;padding: 10px;max-width: 400px;margin: 5px auto;background: var(--inbg);
    color: var(--text);text-align: center;border: 1px solid var(--bg);
    border-radius: 5px;text-decoration: none;}
.linktree a:hover {background: var(--accent);color: var(--text);}
.bltree a.blox {display: flex;align-items: center;max-width: 400px;margin: 5px auto;padding: 10px;
    background: var(--inbg);color: #e0e0e0;border: 1px solid var(--accent);
    border-radius: 5px;text-decoration: none;}
.bltree a.blox:hover {background: var(--accent);color: var(--text);}
.bltree a.blox img {max-width: 80px;height: auto;margin-right: 1em;}
.bltree a.blox p {margin: 0;font-size: 1em;}
form {display: flex;flex-direction: column;gap: 0.8em;}
form input, form textarea {background-color: var(--text);padding: 0.6em;border-radius: 6px;border: 1px solid var(--accent);
    background: var(--inbg);color: var(--text);}
form button {max-width: 200px;align-self: center;padding: 0.6em;border: none;border-radius: 6px;background: var(--inbg);color: var(--text);
    cursor: pointer;}
form button:hover {background: var(--inbg);}
#toggle-theme {position: fixed;top: 1em;right: 1em;z-index: 1000;}
#calendar {max-width: 1000px;margin: 0 auto;padding: 1em;}
a:link {color: var(--text);}
a:visited {color: #779898;}
a:hover {color: #e1e5c1;}
a:active {color: var(--text);}
body.light a:link {color: #2a008b;}
body.light a:visited {color: #454141;}
body.light a:hover {color: darkred;}
body.light a:active {color: #3b022e;}
#gnome, #post, #back, #note, #join {position: fixed;z-index: 9999;}
#gnome {top: 10px;left: 10px;}
#post {top: 90px;right: 10px;}
#back {bottom: 10px;left: 10px;}
#note {bottom: 90px;right: 10px;}
#join {bottom: 10px;right: 10px;}
#gnome img, #post img, #back img, #note img, #join img {width: 60px;height: auto;border-radius: 45px;}
#twocolumns {display: grid;grid-template-columns: repeat(2, 1fr);gap: 3px;}
.columnbox {align-items: center;margin: 2em auto;border-left: none;border-right: 3px solid var(--accent);
    background: var(--bg);color: var(--text);border-radius: 12px;
    padding: 1.5em;box-shadow: 2px 2px 8px rgba(0,0,0,0.3);}
.anchors ul {list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;gap: 1em;
    justify-content: center;}
.anchors li {margin: 0;}
.anchors a {display: block;padding: 0.6em 1em;background: var(--inbg);color: var(--text);
    text-decoration: none;border-radius: 6px;}
.anchors a:hover {background: #555;}
.plant {margin-bottom: 1em;padding: 1em;border: 1px solid #555;border-radius: 8px;background: #291d35;}
.joinbox {align-items: left;margin: 2em auto;padding: 1em;background: var(--inbg);border-radius: 12px;}
.joinbox h2 {margin-top: 0;}
.gridcheck {display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: 0.5em 1em;
    margin-bottom: 1em;}
.gridcheck label {display: flex;align-items: center;}
#lightbox {text-align: left;width: 100%;background: var(--accent);color: var(--text);padding: 3em 1em;box-sizing: border-box;
    margin: 0;}
.lightboxed {text-align: left;max-width: 700px;margin: 0 auto;padding: 1.5em;background: var(--inbg);color: var(--text);
    border-top: 2px solid var(--accent);border-right: 2px solid var(--accent);
    border-radius: 12px;box-shadow: 2px 2px 8px var(--bg);}
input::placeholder, textarea::placeholder {font-family: inherit;font-size: 1.4em;line-height: 1.8px;}
@media (max-width: 600px) {
.boxed img {float: none;display: block;margin: 0 auto 1em auto;}
form {padding: 1em;}
form input, form textarea, form button {font-size: 1em;width: 100%;box-sizing: border-box;}
form textarea {min-height: 120px;}
.gridcheck {grid-template-columns: 1fr;}
.gridcheck label {align-items: flex-start;gap: 0.5em;}
#gnome {top: 20px;left: 10px;}
#join {top: 90px;right: 10px;}
#back {bottom: 10px;left: 10px;}
#note {bottom: 10px;right: 10px;}}
header.light {background: var(--inbg);color: var(--text);}
footer.light {color: var(--text);}
.boxed.light {background: var(--inbg);color: var(--text);border: 3px solid var(--db);}
.linktree.light a {background: var(--inbg);color: var(--text);border: 1px solid var(--bg);}
.linktree.light a:hover {background: var(--accent);color: var(--text);}
.bltree.light a.blox {background: var(--inbg);color: var(--text);border: 1px solid var(--accent);}
.bltree.light a.blox:hover {background: var(--accent);color: var(--text);}
form.light input, form.light textarea {background: var(--inbg);color: var(--text);border: 1px solid var(--accent);}
form.light button {background: var(--inbg);color: var(--text);}
form.light button:hover {background: var(--inbg);}
.columnbox.light {background: var(--inbg);color: var(--text);border-right: 3px solid var(--accent);}
.anchors.light a {background: var(--inbg);color: var(--text);}
.anchors.light a:hover {background: greenyellow;}
.plant.light {background: var(--inbg);border-color: var(--accent);}
.joinbox.light {text-align: left;background: var(--inbg);}
#lightbox.light {text-align: left;background: var(--accent);color: var(--text);}
.lightboxed.light {text-align: left;background: var(--inbg);color: var(--text);border-top: 2px solid var(--accent);
    border-right: 2px solid var(--accent);}