body { font-family: "Comic Sans MS", "Comic Sans", cursive; 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; }