:root{--main-blue: #223657;--darker-blue: #161a3f;--med-blue: #304d7a;--black-blue: #191822;--white-blue: #f9fbff;--white-blue-transparent: #rgba(249, 251, 255, .7);--gray-blue: #bfc3c9;--med-green: #2bbeb0;--hl-green: #26e4ce;--darker-green: #3c7288;--gray-green: #566266;--sdg-10: #df1a82;--white-yellow: #fff9cc;--dark-shadow: 0 0 6px var(--black-blue);--dark-shadow-left: -4px 0px 4px var(--black-blue);--dark-shadow-inset: inset 0 0 6px var(--black-blue);--white-border: 2px solid var(--white-blue);--black-border: 2px solid var(--black-blue);--title-font: komika-hand;--body-font: komika-text;--cover-font: the-bold-font}@font-face{font-family:komika-hand;src:url(https://charlcharlo.github.io/assets/KOMIKAH_-3c2cd332.ttf)}@font-face{font-family:komika-title;src:url(https://charlcharlo.github.io/assets/KOMTITA_-a8430eca.ttf)}@font-face{font-family:komika-text;src:url(https://charlcharlo.github.io/assets/KOMTXT__-9fd8d1e7.ttf)}@font-face{font-family:the-bold-font;src:url(https://charlcharlo.github.io/assets/THEBOLDFONT-2874ddbd.ttf)}*{box-sizing:border-box;margin:0;padding:0;position:relative}html{font-family:var(--body-font);overflow-x:hidden}h1,h2,h3,h4{font-family:var(--title-font)}button,a{cursor:pointer;transition:.3s}.row-start{display:flex}.row-end{display:flex;justify-content:right;gap:10px}.row-center{display:flex;justify-content:center;align-items:center;gap:10px}.row-center-flex{display:flex;justify-content:center;align-items:inherit;gap:10px;flex-wrap:wrap}.row-between{gap:10px;display:flex;justify-content:space-between}.col-start{display:flex;flex-direction:column;align-items:center}.col-between{display:flex;flex-direction:column;justify-content:space-between}.col-end{display:flex;flex-direction:column;justify-content:end}.centered-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.invisibutton{border:none;background-color:transparent}.invisibutton>svg{height:30px;width:30px}.fit-height{height:100%;width:100%}.title{font-size:4rem;font-family:var(--title-font);font-style:italic}.title-smaller{font-size:3rem;font-family:var(--title-font);font-style:italic}.sub-title{font-size:1.5rem;font-family:var(--title-font);font-style:italic}.body-text{white-space:pre-line}@media (max-width: 800px){body{overflow-x:hidden}}@media (max-width: 500px){.title{font-size:3rem}.title-smaller{font-size:1.8rem}.sub-title{font-size:1.2rem}}.pdf-button{background-color:transparent;border:none;font-size:24px;font-weight:800;color:var(--white-blue);font-family:var(--title-font)}.pdf-button:hover{color:var(--hl-green)}.pdf-button>svg{height:40px;width:40px}.lang-stamp{gap:0;outline:var(--black-border)}.stamp-button{width:220px;height:70px;background-color:var(--black-blue);color:var(--white-blue);font-family:var(--title-font);border:var(--white-border);font-size:30px;padding:0 10px;text-align:center}.stamp-button:hover{background-color:var(--sdg-10)}.stamp-icon-outline{background-color:var(--white-blue);border-radius:35px;width:70px;height:70px;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.stamp-icon{background-color:var(--black-blue);color:var(--white-blue);text-align:center;width:64px;height:64px;border-radius:32px}.stamp-icon svg{margin-top:2px;width:60px;height:60px}@media (max-width: 500px){.stamp-button{width:150px;height:50px;font-size:20px}.stamp-icon-outline{border-radius:25px;width:50px;height:50px}.stamp-icon{width:44px;height:44px;border-radius:22px}.stamp-icon svg{width:40px;height:40px}}.scroll-title{color:var(--white-blue);text-shadow:1px 1px 1px var(--black-blue);font-size:30px}.down-arrow{color:#e78c06}.down-arrow>svg{animation:float 1s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes float{0%{margin-top:5px;margin-bottom:0}50%{margin-top:0;margin-bottom:5px}to{margin-top:5px;margin-bottom:0}}.cover-page{height:100vh;background-image:url(https://charlcharlo.github.io/assets/Sne-cover-74226dc4.jpg);background-position:center;background-repeat:no-repeat;background-size:cover;gap:20px;padding:80px 0 0}.cover-page.scroll-locked{overflow-y:hidden}.title-wrapper{width:100%;height:100%;position:absolute;top:0;left:0}.title-image{width:100%;height:100%;object-fit:cover}.sub-header{padding:0 30px;width:100%}.title-sub{color:var(--white-blue);font-family:var(--cover-font);font-size:50px;animation:fade-in 1s}.lang-container{margin-bottom:60px}.cover-page .pdf-button{background-color:var(--black-blue);padding:10px 20px;outline:var(--black-border);border:var(--white-border);height:max-content}.cover-page .pdf-button:hover{border:2px solid var(--hl-green)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (max-width: 800px){.cover-page{background-size:cover}.title-sub{font-size:36px}}@media (max-width: 500px){.cover-page{background-image:url(https://charlcharlo.github.io/assets/Sne-cover-mobi-d9cb2a87.jpg)}.title-image{object-fit:contain;object-position:top;width:100%;margin-top:70px}.sub-header{padding:10px 20px}.title-sub{font-size:24px}.cover-page .pdf-button{padding:10px}.cover-page .pdf-button svg{height:30px;width:30px}}.jump-to-page-wrapper{position:fixed;z-index:101;top:0;width:100%;height:60px;color:#fff}.jump-to-page{padding:10px;background-color:#1b283d;border-radius:10px}.jump-to-page>input{width:40px}.panel-nav-buttons{height:60px;display:flex;justify-content:center;align-items:center;margin-top:10px}.panel-nav-buttons.mobile{position:absolute;bottom:30px}.panel-modal .invisibutton{color:var(--white-blue);padding:0 20px;background-color:var(--main-blue);height:100%;transition:.3s;border-radius:30px}.cancel-button{position:absolute;top:10px;right:10px;width:40px;height:40px!important;border-radius:20px;box-shadow:var(--dark-shadow);outline:var(--white-border)}.cancel-button.visible,.panel-nav-buttons.visible{animation:fade .5s;filter:opacity(100%)}.cancel-button.hidden,.panel-nav-buttons.hidden{animation:fade .5s reverse;filter:opacity(0)}.panel-modal .invisibutton:hover{background-color:var(--med-blue)}.panel-nav-buttons .invisibutton:first-of-type{border-radius:30px 0 0 30px}.panel-nav-buttons .invisibutton:last-of-type{border-radius:0 30px 30px 0}.panel-window{align-items:center;flex-grow:1;object-fit:contain;overflow-y:hidden;margin:0;width:100%;max-width:2000px;height:100%;overflow-x:hidden;background-color:var(--white-blue)}.panel-img{width:100%;height:100%;box-sizing:border-box;object-fit:contain}.panel-img.landscape{max-height:none;max-width:100%}.panel-img[data-slide=to-right]{animation:slide-right .3s ease-in}.panel-img[data-slide=to-left]{animation:slide-left .3s ease-in}.panel-modal{position:fixed;left:0;right:0;margin:auto;background-color:var(--white-blue);border:none;height:calc(100vh - 40px);padding:20px;width:90vw;box-shadow:var(--dark-shadow)}.panel-modal>.col-between{width:100%;height:100%}::backdrop{background-color:#090c1399}.panel-window>.centered-container{height:100%}.loader-wrapper{color:var(--main-blue);animation-name:loader;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:linear;height:60px;width:60px}.loader-wrapper>svg{height:100%;width:100%}@media (max-width: 800px){.panel-modal{width:100vw;max-width:unset;margin:auto 0;height:600px;padding:0}.panel-modal>.col-between{gap:0;height:100%}.panel-window{overflow-x:scroll;text-align:center;width:100%}.panel-img{height:100%;width:unset;max-width:800px;margin:auto}.panel-window::-webkit-scrollbar{background:var(--gray-blue)}.panel-window::-webkit-scrollbar-thumb{background:var(--main-blue);border:var(--black-border)}}@keyframes loader{0%{transform:rotate(0)}50%{transform:rotate(180deg);color:var(--darker-blue)}to{transform:rotate(360deg);color:var(--main-blue)}}@keyframes fade{0%{filter:opacity(0%)}to{filter:opacity(100%)}}@keyframes fade-out{0%{display:flex;filter:opacity(100%)}to{filter:opacity(0%);display:none}}@keyframes slide-right{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slide-left{0%{transform:translate(100%)}to{transform:translate(0)}}.full-comic-page{width:100vw;max-width:1000px;height:140vw;max-height:1400px}.full-comic-img{position:absolute;top:0;left:0;width:100%;height:100%}.panel-multi{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template:repeat(12,8.33fr) / repeat(12,8.33fr);padding:10px;box-shadow:var(--dark-shadow)}.clickable-panel{width:100%;height:100%}.backdrop{position:fixed;z-index:101;width:100vw;height:100vh;top:0;left:0;background-color:#090c1333}.panel-modal-saf{position:fixed;top:0;bottom:0;left:0;right:0;margin:auto;width:100vw;z-index:102}.panel-modal-saf .row-between{width:100%}.panel-modal-saf .invisibutton{color:#fff}.splash-top{position:absolute;top:0;left:0}.splash-bottom{position:absolute;bottom:0;right:0}.full-page.char{padding:20px 0;width:100vw;background-color:#201646}.char .title-smaller,.char .body-text{color:var(--white-blue)}.sne .char-img,.glow .char-img,.lit .char-img,.om .char-img,.sprite .char-img{max-width:300px}.sne{background-color:#1a3668;margin:20px 0}.om{background-color:#5fba46}.glow{background-color:#fdb714}.sprite{background-color:#23a9d2}.lit{background-color:#b13239}.terra{background-color:#48773c}.char-strip{margin:30px 0}.char-card{max-width:1200px;padding:10px 20px;gap:10px}.char-name{font-size:1.5rem}.char-card .body-text{text-align:left}.char-img{margin:-20px 10px -20px 0;object-fit:contain;max-width:100vw;float:left}.terra-wrapper .char-img{height:100%}.reverse{float:right;margin-left:10px;margin-right:0}.keepers{gap:0}@media (max-width: 900px){.terra-wrapper .char-img{margin-bottom:10px}}@media (max-width: 500px){.char{margin-top:20px}.char-card{display:block;padding:0}.char-card .body-text{margin:0 10px 10px}.char-img{margin:0;max-width:100vw!important}}.full-page.editor{width:100vw;background-color:#201646}.editor .title-smaller,.editor .body-text{color:var(--white-blue)}.editor .body-text{text-align:justify}.sig-container{width:100%;text-align:left;margin:10px 0}.preface{box-shadow:var(--dark-shadow);padding:60px}.preface-bg{position:absolute;top:0;left:0;width:100%;height:100%}.face-img{width:25%;object-fit:contain}.krs-quote{max-width:50%;font-size:1.5rem;text-align:center}.preface-sig{width:15%}.quote-container{flex-grow:1;display:flex;justify-content:right}.full-page{min-height:100vh;width:100vw;text-align:center;padding:0 5%;overflow:hidden}.sdg-titles{text-align:center;border-bottom:6px solid var(--black-blue);padding-bottom:10px;width:100%}.sdg-title-img{width:100%;max-width:600px}.sdg-icon{width:100px;height:100px}.sdg-container{max-width:1000px;margin:0 auto 20px}.sdg-text{font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;margin:0 15%}@media (max-width: 500px){.sdg-icon{width:50px;height:50px}.full-page{padding:0 10px}.sdg-text{margin:0 10px}}.share{margin-top:60px}.share-buttons{margin-top:10px}.back-to-top{padding:10px;width:300px;border:var(--black-border)}.zoom-window{transition:.3s;width:100vw;height:140vw;clip-path:polygon(0 0,0 100%,100% 100%,100% 0);overflow-y:hidden;overflow-x:hidden;box-shadow:var(--dark-shadow)}.zoom-window>.page-img{position:absolute;width:100%;top:0;bottom:0;margin:auto 0;transition:.3s}.zoom-window.portrait>.page-img{top:0;left:0;margin:0}.zoom-window.zoomed{overflow-y:scroll;overflow-x:scroll}.zoom-window.zoomed>.page-img{width:200vw}.back-board{width:200vw}.zoom-btn-wrapper{position:absolute;top:70px;left:0;padding-right:10px;width:100%}.zoom-toggle,.zoom-btn-wrapper>h2{z-index:5}.zoom-toggle>svg{width:40px;height:40px;color:var(--white-blue);filter:drop-shadow(0 0 3px var(--black-blue))}.zoom-hint{text-align:center;width:100vw;color:var(--gray-blue)}.splash-page{height:90vh;max-width:100vw;object-fit:contain;box-shadow:var(--dark-shadow)}.splash-page.portrait{width:100vw;max-width:1000px;height:1400px;object-fit:cover}@media (max-width: 1000px){.splash-page.portrait{height:140vw}}.page-wrapper{min-height:100vh;padding:20px}.page-wrapper>.page-img{max-width:100%}@media (max-width: 500px){.page-wrapper{min-height:100vh;padding:20px 0}}.page-nav-wrapper{margin-top:20px}.nav-button{width:250px;height:50px}.nav-button>img{height:100%;width:100%;object-fit:cover;filter:brightness(.7);transition:.3s;outline:2px solid var(--black-blue)}.nav-button>p{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;font-family:var(--title-font);font-size:20px;font-weight:700;color:var(--white-blue);text-shadow:1px 1px 1px var(--black-blue)}.nav-button:hover>p{color:var(white);text-shadow:1px 1px 1px var(--black-blue),-1px -1px 1px var(--black-blue)}.nav-button:hover>img{filter:none}.invisibutton-main{background-color:transparent;border:none;position:absolute;top:0;left:0;width:100%;height:100%}.invisibutton-wrapper{transition:.3s}.invisibutton-wrapper svg{height:30px;width:30px}.jtp-wrapper{flex-grow:1;max-width:300px}.jtp-input{font-family:var(--title-font);color:#aec6ce;text-align:center;width:100%;padding:10px;border:none;background-color:var(--med-blue);box-shadow:0 0 4px var(--black-blue) inset;transition:.3s ease-in}.jtp-input::placeholder{color:#aec6ce;transition:.3s ease-in}.jtp-input:focus{background-color:var(--white-blue);color:var(--black-blue)}.jtp-input:focus+.jtp-results,.jtp-results:hover{transform:scaleY(1);visibility:visible}.jtp-results{visibility:hidden;transform:scaleY(0);transform-origin:top;transition:.3s ease-in;position:absolute;width:100%;max-height:200px;top:100%;box-shadow:var(--dark-shadow);overflow-y:scroll}.jtp-results::-webkit-scrollbar{background:var(--darker-blue)}.jtp-results::-webkit-scrollbar-thumb{background:var(--med-blue);box-shadow:0 0 2px var(--black-blue) inset;border:1px solid var(--darker-blue)}.jtp-results::-webkit-scrollbar-thumb:hover{background:var(--hl-green)}.jtp-button{width:100%;display:block;background-color:var(--med-blue);border:1px solid var(--darker-blue);padding:5px 10px;font-family:var(--body-font);color:var(--white-blue);transition:padding .3s}.jtp-name{font-family:var(--title-font);font-size:12px;font-weight:700;color:var(--white-blue);text-shadow:1px 1px 1px var(--black-blue)}.jtp-img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;filter:opacity(0);transition:filter .3s}.jtp-button:hover{padding:10px;color:var(--black-blue)}.jtp-button:hover .jtp-img{filter:opacity(100)}.jtp-button:hover .jtp-name{font-size:20px;transition:.3s}.lang-selector input{display:none}.lang-selector>div{align-items:center;padding:5px 0;font-weight:400;font-size:16px;box-shadow:none}.lang-selector>input+div>svg{display:block;visibility:hidden;height:15px;width:15px;margin-right:10px}.lang-selector>input:checked+div>svg{visibility:visible}.side-bar{padding:70px 20px 20px;transform:scaleX(1);transform-origin:right;transition:.3s ease-out;height:100vh;background-color:var(--main-blue);position:fixed;right:0;z-index:99;color:var(--white-blue);box-shadow:var(--dark-shadow)}.side-bar.hidden{transform:scaleX(0)}.panel-section{transition:.1s;margin-bottom:20px}.side-bar.hidden .panel-section{opacity:0}.panel-link{color:var(--white-blue);text-decoration:none;display:block;margin:5px}.panel-link:hover,.panel-section .lang-selector:hover>input+div{color:var(--hl-green)}.side-bar .pdf-button{text-shadow:none}.side-bar .pdf-button svg{height:30px;width:30px;filter:none}.nav-bar{position:fixed;z-index:100;width:100vw;background-color:var(--main-blue);color:var(--white-blue);padding:10px 20px;align-items:center;transition:.3s ease-out;height:60px;box-shadow:var(--dark-shadow)}.nav-bar .invisibutton{color:#e8ba06;display:flex;align-items:center}.nav-bar .invisibutton>svg{height:100%}.nav-bar .invisibutton-wrapper{color:var(--white-blue)}.nav-bar .invisibutton-wrapper:hover{color:var(--hl-green)}.nav-bar.hidden{transform:scaleY(0);transform-origin:top}.nav-bar.shown{transform:scaleY(1);transform-origin:top}.nav-bar.hidden h1,.nav-bar.hidden div,.nav-bar.hidden select,.nav-bar.hidden button{display:none}.nav-title-img{height:100%}.nav-bar-btn{padding:0;width:150px;height:100%}.menu-wrapper{width:150px}@media (max-width: 500px){.nav-bar{padding:10px 0}.nav-bar-btn{width:auto;margin-left:10px}.nav-title-img{height:100%}.nav-bar>.row-end{width:max-content}}