body{background:#000018 url(stars.svg) repeat;color:#fff;font-family:"Comic Sans MS","Times New Roman",serif;margin:0}
.wrap{width:760px;margin:20px auto;background:rgba(0,0,40,.85);border:4px ridge #c0c0c0;padding:12px}
h1{font-family:Impact,Arial Black,sans-serif;color:#ff0;text-align:center;text-shadow:3px 3px #f0f;font-size:40px;margin:8px}
h2{color:#0ff;border-bottom:2px dashed #f0f}
a{color:#0ff}a:visited{color:#f6f}
.nav{text-align:center;background:#000;border:2px outset #888;padding:6px;font-weight:bold}
.nav a{margin:0 10px}
.marquee{overflow:hidden;white-space:nowrap;background:#000;color:#0f0;font-family:monospace;border:2px inset #888;padding:4px}
.marquee span{display:inline-block;padding-left:100%;animation:scroll 14s linear infinite}
@keyframes scroll{to{transform:translateX(-100%)}}
.blink{animation:b 1s steps(1) infinite}@keyframes b{50%{visibility:hidden}}
.counter{font-family:"Courier New",monospace;background:#000;color:#f00;border:2px inset #888;padding:2px 6px;letter-spacing:3px;font-size:20px}
.ph{color:#fc6;font-style:italic}
.center{text-align:center}.btns img{margin:3px;image-rendering:pixelated}
small{color:#aaa}
textarea,input{background:#001;color:#0f0;border:2px inset #888;font-family:monospace}
.entry{border:1px dotted #0ff;margin:6px 0;padding:6px}
hr{border:0;height:4px;background:linear-gradient(90deg,red,orange,yellow,lime,cyan,blue,magenta)}

html{-webkit-text-size-adjust:100%}img{max-width:100%;height:auto}
@media (max-width:800px){
.wrap{width:auto;max-width:760px;margin:8px;padding:10px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));box-sizing:border-box}
body{font-size:17px;line-height:1.45;overflow-x:hidden}
h1{font-size:30px;line-height:1.1;word-wrap:break-word}h2{font-size:22px}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:0}
.nav a{font-size:16px;margin:0;padding:10px 12px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;background:#001;border:2px outset #888;text-decoration:none}
.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.btns p,.btns small{flex-basis:100%}
.btns a{display:inline-block;padding:4px}.counter{font-size:18px}
textarea,input{max-width:100%;box-sizing:border-box;font-size:16px}
a[href^="mailto"]{word-break:break-all;display:inline-block;padding:8px 0}
}
html,body{max-width:100%;overflow-x:hidden}
.wrap{max-width:calc(100vw - 16px);box-sizing:border-box}
.marquee{max-width:100%;position:relative;contain:paint}
.marquee span{will-change:transform}