/* real Comic Sans where the device has it; otherwise Comic Neue (self-hosted, OFL). NEVER the generic "cursive" (turns into a ligature script on phones) */
@font-face { font-family: "Comic Neue"; font-weight: 400; font-display: swap; src: url("fonts/comic-neue-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Comic Neue"; font-weight: 700; font-display: swap; src: url("fonts/comic-neue-latin-700-normal.woff2") format("woff2"); }
body { font-family: "Comic Sans MS", "Comic Sans", "Comic Neue", "Chalkboard SE", sans-serif; font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; background-image: radial-gradient(#ffffff22 1px, transparent 1px); background-size: 24px 24px; }
h1, h2, h3 { text-shadow: 2px 2px #000; }
.big { font-size: 22px; padding: 10px 24px; background: #c00; color: #fff; border: 4px outset #f55; cursor: pointer; font-family: inherit; }
.big:active { border-style: inset; }
input, button { font-family: inherit; font-size: 16px; }
.msg { color: #ffff66; min-height: 1.5em; white-space: pre-wrap; }
.door { width: 64px; height: 64px; font-size: 22px; cursor: pointer; font-family: inherit; border: 3px outset #aaa; background: #7a4a1e; color: #fff; }
.door.ready { background: #1faa3a; }
.door.locked { background: #5a2a2a; }
blink { animation: b 1s steps(2, start) infinite; }
@keyframes b { to { visibility: hidden; } }
#doorbody { text-align: left; font-size: 18px; white-space: pre-wrap; }

/* christmas-y headings (Mountains of Christmas, OFL, self-hosted). body stays Comic Sans so it keeps the "made by a beginner" look */
@font-face { font-family: "Mountains of Christmas"; font-weight: 400; font-display: swap; src: url("fonts/mountains-of-christmas-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Mountains of Christmas"; font-weight: 700; font-display: swap; src: url("fonts/mountains-of-christmas-latin-700-normal.woff2") format("woff2"); }
h1, h2, h3, .big { font-family: "Mountains of Christmas", "Comic Sans MS", "Comic Neue", sans-serif; font-weight: 700; letter-spacing: 0.5px; }
h1 { font-size: 2.2em; }