:root{--primary-bg-dark: hsl(260 28% 14%);--primary-bg: hsl(260 70% 50%);--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{width:100%;height:100%;min-height:100vh;padding:1rem;max-width:1000px;margin-inline:auto;font-family:Montserrat;background:linear-gradient(to bottom,var(--primary-bg-dark),hsl(from var(--primary-bg-dark) h 30% 30%))}nav{display:flex;justify-content:flex-end;align-items:center;margin-bottom:2em;gap:1rem;a{font-weight:700;cursor:pointer;font-size:1.5rem;color:#fff;text-decoration:none;position:relative;&:visited{color:#fff}}a:before{content:"";width:0;height:2.5px;background:#fff;border-radius:10px;position:absolute;bottom:0;left:0;opacity:0;transition:opacity .2s ease-in-out,width .15s ease-in-out}a:hover:before{width:100%;opacity:1}}.icon[data-astro-cid-rivirrpk]{background:none;border:none;cursor:pointer;color:#fff;max-width:150px;text-align:center;padding:1rem;transition:transform .1s ease-in;img{margin:auto}p{margin-block:0}&:hover{transform:scale(1.2)}}.icon[data-astro-cid-ebuodpca]{text-decoration:none;background:none;border:none;cursor:pointer;color:#fff;max-width:150px;text-align:center;padding:1rem;transition:transform .1s ease-in;img{margin:auto}p{margin-block:0}&:hover{transform:scale(1.2)}}body{overflow-y:hidden;--float-btn-offset: 2em}.profile{border-radius:50%}.wrapper{display:grid;place-content:center}.hero{anchor-name:--hero-anchor;h1{font-size:3.5rem;font-family:cursive;@media screen and (width<400px){font-size:2rem}}background:url(/paper.svg);max-width:700px;height:400px;padding:3rem;margin:6rem 0 2rem;position:relative;overflow-y:hidden;z-index:0;box-shadow:5px 5px 20px hsl(from var(--primary-bg) h 20% 20%);@media screen and (width<400px){padding:1rem}p{font-weight:500;font-size:1.25rem;@media screen and (width<600px){font-size:1rem}}animation:scroll-unfold 4s forwards}.hero-header{display:flex;justify-content:flex-start;gap:2rem;align-items:center}.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{font-size:1.2rem;margin-top:.25rem}}#js{position:absolute;position-anchor:--hero-anchor;position-area:center bottom;animation:arrow-bounce 3s infinite;animation-delay:1s;margin-top:var(--float-btn-offset)}#about-me{img{border-radius:5px}position:absolute;position-anchor:--hero-anchor;position-area:left center;animation:arrow-bounce 3s infinite;margin-right:var(--float-btn-offset);@media screen and (width<900px){position-area:left bottom;margin-right:0;margin-top:var(--float-btn-offset)}}#gh{position:absolute;position-anchor:--hero-anchor;position-area:right center;@media screen and (width<900px){position-area:right bottom;margin-right:0;margin-top:var(--float-btn-offset)}animation:arrow-bounce 3s infinite;animation-delay:2s;margin-left:var(--float-btn-offset)}.overlay{position:absolute;background:hsl(from var(--primary-bg) h s l /.5);inset:0;z-index:-1;overflow-x:hidden;opacity:1}.overlay-dialog{position:absolute;inset:-100px 0 -300px;background:hsl(from var(--primary-bg) h s l /.5);z-index:-1;opacity:1}.arrow{display:flex;flex-direction:column;justify-content:center;svg{margin:auto}font-size:1.25rem;p{text-align:center}color:#fff;opacity:0;animation:arrow 6s forwards,arrow-bounce 2s ease-in-out infinite;animation-delay:4s}dialog{position:relative;max-width:50ch;min-height:300px;max-height:600px;overflow-y:scroll;background:url(/paper.svg);font-weight:500;font-size:1.25rem;&::backdrop{background:#3c3c3cb3}button{position:absolute;top:20px;right:20px;font-size:1rem;padding:.25rem .5rem;background:#fff;border-radius:.2rem;border:1px solid var(--primary-bg);cursor:pointer;&: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)}}