@import url("https://unpkg.com/ress@5.0.2/dist/ress.min.css");@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap");@import url("https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap");body{text-align:center}body.modal-open{overflow:hidden;height:100vh;position:fixed;width:100%}.character{max-width:600px;text-align:center;margin:70px auto 0;padding:10px}.character h1{font-family:Kosugi Maru,cursive;font-weight:700;font-size:2.2rem;margin-bottom:30px}.character h2,.description{display:inline-block;margin:15px auto 25px;text-align:center;max-width:90%}.character h2{font-family:Kosugi Maru,cursive;display:block;margin-left:auto;margin-right:auto;text-align:center;margin-bottom:10px;font-size:1.9rem}.main-image{width:70%;height:auto;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.3);cursor:pointer;margin:0 auto 15px}.click{font-size:1.2rem;font-family:Kosugi Maru,sans-serif}.thumbnails{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:40px}.thumbnail{width:60px;height:60px;margin:0 5px;object-fit:cover;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:border .3s ease}.thumbnail:hover{border:2px solid #999}.thumbnail.active{border:2px solid blue}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:9999}.modal,.modal-content{display:flex;justify-content:center;align-items:center}.modal-content{position:relative;max-width:90%;max-height:90%;flex-direction:column;animation:fadeIn .3s ease;padding-top:50px}.modal-image{display:block;margin:0 auto;width:80%;max-width:600px;border-radius:10px;opacity:0;transition:opacity 1s ease}.description{white-space:pre-line;text-align:center}.modal-image.fade-in{opacity:1}.close-button{position:absolute;top:12px;right:12px;background:white;border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);z-index:10;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.close-button:after,.close-button:before{content:"";position:absolute;width:16px;height:2px;background-color:#333;transition:all .3s ease}.close-button:before{transform:rotate(45deg)}.close-button:after{transform:rotate(-45deg)}.close-button:hover:before{transform:rotate(135deg)}.close-button:hover:after{transform:rotate(-135deg)}.close-button:hover{background-color:#f5f5f5;transform:scale(1.1)}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width:600px){.character{padding:8px}.character h1{margin-top:10px;font-size:1.8rem}.character h2{font-size:1.5rem;margin-top:10px;margin-bottom:5px}.main-image{width:90%}.click{font-size:1rem}.thumbnail{width:50px;height:50px;margin:4px}.description{font-size:.95rem;padding:0 8px}.modal-content{max-width:95%;max-height:85%;padding-top:50px}.modal-image{width:95%}.close-button{top:8px;right:8px;width:28px;height:28px;font-size:18px}}