/* hello-ween.css — GWAY Gothic Halloween (Not a Phase) Theme
   Layer atop base.css. For all-year creatures of the night.
*/

:root {
    --bg: linear-gradient(180deg, #181421 0%, #2a1433 100%);
    --bg-alt: #22172a;
    --card-bg: #181621;
    --fg: #efbfff;
    --accent: #ff6f36;
    --accent-alt: #7cfe81;
    --muted: #774790;
    --ween-purple: #582579;
    --ween-green: #7cfe81;
    --ween-orange: #ff6f36;
    --ween-black: #181421;
    --ween-shadow: #ff00be33;
    --ween-border: #e45ffb;
}

body, .page-wrap {
    background: var(--bg) fixed !important;
    color: var(--fg);
}

aside {
    background: linear-gradient(160deg, #1e1825 60%, #371e45 100%);
    border-right: 2px solid #3e1147;
    color: #f783fd;
    font-family: 'EB Garamond', 'Georgia', 'Times New Roman', serif;
    box-shadow: 3px 0 14px #38003355;
}

aside ul li a {
    color: #ff6f36;
    font-family: 'EB Garamond', 'Georgia', serif;
    border-radius: 7px;
    font-size: 0.93em;
    padding-left: 1.1em;
    transition: background 0.15s, color 0.14s, text-shadow 0.16s;
    text-shadow: 0 0 4px #efbfff88;
}
aside ul li a.active,
aside ul li a:hover {
    background: linear-gradient(90deg, #341e3a 40%, #180c1e 100%);
    color: #7cfe81;
    font-weight: bold;
    text-shadow: 0 0 6px #7cfe8188, 0 0 6px #180c1e;
}

aside ul.sub-links {
    list-style: none;
    padding-left: 1em;
    margin: 0.2em 0 0.4em;
    font-size: 0.85em;
}

aside ul.sub-links li a {
    text-transform: none;
    padding: 0.2em 0 0.2em 1.1em;
}

main {
    background: linear-gradient(180deg, #2d1c2f 85%, #1e1a27 100%);
    box-shadow: 0 0 20px #ff00be22, 0 4px 22px #18142177;
    border-radius: 19px 19px 0 0;
    border-top: 4px solid #e45ffb;
    color: var(--fg);
}

h1, h2, h3, h4 {
    font-family: 'EB Garamond', 'Georgia', serif;
    color: #efbfff;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 8px #000a, 0 0 5px #ff00be33;
}
h1 {
    font-size: 2.3em;
    color: #ff6f36;
    text-shadow: 0 3px 16px #180c1e, 0 1px 0 #e45ffb88;
    border-bottom: 3px double #e45ffb55;
    padding-bottom: 0.1em;
}
h2 {
    color: #7cfe81;
    border-bottom: 2px solid #3e114777;
    padding-bottom: 0.17em;
}
h3, h4 {
    color: #efbfff;
}

button,
input[type="submit"],
input[type="button"] {
    background: linear-gradient(180deg, #ff6f36 10%, #b6006b 100%);
    color: #fff;
    border: 2.5px solid #efbfff;
    box-shadow: 0 2px 8px #ff00be33;
    font-family: 'EB Garamond', 'Georgia', serif;
    border-radius: 9px;
    font-weight: bold;
    text-shadow: 0 1px 0 #b6006b55, 0 0 4px #efbfff66;
    transition: background 0.16s, box-shadow 0.22s, border 0.16s;
}
button:hover,
input[type="submit"]:hover {
    background: linear-gradient(180deg, #7cfe81 10%, #582579 90%);
    color: #22172a;
    border-color: #7cfe81;
    box-shadow: 0 0 12px #7cfe8155;
}
button:active,
input[type="submit"]:active {
    background: linear-gradient(180deg, #ffb04a 10%, #e45ffb 100%);
    color: #2a1433;
    box-shadow: 0 1px 2px #efbfff44;
}

input,
textarea,
select {
    background: #1d1321;
    color: #efbfff;
    border: 1.7px solid #7cfe81;
    border-radius: 8px;
    box-shadow: 0 1px 6px #7cfe8140;
    font-family: 'EB Garamond', 'Georgia', serif;
    width: 100%;
    box-sizing: border-box;
}
input:focus,
textarea:focus,
select:focus {
    border-color: #e45ffb;
    background: #1e2336;
    outline: 2px solid #e45ffb55;
}

pre, code, pre code {
    background: #25162c !important;
    color: #7cfe81 !important;
    font-family: 'Fira Mono', 'JetBrains Mono', 'Consolas', monospace;
    border-radius: 10px;
    box-shadow: 0 3px 12px #efbfff22;
    font-size: 1em;
    letter-spacing: 0.02em;
}

.current, .active {
    color: #1e1a27 !important;
    background: linear-gradient(90deg, #7cfe81 60%, #ff6f36 100%);
    box-shadow: 0 0 12px #efbfff77;
    border-radius: 8px;
    font-weight: bold;
}

footer {
    background: linear-gradient(90deg, #22172a 60%, #2e082c 100%);
    color: #efbfff;
    border-top: 2px solid #582579;
    font-family: 'EB Garamond', 'Georgia', serif;
    letter-spacing: 0.04em;
    position: relative;
}

footer::after {
    /* Bat silhouettes! Use a subtle SVG as a border. */
    content: "";
    display: block;
    width: 100%;
    height: 30px;
    background: url('data:image/svg+xml;utf8,<svg width="200" height="30" viewBox="0 0 200 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 20 Q15 15 20 20 T30 20 Q35 15 40 20 T50 20 Q55 15 60 20 T70 20 Q75 15 80 20 T90 20 Q95 15 100 20 Q105 15 110 20 Q115 15 120 20 Q125 15 130 20 Q135 15 140 20 Q145 15 150 20 Q155 15 160 20 Q165 15 170 20 Q175 15 180 20 Q185 15 190 20" stroke="%23ff6f36" stroke-width="3" fill="none"/><circle cx="20" cy="24" r="2" fill="%23ff6f36"/><circle cx="180" cy="24" r="2" fill="%23ff6f36"/></svg>') repeat-x bottom left / auto 30px;
    margin-top: 0.6em;
    opacity: 0.8;
}

::-webkit-scrollbar-thumb {
    background: #582579;
    border-radius: 7px;
}
::-webkit-scrollbar-track {
    background: #2a1433;
}

.help-entry {
    background: #22172a;
    border: 2px solid #582579;
    box-shadow: 0 2px 13px #7cfe8140;
}
.help-entry .doc {
    background: #1a1222;
    color: #ff6f36;
    border-left: 3px solid #ff6f36;
}
.help-entry pre, .help-entry pre code.python {
    background: #25162c;
    color: #efbfff;
    box-shadow: 0 1px 3px #ff00be22;
}
.help-entry a {
    color: #7cfe81;
    text-shadow: 0 1px 2px #22172a;
}
.help-entry a:hover {
    background: #2a1433;
    color: #ff6f36;
}

/* Easter egg: QR code as a neon icon */
aside img[src*="qr"] {
    border-radius: 13px;
    border: 2.5px solid #e45ffb;
    box-shadow: 0 0 22px #ff00be88, 0 0 9px #7cfe81bb;
    background: #180c1e;
    padding: 6px;
    margin-bottom: 1.7em;
}

/* Spooky web border for main container (optional, can comment out if too much) */
main {
    border: 4px solid #3e1147;
    box-shadow: 0 0 24px #180c1e99;
    position: relative;
}
main::before {
    content: "";
    display: block;
    position: absolute;
    top: -18px; left: 0;
    width: 100%;
    height: 18px;
    background: url('data:image/svg+xml;utf8,<svg width="100" height="18" viewBox="0 0 100 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,16 Q10,2 20,16 T40,16 T60,16 T80,16 T100,16" stroke="%237cfe81" stroke-width="2" fill="none"/></svg>') repeat-x;
    z-index: 5;
    opacity: 0.28;
    pointer-events: none;
}

hr {
    border: none;
    border-top: 2px solid #ff6f3699;
    margin: 2em 0 1.2em 0;
    opacity: 0.9;
}

/* Gothic inline code */
code {
    background: #25162c;
    color: #7cfe81;
    border-radius: 6px;
    border: 1.5px solid #e45ffb88;
    font-family: 'JetBrains Mono', 'Fira Mono', 'Menlo', monospace;
    font-size: 0.98em;
}

textarea.help {
    background: #25162c;
    color: #efbfff;
    border: 1.6px solid #7cfe81;
}

@media (max-width: 650px) {
    main { border-radius: 0; box-shadow: none; padding: 0.5em; }
    aside { padding: 1em 0.5em; }
}

