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%; white-space: nowrap; }
h2 { z-index: 20; }
h3 { z-index: 30; }
.gl { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 16px; width: 100%; box-sizing: border-box; }
.pv { width: 200px; min-height: 200px; display: flex; flex-direction: column; justify-content: center; }
.pv a { text-decoration: none; display: block; position: relative; z-index: 1; }
.pv a:hover { z-index: 100; }
.pv img { border: 0; display: block; max-width: 192px; max-height: 192px; width: auto; height: auto; margin: 0 auto; transition: transform 0.4s ease-out, box-shadow 0.4s ease; pointer-events: none; }
.pv img.is-large { transform: scale(2); box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 1000; position: relative; }
a { text-decoration: none; }
a:hover { color: red; text-decoration: underline; }
footer { font-size: 12px; width: 100%; padding-top: 8px; padding-bottom: 32px; }