@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme: light dark; }
body { margin: 0; padding: 1rem; font-family: 'Architects Daughter', 'Comic Sans MS', cursive; }
a { color: inherit; }
h1 { text-align: center; margin-bottom: 1rem; }

/* toon page */
body.toon { min-height: 100svh; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
body.toon h1 { font-size: clamp(1.2rem, 4vw, 2rem); margin-bottom: 0; }
body.toon img, body.toon video { max-width: 100%; max-height: 80svh; }

/* index page */
.grid { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.grid a { display: block; }
.grid img { width: 200px; height: 150px; object-fit: cover; display: block; border-radius: 4px; }