html { scroll-behavior: smooth; }
body { font-family: Arial, sans-serif; margin: 0; background-color: #CCC; text-align: center; }
h1, h2, h3 { position: sticky; top: 0; height: 40px; line-height: 40px; margin: 0; background-color: #CCC; width: 100%; }
h1 { z-index: 1; }
h2 { z-index: 2; }
h3 { z-index: 3; }
.c0:hover a { background-color: #FBF; }
.c1:hover a { background-color: #ECF; }
.c2:hover a { background-color: #DDF; }
.c3:hover a { background-color: #CEF; }
.c4:hover a { background-color: #CFF; }
.c5:hover a { background-color: #CFC; }
.c6:hover a { background-color: #EFC; }
.c7:hover a { background-color: #FFC; }
.c8:hover a { background-color: #FDC; }
.c9:hover a { background-color: #FBB; }
.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 { background-color: #EEE; text-decoration: none; display: block; width: 100%; 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 { border-color: red; color: red; text-decoration: none; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transform: translateY(-2px); }
p, .left { text-align: left; padding-right: 8px; }
.right { text-align: right; }
.center { text-align: center; }
a { text-decoration: none; }
a:hover { color: red; text-decoration: underline; }
footer { font-size: 12px; width: 100%; padding-top: 8px; padding-bottom: 32px; }