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