:root{--primary-bg-dark:#201a2e;--primary-bg:#6226d9;--primary-light:hsl(from var(--primary-bg) h s 80%)}@font-face{font-family:Montserrat;src:url(/Montserrat-VariableFont.ttf)format("truetype-variations");font-weight:400 700;font-display:swap}body{background:linear-gradient(to bottom, var(--primary-bg-dark), hsl(from var(--primary-bg-dark) h 30% 30%));width:100%;max-width:1000px;height:100%;min-height:100vh;margin-inline:auto;padding:1rem;font-family:Montserrat}nav{justify-content:flex-end;align-items:center;gap:1rem;margin-bottom:2em;display:flex;& a{cursor:pointer;color:#fff;font-size:1.5rem;font-weight:700;text-decoration:none;position:relative;&:visited{color:#fff}}& a:before{content:"";opacity:0;background:#fff;border-radius:10px;width:0;height:2.5px;transition:opacity .2s ease-in-out,width .15s ease-in-out;position:absolute;bottom:0;left:0}& a:hover:before{opacity:1;width:100%}}.icon[data-astro-cid-iuiej55p]{cursor:pointer;color:#fff;text-align:center;background:0 0;border:none;max-width:150px;padding:1rem;transition:transform .1s ease-in;& img{margin:auto}& p{margin-block:0}&:hover{transform:scale(1.2)}}.icon[data-astro-cid-5avo4gdj]{cursor:pointer;color:#fff;text-align:center;background:0 0;border:none;max-width:150px;padding:1rem;text-decoration:none;transition:transform .1s ease-in;& img{margin:auto}& p{margin-block:0}&:hover{transform:scale(1.2)}}body{--float-btn-offset:2em;overflow-y:hidden}.profile{border-radius:50%}.wrapper{place-content:center;display:grid}.hero{anchor-name:--hero-anchor;& h1{font-family:cursive;font-size:3.5rem;@media screen and (width<400px){font-size:2rem}}z-index:0;max-width:700px;height:400px;box-shadow:5px 5px 20px 0 hsl(from var(--primary-bg) h 20% 20%);background:url(/paper.svg);margin:6rem 0 2rem;padding:3rem;position:relative;overflow-y:hidden;@media screen and (width<400px){padding:1rem}& p{font-size:1.25rem;font-weight:500;@media screen and (width<600px){font-size:1rem}}animation:4s forwards scroll-unfold}.hero-header{justify-content:flex-start;align-items:center;gap:2rem;display:flex}.icon{& img{transition:transform .3s ease-in;transform:scale(1)}&:hover img{transform:scale(1.3)}& p{transition:font-size .3s ease-in,margin .3s ease-in}&:hover p{margin-top:.25rem;font-size:1.2rem}}#js{position-anchor:--hero-anchor;position-area:center bottom;margin-top:var(--float-btn-offset);animation:3s 1s infinite arrow-bounce;position:absolute}#about-me{& img{border-radius:5px}position-anchor:--hero-anchor;position-area:left center;margin-right:var(--float-btn-offset);animation:3s infinite arrow-bounce;position:absolute;@media screen and (width<900px){position-area:left bottom;margin-right:0;margin-top:var(--float-btn-offset)}}#gh{position-anchor:--hero-anchor;position-area:right center;position:absolute;@media screen and (width<900px){position-area:right bottom;margin-right:0;margin-top:var(--float-btn-offset)}margin-left:var(--float-btn-offset);animation:3s 2s infinite arrow-bounce}.overlay{background:hsl(from var(--primary-bg) h s l /.5);z-index:-1;opacity:1;position:absolute;inset:0;overflow-x:hidden}.overlay-dialog{background:hsl(from var(--primary-bg) h s l /.5);z-index:-1;opacity:1;position:absolute;inset:-100px 0 -300px}.arrow{flex-direction:column;justify-content:center;display:flex;& svg{margin:auto}font-size:1.25rem;& p{text-align:center}color:#fff;opacity:0;animation-name:arrow,arrow-bounce;animation-duration:6s,2s;animation-timing-function:ease,ease-in-out;animation-iteration-count:1,infinite;animation-direction:normal,normal;animation-play-state:running,running;animation-delay:4s;animation-fill-mode:forwards,none;animation-timeline:auto,auto}dialog{background:url(/paper.svg);max-width:50ch;min-height:300px;max-height:600px;font-size:1.25rem;font-weight:500;position:relative;overflow-y:scroll;&::backdrop{background:#3c3c3cb3}& button{border:1px solid var(--primary-bg);cursor:pointer;background:#fff;border-radius:.2rem;padding:.25rem .5rem;font-size:1rem;position:absolute;top:20px;right:20px;&:hover{background:hsl(from var(--primary-light) h s 40%);color:#fff}}}@keyframes scroll-unfold{0%{height:10px}40%{height:70px}90%{transform:rotate(0)}to{height:400px;transform:rotate(-5deg)}}@keyframes arrow{0%{opacity:0}to{opacity:1}}@keyframes arrow-bounce{0%,to{transform:translateY(-10px)}50%{transform:translateY(10px)}}