:root{--text-color: #FAFAFA}*{box-sizing:border-box}html{font-size:12px}body,h1,h2,h3,h4,h5,h6,p,ol,ul{margin:0;padding:0;font-weight:400}ol,ul{list-style:none}img{max-width:100%;height:auto;image-rendering:crisp-edges;pointer-events:none}a{text-decoration:none}@font-face{font-family:Roboto;font-style:italic;font-weight:300;src:url(/assets/Roboto-ThinItalic-W1cai813.woff2) format("woff2")}@font-face{font-family:Roboto;font-weight:300;src:url(/assets/Roboto-Thin-CZMgPRAk.woff2) format("woff2")}@font-face{font-family:Roboto;font-weight:400;src:url(/assets/Roboto-Regular-BAeSS4UJ.woff2) format("woff2")}@font-face{font-family:Josefin Sans;font-weight:400;src:url(/assets/JosefinSans-Regular-C8oZHUeZ.woff2) format("woff2")}@font-face{font-family:Josefin Sans;font-weight:600;src:url(/assets/JosefinSans-SemiBold-BIeeRL2P.woff2) format("woff2")}@font-face{font-family:Spartan;font-weight:500;src:url(/assets/Spartan-VariableFont_wght-BY-o_sjX.woff2) format("woff2")}.icon{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor}.icon-caret-right,.icon-caret-left{width:.3em}html{font-family:Roboto,sans-serif}@media (width >= 576px){html{font-size:14px}}@media (width >= 768px){html{font-size:16px}}@media (width >= 992px){html{font-size:18px}}@media (width >= 1200px){html{font-size:20px}}.icons-social .icon{font-size:2em}.quote{opacity:.5}.page .intro{font-family:Spartan,sans-serif;font-weight:500;font-size:3.75em}.page .page-name{font-family:Josefin Sans,sans-serif;font-weight:500;font-size:3.75em}.page .tagline{font-weight:300;font-size:1.5rem}.page .quote{font-style:italic;font-weight:300;font-size:1.2em}.page .button-for-page{font-family:Josefin Sans,sans-serif;font-size:2rem}#page-work .container .panel .text h2{font-family:Spartan,sans-serif;font-weight:400;font-size:1.75em}:root{--y-line-gutter: 3em;--x-line-gutter: 7em;--avatar-size: 10em;--line-width: 2px;--line-radius: 2px;--page-anim-duration: .3s;--accent: hsl(10deg 77% 67%)}body{overflow:hidden}.page{position:absolute;inset:0}#page-home{filter:drop-shadow(2px 4px 6px black);top:20vh;margin:var(--x-line-gutter) 0 0 var(--y-line-gutter);padding:var(--x-line-gutter) 6vmin 0 6vmin;border-width:var(--line-width) 0 0 var(--line-width);border-radius:var(--line-radius) 0 0 0;border-color:var(--text-color);border-style:solid}#page-home .avatar{position:absolute;height:var(--avatar-size);top:calc((var(--avatar-size) + var(--line-width)) / -2);border-radius:var(--line-radius);border-color:var(--text-color);border-style:solid;border-width:0 var(--line-width) 0 var(--line-width);background-color:var(--text-color);object-fit:contain}#page-home .tagline{margin-bottom:1rem}#page-home .icons-social a .icon{margin-right:8px;transition:color 50ms cubic-bezier(.65,.05,.36,1)}#page-home .icons-social a:hover .icon{fill:var(--accent)}#page-home .icons-social a .icon-discord{transform:translateY(2px)}#page-home #button-from-home-to-about{top:0;right:4px;transform:translateY(-100%)}#page-home #button-from-home-to-work{bottom:4px;left:0;transform-origin:bottom left;transform:rotate(-90deg)}#page-about{filter:drop-shadow(2px 4px 6px black);top:20vh;margin-top:var(--x-line-gutter);border-top:var(--text-color) solid var(--line-width);padding:3rem 4rem}#page-about #button-from-about-to-home{top:0;left:4px;transform:translateY(-100%)}#page-about .quote{position:absolute;top:-.2em;right:.2em;transform:translateY(-100%)}#page-about .page-name{margin-bottom:1rem}#page-about .text p{margin-bottom:1rem;font-size:1.2rem}#page-work{filter:drop-shadow(2px 4px 6px black);margin-left:var(--y-line-gutter);border-left:var(--text-color) solid var(--line-width)}#page-work #button-from-work-to-home{top:4px;left:0;transform-origin:top left;transform:rotate(-90deg) translate(-100%,-100%)}#page-work .quote{position:absolute;bottom:.2em;left:-.2em;transform-origin:top left;transform:translateY(100%) rotate(-90deg) translateY(-100%)}#page-work .page-name{padding:3rem 4rem}#page-work .container .panel{display:flex}#page-work .container .panel:not(:last-child){margin-bottom:32px}#page-work .container .panel:nth-child(1) .logo svg{width:75%}#page-work .container .panel:nth-child(2) .logo svg{width:90%}#page-work .container .panel:nth-child(3) .logo svg{width:80%}#page-work .container .panel:nth-child(4) .logo svg{width:80%}#page-work .container .panel .logo{position:relative;border-radius:0 var(--line-radius) var(--line-radius) 0;border-width:0 var(--line-width) 0 0;border-color:var(--text-color);border-style:solid;background-color:var(--text-color);min-width:10vmin;min-height:10vmin}#page-work .container .panel .logo svg{position:absolute;top:50%;left:50%;width:85%;transform:translate(-50%,-50%);filter:grayscale(10%)}#page-work .container .panel .text{flex-grow:1;display:flex;flex-direction:column;justify-content:space-evenly;padding:8px 16px}#page-work .container .panel .text .heading{display:flex;margin-bottom:4px}#page-work .container .panel .text .heading h2{margin-right:8px}#page-work .container .panel .text .heading .links{align-items:center;display:flex;font-size:1.4em}#page-work .container .panel .text .heading .links a{display:flex}#page-work .container .panel .text .heading .links a:not(:last-child){margin-right:4px}#page-work .container .panel .text p{display:block}.button-for-page{position:absolute;cursor:pointer;transition:opacity var(--page-anim-duration) ease-out}.button-for-page .icon{position:relative;top:.125em;margin:0 .1em;transition:color 50ms cubic-bezier(.65,.05,.36,1)}.button-for-page:hover .icon{color:var(--accent)}a .icon{transition:color 50ms cubic-bezier(.65,.05,.36,1)}a .icon:hover,p a{color:var(--accent)}p a:hover,a h2:hover{text-decoration:underline}body:not(.page-home) #page-home .button-for-page,body:not(.page-about) #page-about .button-for-page,body:not(.page-work) #page-work .button-for-page{opacity:0}.particle{fill:var(--text-color);transform-box:fill-box;transform-origin:center;transform:rotate(45deg)}#particles{position:absolute;display:block;top:-1vh;left:-1vw;width:202vw;height:202vh;z-index:-2}.background{z-index:-3;position:absolute;min-height:200vh;min-width:200vw}body.page-about #page-about~.background,body.page-about #page-about~#particles{transform:translate(-100vw)}body.page-work #page-work~.background,body.page-work #page-work~#particles{transform:translateY(-100vh)}@keyframes slide-middle-to-left{0%{transform:none}to{transform:translate(-100vw)}}@keyframes slide-left-to-middle{0%{transform:translate(100vw)}to{transform:none}}@keyframes slide-middle-to-right{0%{transform:none}to{transform:translate(100vw)}}@keyframes slide-right-to-middle{0%{transform:translate(-100vw)}to{transform:none}}@keyframes slide-middle-to-down{0%{transform:none}to{transform:translateY(-100vh)}}@keyframes slide-down-to-middle{0%{transform:translateY(100vh)}to{transform:none}}@keyframes slide-middle-to-up{0%{transform:none}to{transform:translateY(100vh)}}@keyframes slide-up-to-middle{0%{transform:translateY(-100vh)}to{transform:none}}body:not(.page-home) #page-home{transform:translate(-100vw)}body:not(.page-about) #page-about{transform:translate(100vw)}body:not(.page-work) #page-work{transform:translateY(100vh)}.anim-from-home-to-about #page-home,.anim-from-home-to-about .background,.anim-from-home-to-about #particles{animation:var(--page-anim-duration) cubic-bezier(.4,0,.2,1) forwards slide-middle-to-left}.anim-from-home-to-about #page-about{animation:var(--page-anim-duration) cubic-bezier(.4,0,.2,1) forwards slide-left-to-middle}.anim-from-about-to-home #page-about{animation:var(--page-anim-duration) cubic-bezier(.4,0,.2,1) forwards slide-middle-to-right}.anim-from-about-to-home #page-home,.anim-from-about-to-home .background,.anim-from-about-to-home #particles{animation:var(--page-anim-duration) cubic-bezier(.4,0,.2,1) forwards slide-right-to-middle}.anim-from-home-to-work #page-home,.anim-from-home-to-work .background,.anim-from-home-to-work #particles{animation:var(--page-anim-duration) cubic-bezier(.4,0,.2,1) forwards slide-middle-to-down}.anim-from-home-to-work #page-work{animation:var(--page-anim-duration) cubic-bezier(.4,0,.2,1) forwards slide-down-to-middle}.anim-from-work-to-home #page-work{animation:var(--page-anim-duration) cubic-bezier(.4,0,.2,1) forwards slide-middle-to-up}.anim-from-work-to-home #page-home,.anim-from-work-to-home .background,.anim-from-work-to-home #particles{animation:var(--page-anim-duration) cubic-bezier(.4,0,.2,1) forwards slide-up-to-middle}a{color:var(--text-color)}.background{opacity:.5;background-blend-mode:overlay,hard-light,normal;background:radial-gradient(100% 225% at 100% 0,red,#000),linear-gradient(143deg,#00c2ff,#000),linear-gradient(135deg,#cdffeb 0% 30%,#009f9d 30% 100%)}body{background-color:#000}.page,.icons-social a{color:var(--text-color)}.icons-social a .icon{fill:var(--text-color)}