@import"https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Syncopate:wght@400;700&display=swap";:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-family:Syncopate;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--white: white;--secondary: rgb(151, 151, 151);--black: black}*{border-collapse:collapse}body{margin:0;top:0;height:100dvh;overflow:hidden;position:relative;background:var(--black);color:var(--white)}canvas{position:absolute;top:0px;z-index:200;z-index:-1;display:block;background:transparent}.anaglyph{position:relative}.anaglyph:before,.anaglyph:after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;transition-delay:.1}.anaglyph:before{background:red;transform:translate(-3px);z-index:1}.anaglyph:after{background:cyan;transform:translate(3px);z-index:2}.card3d{border-radius:2px;background:limegreen;opacity:.5}.flex{display:flex;align-items:center;justify-content:center}.logo{width:min-content;margin:0 0 0 50px;padding-top:25px;display:block;text-decoration:none}.logo .line{margin-right:5px;display:grid}.logo .flex{justify-content:start}.logo .version{color:var(--secondary)}.hero{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)}.hero .name .letter{font-size:3rem;line-height:2rem;text-transform:uppercase;margin:0 4px}.hero{display:flex;flex-direction:column;justify-content:center;padding:10px;border-radius:5px}.hero .after-dots{position:absolute;top:-30px;left:40px;width:100%;height:100%;--dot-color:rgba(255, 255, 255, .438);background-image:radial-gradient(var(--dot-color) 1px,transparent 1px);background-size:30px 30px}@media screen and (max-width:500){.hero .after-dots{position:absolute;top:0px;left:0px}}.hero .name{display:flex;width:min-content;margin:20px auto;transform-origin:center;overflow:hidden}.hero .name-container{display:flex;align-self:center;width:min-content;align-items:center;position:relative}.hero .name-container .letter-a{z-index:11;margin:0 -4px}.hero .name-container .before{position:absolute;top:0px;left:-15px}.hero .name-container .after{position:absolute;right:-15px;bottom:0px}.hero .job-title{font-size:1.5rem;font-weight:700;transform:translateY(20px);background-image:linear-gradient(135deg,rgba(255,255,255,.4),rgba(255,255,255,.74),rgba(255,255,255,.4));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero .name .letter-semicolon{margin:0 12px}.japanese-font{display:inline;letter-spacing:7px;position:absolute;width:40px;margin:16px;font-size:1.1rem;background-image:linear-gradient(rgba(255,255,255,.2),rgb(255,255,255),rgba(255,255,255,.1));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.navs .menu{position:absolute;right:25px;top:50%;rotate:-90deg}.navs .work{position:absolute;left:25px;top:50%;rotate:90deg}.navs .about{position:absolute;cursor:pointer;bottom:50px;display:flex;align-items:center;justify-content:space-between;width:100px;left:calc(50% - 50px);transition:.5s}.navs .about .about-after path{stroke:#ffffff8a}.navs .about .about-after,.navs .about .about-before{transition:.5s cubic-bezier(.075,.82,.165,1)}.portfolio-btn{position:absolute;transform:translate(-50%);left:50%;bottom:15%;display:flex;align-items:center;justify-content:center;scale:.7}.portfolio-btn svg{position:absolute}.portfolio-btn .icon{position:absolute}.portfolio-btn .square-aura{position:absolute;width:75px;height:75px;rotate:45deg;outline:5px solid rgb(176,176,176);opacity:0}.portfolio-btn .icon>div{height:2px;background:#fff}.portfolio-btn .icon .arr1{width:30px}.portfolio-btn .icon .arr2{width:20px;transform:rotate(45deg) translate(4px,-16px)}.portfolio-btn .icon .arr3{width:20px;transform:rotate(-45deg) translate(8px,12px)}@media screen and (max-width:500px){.hero{top:40%}.hero .name-container{scale:.8}.hero .job-title{text-align:center}.hero .job-title span{display:block}.japanese-font{margin:4px;width:unset;font-size:.8rem;left:50%;transform:translate(-50%);bottom:-30px;background-image:linear-gradient(rgba(255,255,255,.2),rgb(255,255,255),rgba(255,255,255,.1));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}}.loading{position:absolute;height:100vh;height:100svh;width:100%;background:#000;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;overflow:hidden}.loading>div:first-of-type{display:flex}.loading .line{height:.5px;width:100%;display:flex;align-items:center;justify-content:center}.loading .line>.left{transform:translate(-200%);background:var(--white);height:100%;width:30%}.loading .line>.right{transform:translate(200%);background:var(--white);height:100%;width:30%}.loading .top{height:calc(50% - 2px);width:100%;position:absolute;top:0;background:black}.loading .bottom{height:calc(50% - 2px);width:100%;position:absolute;bottom:0;background:black}.logo .letter-a svg path{stroke-dasharray:143px;stroke-dashoffset:80px;transition:1s}.logo .line path{transition:1s;stroke-dasharray:143px;stroke-dashoffset:80px}.logo .letter-o svg path{stroke-dasharray:143px;stroke-dashoffset:80px;transition:1s}.logo:hover .letter-a path{stroke:#00f;stroke-dashoffset:286px}.logo:hover .letter-o path{stroke:#ff4500;stroke-dashoffset:286px}.logo:hover .line path{stroke-dashoffset:286px;stroke:#0f0;fill:#0f0}.logo:hover .version{color:#fff;animation:flicker 3s infinite}.navs .about:hover{background:rgba(255,255,255,.068)}.navs .about:hover .about-after{transform:translate(10px) scaleY(1.5)}.navs .about:hover .about-before{transform:translate(-10px) scaleY(1.5)}.portfolio-btn svg path{stroke-dasharray:360px;stroke-dashoffset:360px;stroke-width:2px;transition:1s cubic-bezier(.075,.82,.165,1)}