html,body{margin:0;width:100%;height:100%}*{margin:0;cursor:crosshair!important}html{background-color:#000;cursor:crosshair!important;overflow:hidden;color:#fff}#header-bar{display:flex;justify-content:space-between;align-items:flex-start;background-color:#fff;padding:.5rem 1rem;position:relative;z-index:1001}#header-left{display:flex;flex-direction:column;gap:.15rem;max-width:50%}#description{color:#000;font-family:Commit;font-size:.8rem;font-weight:100;line-height:1.4}#credit{color:#000;font-family:Commit;font-size:.8rem;font-weight:100}#header-right{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}#title{color:#000;font-family:Commit;text-align:right;font-size:.8rem;font-weight:100}#title:hover{text-decoration:line-through}#download{color:#ec00fd;font-family:Commit;text-align:right;font-size:.8rem;font-weight:100;cursor:crosshair}#download:hover{text-decoration:line-through}@font-face{font-family:Advent;src:url(/fonts/ADVENT.ttf)}@font-face{font-family:Gravity;src:url(/fonts/GRAVITY2.ttf)}@font-face{font-family:Punch;src:url(/fonts/PUNCH.ttf)}@font-face{font-family:Commit;src:url(/fonts/CommitMono-400-Regular.otf)}@font-face{font-family:Babie;src:url(/fonts/Babie.ttf)}body{height:100vh;padding:0;display:flex;flex-direction:column;overflow:hidden}#page-content{width:100%;overflow-y:scroll!important;overflow-x:hidden;scrollbar-color:rgb(0,0,0) rgba(0,0,0,0)}@keyframes all-marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes marquee-reverse{0%{transform:translate(-100%)}to{transform:translate(0)}}:root{--POSI: 0;--SIZE-FIRST: 10rem;--SIZE-SECOND: 10rem;--SIZE-THIRD: 10rem;--HOLE: 50;--BABIE: 0;--GRAV: 0}#first{display:flex;flex-direction:column;border-bottom:.1px solid rgba(255,255,255,.527);font-family:Commit;padding:1.5rem}#first .advent-type{white-space:nowrap;font-size:5rem;transition:transform .3s ease;padding:1rem;display:flex;flex-direction:row;flex-wrap:nowrap}#first .advent-type:hover{transform:scale(1.05)}#first .advent-type span{animation:all-marquee 30s linear infinite;color:#fff;font-family:Advent,sans-serif;font-variation-settings:"POSI" var(--POSI);font-size:var(--SIZE-FIRST)}.controls{display:flex;justify-content:right;align-items:center;gap:2rem}.controls h3{padding-right:1px;font-size:.8rem;font-weight:100;transition:color .5s ease}.controls input[type=range]{margin-left:3rem;-webkit-appearance:none;appearance:none;width:300px;height:1px;background:#fff;cursor:crosshair;transition:background .5s ease}.controls #current-posi,.controls #current-size-first,.controls #current-size-second,.controls #current-size-third,.controls #current-grav,.controls #current-hole{margin-left:.1rem;font-size:.8rem;transition:color .5s ease}#second{display:flex;flex-direction:column;border-bottom:.1px solid rgba(255,255,255,.517);font-family:Commit;padding:1.5rem}#second .gravity-type{white-space:nowrap;font-size:10rem;transition:transform .3s ease;padding:1rem;display:flex;flex-direction:row;flex-wrap:nowrap}#second .gravity-type:hover{transform:scale(1.05)}#second .gravity-type span{animation:marquee-reverse 12s linear infinite;font-family:Gravity;font-variation-settings:"GRAV" var(--GRAV);font-size:var(--SIZE-SECOND)}#third{display:flex;flex-direction:column;border-bottom:.1px solid rgb(255,255,255);font-family:Commit;padding:1.5rem}#third .punch-type{white-space:nowrap;font-size:10rem;transition:transform .1s ease;padding:.1rem 3rem 3rem;display:flex;flex-direction:row;flex-wrap:nowrap}#third .punch-type:hover{transform:scale(1.05)}#third .punch-type span{animation:all-marquee 15s linear infinite;font-family:Punch;font-variation-settings:"HOLE" var(--HOLE);font-size:var(--SIZE-THIRD)}#fourth{display:flex;flex-direction:column;border-bottom:.1px solid rgba(255,255,255,.517);font-family:Commit;padding:1.5rem}#fourth .babie-type{white-space:nowrap;font-size:10rem;transition:transform .3s ease;padding:3rem;display:flex;flex-direction:row;flex-wrap:nowrap}#fourth .babie-type:hover{transform:scale(1.05)}#fourth .babie-type span{animation:marquee-reverse 20s linear infinite;font-family:Babie;font-variation-settings:"BABIE" var(--BABIE)}.title{display:flex;font-family:Commit;font-size:.8rem;padding:0;margin:0;transition:color .5s ease}.category{cursor:crosshair;transition:background-color .5s ease,color .5s ease}.category div{padding:0;margin:0}.category.fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;background-color:#fff;color:#000;overflow:auto;overflow-x:hidden;padding:2rem;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;transition:background-color .5s ease,color .5s ease}.category.fullscreen .title{color:#000}.category.fullscreen .advent-type,.category.fullscreen .gravity-type,.category.fullscreen .punch-type,.category.fullscreen .babie-type{color:#000;margin:5rem 3rem 3rem}.category.fullscreen .advent-type span,.category.fullscreen .gravity-type span,.category.fullscreen .punch-type span,.category.fullscreen .babie-type span{color:#000}.category.fullscreen #first.fullscreen .advent-type span,.category.fullscreen #second.fullscreen .gravity-type span,.category.fullscreen #third.fullscreen .punch-type span,.category.fullscreen #fourth.fullscreen .babie-type span{font-size:1rem!important;transform:scale(.3);transform-origin:center}.category.fullscreen .controls,.divider-line,.alphabet,.alphabet-container,.vertical-line,.hover-letter{display:none}#first.fullscreen .divider-line{display:block;position:relative;left:-2rem;width:calc(100% + 4rem);height:1px;background-color:#000;margin:3rem -2rem 0;transition:opacity .5s ease}#first.fullscreen .alphabet-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;width:100vw;height:510px}#first.fullscreen .vertical-line{display:block;position:absolute;left:66.67%;top:0;width:1px;height:100%;background-color:#000;z-index:10}#first.fullscreen .alphabet{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;position:relative;width:66.67%;color:#000;opacity:1;font-family:Advent,sans-serif;font-variation-settings:"POSI" var(--POSI);font-size:2rem;letter-spacing:.05em;line-height:1.5;gap:.35rem}#first.fullscreen .alphabet span{display:inline-block;transition:transform .15s ease;transform-origin:center;cursor:crosshair}#first.fullscreen .alphabet span:hover{transform:scale(1.25)}#first.fullscreen .hover-letter{display:block;position:absolute;right:0;top:50%;transform:translateY(-50%);width:33.33%;text-align:center;font-family:Advent,sans-serif;font-variation-settings:"POSI" var(--POSI);font-size:13rem;color:red}#second.fullscreen .divider-line{display:block;position:relative;left:-2rem;width:calc(100% + 4rem);height:1px;background-color:#000;margin:3rem -2rem 0;transition:opacity .5s ease}#second.fullscreen .alphabet-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;width:100vw;height:510px}#second.fullscreen .vertical-line{display:block;position:absolute;left:66.67%;top:0;width:1px;height:100%;background-color:#000;z-index:10}#second.fullscreen .alphabet{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;position:relative;width:66.67%;color:#000;opacity:1;font-family:Gravity,sans-serif;font-variation-settings:"GRAV" var(--GRAV);font-size:2rem;letter-spacing:.05em;line-height:1.5;gap:.35rem}#second.fullscreen .alphabet span{display:inline-block;transition:transform .15s ease;transform-origin:center;cursor:crosshair}#second.fullscreen .alphabet span:hover{transform:scale(1.25)}#second.fullscreen .hover-letter{display:block;position:absolute;right:0;top:50%;transform:translateY(-50%);width:33.33%;text-align:center;font-family:Gravity,sans-serif;font-variation-settings:"GRAV" var(--GRAV);font-size:8rem;color:#0037ff}#third.fullscreen .divider-line{display:block;position:relative;left:-2rem;width:calc(100% + 4rem);height:1px;background-color:#000;margin:3rem -2rem 0;transition:opacity .5s ease}#third.fullscreen .alphabet-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;width:100vw;height:510px}#third.fullscreen .vertical-line{display:block;position:absolute;left:66.67%;top:0;width:1px;height:100%;background-color:#000;z-index:10}#third.fullscreen .alphabet{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;position:relative;width:66.67%;color:#000;opacity:1;font-family:Punch,sans-serif;font-variation-settings:"HOLE" var(--HOLE);font-size:2rem;letter-spacing:.05em;line-height:1.5;gap:.35rem}#third.fullscreen .alphabet span{display:inline-block;transition:transform .15s ease;transform-origin:center;cursor:crosshair}#third.fullscreen .alphabet span:hover{transform:scale(1.25)}#third.fullscreen .hover-letter{display:block;position:absolute;right:0;top:50%;transform:translateY(-50%);width:33.33%;text-align:center;font-family:Punch,sans-serif;font-variation-settings:"HOLE" var(--HOLE);font-size:8rem;color:#37ff00}#fourth.fullscreen .divider-line{display:block;position:relative;left:-2rem;width:calc(100% + 4rem);height:1px;background-color:#000;margin:3rem -2rem 0;transition:opacity .5s ease}#fourth.fullscreen .alphabet-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;width:100vw;height:510px}#fourth.fullscreen .vertical-line{display:block;position:absolute;left:66.67%;top:0;width:1px;height:100%;background-color:#000;z-index:10}#fourth.fullscreen .alphabet{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;position:relative;width:66.67%;color:#000;opacity:1;font-family:Babie,sans-serif;font-variation-settings:"BABIE" var(--BABIE);font-size:2rem;letter-spacing:.05em;line-height:1.5;gap:.35rem}#fourth.fullscreen .alphabet span{display:inline-block;transition:transform .15s ease;transform-origin:center;cursor:crosshair}#fourth.fullscreen .alphabet span:hover{transform:scale(1.25)}#fourth.fullscreen .hover-letter{display:block;position:absolute;right:0;top:50%;transform:translateY(-50%);width:33.33%;text-align:center;font-family:Babie,sans-serif;font-variation-settings:"BABIE" var(--BABIE);font-size:8rem;color:#f700ff}