*{padding:0;margin:0}body{overflow:hidden}.bg{width:100%;height:100%;background:#091a1b;position:fixed;left:0;top:0;z-index:0;box-sizing:border-box;padding:3rem;display:flex;flex-direction:column;justify-content:space-between}.bg-bottom{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end}.svg-top{width:100%}.svg-left{width:56%}.svg-right{width:44%}.container{width:100%;height:100vh;background-size:100% 100%;overflow:hidden}.item{border-radius:50%;overflow:hidden;position:absolute;z-index:2;cursor:pointer}.bgItem{animation:float 10s ease-in-out infinite;animation-delay:calc(var(--delay) * -.1s)}@keyframes float{0%,to{transform:translate(0) scale(var(--scale1))}50%{transform:translate(var(--distance)) scale(var(--scale2))}}.blur{filter:blur(var(--blur));z-index:0;opacity:.8!important}.avatar{width:100%;height:100%;background-size:cover}.name{width:100%;position:absolute;left:0;bottom:0;color:#fff;display:flex;justify-content:center;margin-bottom:12%;z-index:4}.mask{width:100%;height:100%;position:absolute;left:0;top:0;z-index:3}.mask_1{background-color:#f006}.mask_2{background-color:#0f06}.mask_3{background-color:#00f6}@keyframes fadeIn{0%{transform:scale(.1);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleUp{0%{transform:translate(-50%) scale(.1);opacity:0}50%{transform:translate(-80%) scale(.3);opacity:.8}to{transform:translate(0) scale(1);opacity:1}}@keyframes scrollRight{0%{transform:translate(0)}to{transform:translate(100vw)}}#fullscreen{width:30px;height:30px;position:fixed;left:0;top:0;fill:#fff6;cursor:pointer;z-index:11}#svg{width:100%;height:100%;position:absolute;left:0;top:0;z-index:1}#svg line{stroke:#fff3;stroke-width:2}.about{position:absolute;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);width:100%;z-index:10;display:none}.about.visible{display:block;-webkit-animation:aboutIn .3s ease-out;-moz-animation:aboutIn .3s ease-out;-ms-animation:aboutIn .3s ease-out;-o-animation:aboutIn .3s ease-out;animation:aboutIn .3s ease-out;-webkit-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards}.about .popup{width:30rem;background:#fff;color:#303030;margin:0 auto;padding:20px;border-radius:4px;position:relative}.about .close{width:3rem;height:3rem;position:absolute;right:0;top:0;z-index:11;cursor:pointer;display:flex;justify-content:center;align-items:center}.about .close svg{width:1.5rem;height:1.5rem}.about .popup .title{font-size:1.4rem;margin-bottom:.5rem}.about .popup .description{font-size:1.1rem;height:66vh;overflow-y:scroll;line-height:1.8rem}@keyframes aboutIn{0%{-webkit-transform:translateY(-50%) scale(.75);-moz-transform:translateY(-50%) scale(.75);-ms-transform:translateY(-50%) scale(.75);-o-transform:translateY(-50%) scale(.75);transform:translateY(-50%) scale(.75);opacity:0}to{-webkit-transform:translateY(-50%) scale(1);-moz-transform:translateY(-50%) scale(1);-ms-transform:translateY(-50%) scale(1);-o-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);opacity:1}}