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; height: 40px; line-height: 40px; margin: 0; background-color: inherit; width: 100%; }
h2 { z-index: 20; }
h3 { z-index: 30; }
.gl { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 8px; width: 100%; box-sizing: border-box; }
.pv { min-width: 108px; display: flex; }
.pv a { text-decoration: none; display: block; width: 100%; background-color: #fff; border: 2px solid #ccc; padding: 4px; border-radius: 8px; text-align: center; transition: all 0.4s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.pv a:hover { background-color: #eee; border-color: red; color: red; text-decoration: none; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transform: translateY(-2px); }
a { text-decoration: none; }
a:hover { color: red; text-decoration: underline; }
footer { font-size: 12px; width: 100%; padding-top: 8px; padding-bottom: 32px; }