/* Halloween theme (on top of the dark theme): night purple, pumpkin orange, and a moonlit graveyard in the header. */
body.halloween{background:#140d1a radial-gradient(ellipse at 50% -10%,rgba(122,52,160,.28),transparent 60%) fixed;color:#f6eefc;--surface:#22172c;--muted:#c9b6d8;--line:#4e3762;color-scheme:dark}
body.halloween header{background:
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='40' viewBox='0 0 1600 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff3c4' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff3c4' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='1180' cy='16' r='26' fill='url(%23g)'/%3E%3Ccircle cx='1180' cy='16' r='11' fill='%23f7e7a8'/%3E%3Ccircle cx='1185' cy='13' r='10' fill='%23f7e7a8' opacity='.0'/%3E%3Cg fill='%230b0610' opacity='.9'%3E%3Cpath d='M1090 12c3-3 6-3 8 0 2-2 3-2 4 0 1-2 2-2 4 0 2-3 5-3 8 0-3 0-5 2-6 4-2-1-3-1-4 1-1-2-2-2-4-1-1-2-3-4-6-4-1 0-3 0-4 0z'/%3E%3Cpath d='M1250 8c2-2 4-2 6 0 1-1 2-1 3 0 1-1 2-1 3 0 2-2 4-2 6 0-2 0-4 1-5 3-1-1-2-1-3 1-1-1-2-1-3 0-1-2-2-3-4-3-1 0-2 0-3-1z'/%3E%3Cpath d='M1330 18c2-2 4-2 5 0 1-1 2-1 2 0 1-1 2-1 2 0 2-2 4-2 5 0-2 0-3 1-4 2-1-1-2-1-2 1-1-1-2-1-2 0-1-1-2-2-3-2-1 0-2 0-3-1z'/%3E%3C/g%3E%3Cg fill='%23070409'%3E%3Cpath d='M1400 40v-10q5-8 10 0v10zM1430 40v-14h3v-4h3v4h3v14zM1470 40v-8q6-7 12 0v8zM1505 40v-12q4-6 8 0v12zM1540 40v-15h3v-4h3v4h3v15zM1575 40v-9q6-7 12 0v9z'/%3E%3Cpath d='M1380 40c40-6 90-9 220-6v6z'/%3E%3C/g%3E%3C/svg%3E") right 240px center/1600px 40px no-repeat,
 linear-gradient(180deg,#1d1027,#120a18);border-bottom:2px solid #f07b16}
@media(max-width:1399px){body.halloween header{background:linear-gradient(180deg,#1d1027,#120a18)}}
body.halloween .logo{color:#ffb15c}
body.halloween .topnav a:hover,body.halloween .topnav a.active{color:#ffb15c}
body.halloween aside{background:#1a1121;border-right:1px solid #3a2549}
body.halloween #side-nav a:hover,body.halloween #side-nav a.active{background:#3a2547}
body.halloween #side-nav a.active{box-shadow:inset 3px 0 0 #f07b16}
body.halloween main a:not([class]){color:#ffb15c}
body.halloween main a:not([class]):hover{color:#ffd09a}
body.halloween .chat-toggle,body.halloween .chat-box{background:#22172c;border-color:#4e3762}
body.halloween .online{border-color:#140d1a}
body.halloween .play,body.halloween .s20-save,body.halloween .green,body.halloween .lg20-submit.green{background:#f07b16;color:#fff;border-color:#f07b16}
body.halloween .play:hover,body.halloween .s20-save:hover,body.halloween .green:hover,body.halloween .lg20-submit.green:hover{background:#ff9536;border-color:#ff9536}
body.halloween .outline{border-color:#8a6aa3}
body.halloween .s20-nav a.selected{border-left-color:#f07b16}
body.halloween .tabs button.selected,body.halloween .profile-tabs a.selected,body.halloween .g19-tabs a.selected{border-color:#f07b16;box-shadow:inset 0 -3px 0 #f07b16}
body.halloween .sr20-menu{background:#22172c;border-color:#4e3762}
body.halloween .sr20-menu li.active{background:#3a2547}
body.halloween input,body.halloween select,body.halloween textarea{border-color:#5d4473}
body.halloween button:focus-visible,body.halloween a:focus-visible,body.halloween input:focus-visible,body.halloween select:focus-visible{outline-color:#f07b16}
body.halloween ::selection{background:#f07b16;color:#140d1a}
/* Home: "Happy Halloween!" banner, a 2020 take on the classic Halloween site header. */
.hw20-banner{position:relative;overflow:hidden;height:170px;margin:0 0 18px;border-radius:4px;background:#b8571a url('assets/halloween-banner.webp') center 62%/cover no-repeat;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.hw20-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,12,4,.62) 0%,rgba(40,12,4,.25) 45%,transparent 70%)}
.hw20-text{position:relative;padding:34px 30px 0}
.hw20-banner h2{margin:0;font-size:40px;font-weight:800;letter-spacing:.5px;color:#fff;text-shadow:0 3px 0 #7a2a05,0 0 16px rgba(0,0,0,.45)}
.hw20-banner p{margin:6px 0 0;font-size:16px;font-weight:600;color:#ffe6c7;text-shadow:0 1px 3px rgba(0,0,0,.6)}
@media(max-width:650px){.hw20-banner{height:120px}.hw20-text{padding:22px 16px 0}.hw20-banner h2{font-size:28px}.hw20-banner p{font-size:13px}}