html { scroll-behavior: smooth; }
body { font-family: Arial, sans-serif; margin: 0; background-color: #CCC; color: #000; text-align: center; }
body.c0, h2.c0, h3.c0 { background-color: #FBF; }
body.c1, h2.c1, h3.c1 { background-color: #ECF; }
body.c2, h2.c2, h3.c2 { background-color: #DDF; }
body.c3, h2.c3, h3.c3 { background-color: #CEF; }
body.c4, h2.c4, h3.c4 { background-color: #CFF; }
body.c5, h2.c5, h3.c5 { background-color: #CFC; }
body.c6, h2.c6, h3.c6 { background-color: #EFC; }
body.c7, h2.c7, h3.c7 { background-color: #FFC; }
body.c8, h2.c8, h3.c8 { background-color: #FDC; }
body.c9, h2.c9, h3.c9 { background-color: #FBB; }
h2, h3 { position: sticky; top: 0; width: 100%; height: 32px; line-height: 32px; margin: 0; background-color: inherit; box-sizing: border-box; white-space: nowrap; }
h2 { z-index: 200; }
h3 { z-index: 300; }
p { position: relative; z-index: 10; margin: 0; background-color: inherit; width: 100%; }
img { position: relative; z-index: 50; display: block; max-width: 96%; width: auto; height: auto; margin: 0 auto; background-color: inherit; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
a { text-decoration: none; }
a:hover { color: red; text-decoration: underline; }
footer { font-size: 12px; width: 100%; padding-top: 8px; padding-bottom: 32px; }