*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif;font-size:14px;letter-spacing:2px;font-weight:350}body{overflow:auto}a{color:inherit;text-decoration:none}.page{width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;background-color:#f2f2f2}.tree{display:flex;flex-direction:column;justify-content:space-around;align-items:center;width:100%;min-height:100vh;padding-top:25vh;padding-bottom:10vh;gap:35px}@media (max-width: 1024px){.tree{padding-left:20px;padding-right:20px;padding-bottom:0}}@media (min-width: 320px) and (max-width: 481px){.tree{gap:20px;margin-top:25vh}}.tree__chara{text-align:center;min-width:70px;min-height:70px;max-width:70px;max-height:70px;border-radius:100px;box-shadow:1px 1px 5px #0000003b;background-color:#fff;position:relative;cursor:pointer}.tree__chara:hover{transform:scale(1.022) perspective(1px)}.tree__main-chara{opacity:0;margin-bottom:40px;animation:mainChara 1.9s forwards;cursor:auto}@media (height > 730px){.tree__main-chara{margin-bottom:50px}}.tree__main-chara:hover+.hidden{display:block}@media (min-width: 320px) and (max-width: 481px){.tree{height:fit-content;padding-top:0;padding-left:20px;padding-right:20px}}@keyframes mainChara{0%,90%{opacity:0}to{opacity:1}}.children{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;opacity:0;z-index:3;min-height:190px}@media (min-width: 320px) and (max-width: 481px){.children{width:100%}}div.children div:nth-child(2n){margin-top:120px}@media (height > 730px){div.children div:nth-child(2n){margin-top:140px}}@media (min-width: 320px) and (max-width: 481px){div.children div:nth-child(2n){margin-top:0;transform:translate(-10px)}}@media (min-width: 320px) and (max-width: 481px){div.children div:nth-child(odd){margin-top:50px}}.arrows{opacity:0}.animation{animation:1.2s fadein 1s forwards}.animationArrows{animation:2.3s fadein 1s forwards}.status{text-align:left;position:absolute;min-width:max-content;top:-65%;left:0;border:1px solid gray;border-radius:15px;background-color:#f2f2f2;padding:5px 10px}.status p{font-size:12px;font-weight:400}.charainfo{z-index:6;position:absolute;top:24%;bottom:50%;right:55%}.charainfo div{border:1px solid gray;border-radius:10px;padding:6px 10px;background-color:#fff;display:flex;flex-direction:column;gap:3px}.charainfo div p{font-size:12px}.charainfo .charaname{font-weight:600}@media (min-width: 320px) and (max-width: 1024px){.charainfo{position:static;order:-1;z-index:4}.charainfo.hidden{display:block}}.hidden{display:none}.related-charas:hover .hidden{display:block}@media (min-width: 320px) and (max-width: 1024px){.related-charas:hover .hidden{display:none}}.tree__chara:hover+.hidden{display:block}.legend{position:relative;display:flex;gap:5px;width:fit-content;height:fit-content;border:1px solid gray;border-radius:10px;background-color:transparent;padding:5px 10px;font-size:12px}.legend p{font-size:12px;font-weight:500}.legend p:after{content:"  |";color:#000}@media (min-width: 320px) and (max-width: 481px){.legend{flex-wrap:wrap;justify-content:center;align-items:center}}div.legend :nth-child(1){color:#ff993f}div.legend :nth-child(2){color:#1c89b8}div.legend :nth-child(3){color:#d45f9e}div.legend :nth-child(4){color:#8d2133}div.legend :nth-child(5){color:gray}div.legend :last-child:after{content:""}.home{padding-top:10px;display:inline-block;width:100%;text-align:center}.home__link{font-size:12px;font-weight:500}.home__link:hover{font-weight:600;background:linear-gradient(45deg,#e85ca7 30%,#e8b551,#1c89b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:600% 600%;animation:linkAnimation 3s infinite}.legend-box{transform:translateY(-15px)}@media (min-width: 320px) and (max-width: 669px){.border-romance{border:2px solid #D45F9E}.border-friend{border:2px solid #1c89b8}.border-family{border:2px solid #ff993f}.border-rival{border:2px solid #8d2133}.border-misc{border:2px solid grey}}.notFound{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:25vh;padding-bottom:10vh;animation:fadein 1s forwards}.notFound img{width:120px;padding:15px 0 10px;border-radius:50%}.notFound__name{font-weight:600;margin-bottom:10px}@keyframes fadein{0%,50%{opacity:0}to{opacity:1}}.charalist{position:relative;display:flex;justify-content:center;align-items:flex-start;padding-top:20px;min-height:100vh;padding-top:25vh;padding-bottom:10vh}.charalist__container{width:700px;display:grid;grid-template-columns:repeat(6,1fr);justify-items:center;gap:20px}@media (min-width: 600px) and (max-width: 767px){.charalist{padding:20px 20px 0}}@media (min-width: 481px) and (max-width: 600px){.charalist__container{padding:20px 30px 0;grid-template-columns:repeat(5,1fr)}}@media (min-width: 320px) and (max-width: 481px){.charalist{height:fit-content}.charalist__container{padding:20px 30px 0;height:fit-content;grid-template-columns:repeat(2,1fr)}}.charabox{width:70px;height:70px;border-radius:100%;box-shadow:1px 1px 5px #0000003b;position:relative;cursor:pointer;background-color:#fff;transform-style:preserve-3d}.charabox:hover{transform:scale(102%)}.charabox:hover:before{content:"";position:absolute;border-radius:100%;top:-3px;right:-3px;bottom:-3px;left:-3px;transform:translateZ(-1px);background:linear-gradient(45deg,#ff7ec3 30%,#ffc34a,#3cbff7);background-size:600% 600%;filter:blur(5px);opacity:.6;animation:glow 3s infinite}@keyframes glow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.blank{display:none;z-index:1;width:100%;height:100%;top:-5px;transform:translate(-5px);background-color:#f2f2f2;position:absolute}.blank-top{display:block;opacity:0;animation:blank 1s forwards}@keyframes blank{0%{opacity:0}to{opacity:1}}.clickedChara{z-index:1}.header{z-index:5;width:100%;height:25vh;position:fixed;top:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:50px 20px 20px;background-image:linear-gradient(rgb(242,242,242) 90%,transparent)}.header h1{font-family:Comfortaa,sans-serif;font-size:32px;letter-spacing:4px}.header p{font-size:16px}@media (min-width: 320px) and (max-width: 481px){.header p{display:none}}.header__boxes{display:flex;gap:10px;justify-content:center}.header__boxes div{width:6px;height:6px;border-radius:100px}.header__boxes--1{background-color:#e85ca7}.header__boxes--2{background-color:#e8b551}.header__boxes--3{background-color:#1c89b8}@media (min-width: 320px) and (max-width: 481px){.header{text-align:center}.header h1{font-size:27px}.header p{font-size:14px}}.footer{width:100%;height:10vh;position:fixed;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:0 250px 0 150px;background-image:linear-gradient(transparent,#f2f2f2 20%)}@media (max-width: 1024px){.footer{padding:0 60px 0 50px;position:static}}@media (min-width: 481px) and (max-width: 767px){.footer{padding:0 50px 0 40px}}.footer__link{display:flex;justify-content:center;align-items:center;width:80px;height:20px}.footer button{border-radius:50px;width:80px;height:25px;font-size:12px;cursor:pointer;border:1px solid black}.footer button:hover{background:linear-gradient(#f2f2f2,#f2f2f2) padding-box,linear-gradient(45deg,#e85ca7 30%,#e8b551,#1c89b8) border-box;border:2px solid transparent;background-size:600%;animation:buttonAnimation 3s infinite}@keyframes buttonAnimation{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.footer p{font-size:12px}.footer a{font-size:12px;font-weight:500}.footer a:hover{font-weight:600;background:linear-gradient(45deg,#e85ca7 30%,#e8b551,#1c89b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:600% 600%;animation:buttonAnimation 3s infinite}@media (min-width: 320px) and (max-width: 481px){.footer{position:relative;height:fit-content;flex-direction:column;text-align:center;gap:10px;padding:20px 40px}}.credits-page{padding-top:25vh;padding-bottom:10vh;width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-left:20px;padding-right:20px}.credits-page__text{width:45%;margin-bottom:30px}@media (max-width: 1024px){.credits-page__text{width:55%}}@media (min-width: 481px) and (max-width: 767px){.credits-page__text{width:80%}}@media (min-width: 320px) and (max-width: 481px){.credits-page__text{width:100%}}.credits{width:45%;display:flex;flex-direction:column;justify-content:flex-start;align-items:left;gap:30px;position:relative}@media (max-width: 1024px){.credits{width:55%}}@media (min-width: 481px) and (max-width: 767px){.credits{width:80%}}@media (min-width: 320px) and (max-width: 481px){.credits{width:100%}}.credits__author p{font-weight:500}.credits__author--charas{margin-top:20px;margin-bottom:40px;display:flex;flex-wrap:wrap;gap:30px}@media (min-width: 320px) and (max-width: 648px){.credits__author--charas{justify-content:space-around}}.credits__author i{font-size:12px;margin-left:5px;color:gray}.credits__author i:hover{font-weight:600;background:linear-gradient(45deg,#e85ca7 30%,#e8b551,#1c89b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:600% 600%;animation:linkAnimation 3s infinite}@keyframes linkAnimation{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.back{z-index:4;position:absolute;width:fit-content;text-align:center;top:100%;left:50%;transform:translate(-50%,-50%)}.back__link{font-size:10px;font-weight:500}.back__link:hover{font-weight:600;background:linear-gradient(45deg,#e85ca7 30%,#e8b551,#1c89b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:600% 600%;animation:linkAnimation 3s infinite}.credits-chara{position:relative}.charasheet{min-width:300px;z-index:6;position:absolute;bottom:130%}.charasheet div{border:1px solid gray;border-radius:10px;padding:6px 10px;background-color:#fff;display:flex;flex-direction:column;gap:3px}.charasheet div p{font-size:12px}.charasheet .charaname{font-weight:600}div.charainfo div :last-child{font-style:italic}.charabox:hover+.hidden{display:block}