*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#08100c;--content-primary:#f5f5f5;--content-secondary:#b3b3b3;--content-tertiary:#1e2b27;--blue-linkedin:#0e76a8;--rosa-instagram:#e1306c;--discord:#5865f2;--github:#171515;--x:#000;--ff-poppins:"Poppins",sans-serif;--ff-lora:"Lora",serif;--title-h1:400 4.5rem/130% var(--ff-poppins);--title-h2:400 3rem/150% var(--ff-poppins);--title-h3:400 2rem/150% var(--ff-poppins);--title-h4:400 1.5rem/150% var(--ff-poppins);--title-h5:400 1.25rem/150% var(--ff-poppins);--title-h6:400 1rem/150% var(--ff-poppins);--subtitle:400 2.5rem/150% var(--ff-lora);--link:400 2rem/130% var(--ff-lora);--p-xl:400 2.5rem/130% var(--ff-lora);--p-lg:400 1.5rem/130% var(--ff-lora);--p-md:400 1rem/130% var(--ff-lora);--p-sm:400 0.875rem/130% var(--ff-lora);--p-2sm:400 0.625rem/130% var(--ff-lora);--gap-05:0.5rem;--gap-1:1rem;--gap-2:2rem;--gap-3:3rem;--gap-4:4rem;--gap-5:5rem;--pad-05:0.5rem;--pad-1:1rem;--pad-2:2rem;--pad-3:3rem;--pad-4:4rem;--pad-5:5rem}html{scroll-behavior:smooth}body{background-color:var(--color-bg);color:var(--content-primary);font-family:var(--ff)}.content{padding-inline:var(--pad-5)}@media (width <= 64rem){.content{padding-inline:var(--pad-3)}}@media (width <= 48rem){.content{padding-inline:var(--pad-2)}}a{color:var(--content-secondary);text-decoration:none}li,ol,ul{list-style:none}.mouse-shadow{animation:fadeIn 2s linear infinite alternate;background:radial-gradient(#fff,transparent 100%);background-color:#fff;border-radius:50%;filter:blur(4px);height:.5rem;pointer-events:none;position:fixed;transition:transform .15s ease;width:.5rem;z-index:9999}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tracking-in-expand{-webkit-animation:tracking-in-expand .7s cubic-bezier(.215,.61,.355,1) both;animation:tracking-in-expand cubic-bezier(.215,.61,.355,1) both;animation-timeline:view();animation-range:entry 40% cover 50%}@-webkit-keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}to{opacity:1}}@keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}to{opacity:1}}header{align-items:center;border-bottom:1px dashed var(--content-secondary);display:flex;height:5rem;justify-content:space-between;width:100%;& span.logo-header{color:var(--content-primary);cursor:pointer;font:400 1rem/110% var(--ff-poppins)}nav{align-items:center;display:flex;gap:var(--gap-2);justify-content:center;& .nav-link{font:500 1rem/130% var(--ff-poppins);&:hover{color:var(--content-primary)}}.linkedin{color:var(--blue-linkedin);font:500 1rem/130% var(--ff-poppins);&:hover{text-decoration:underline}}}}@media (width <= 64rem){header{height:4rem;& span.logo-header{font:400 .875rem/110% var(--ff-poppins)}nav{& .nav-link,.linkedin{font:500 .875rem/130% var(--ff-poppins)}}}}@media (width <= 48rem){header{height:3.5rem;& span.logo-header{font:400 .75rem/110% var(--ff-poppins)}nav{gap:var(--gap-1);& .nav-link,.linkedin{font:500 .75rem/130% var(--ff-poppins)}}}}@media (width <= 30rem){header{height:3rem;nav{gap:var(--gap-05)}}}main{display:flex;flex-direction:column;gap:var(--gap-2);justify-content:center;position:relative;& .hello{align-items:center;color:var(--content-secondary);display:flex;font:400 .875rem/120% var(--ff-lora);padding-block:.5rem}& section{padding-block:var(--pad-2)}& section.hero{display:flex;flex-direction:column;gap:var(--gap-2);justify-content:center;width:70%;& h1{color:var(--content-secondary);font:var(--title-h1);letter-spacing:.01rem;& .nome{color:var(--content-primary);font-weight:600}}}& section.projects{display:flex;flex-direction:column;gap:var(--gap-1);& h2{font:var(--title-h2)}& .cards{display:grid;gap:var(--gap-2);grid-template-columns:repeat(auto-fit,minmax(500px,1fr));justify-content:center;& .card{border-radius:1rem;box-shadow:2px 2px 10px hsla(0,0%,100%,.3);display:grid;gap:var(--gap-2);grid-template-rows:auto 1fr;padding:var(--pad-1);transition:box-shadow .3s ease,transform .3s ease;& .card-img{border-radius:.5rem;height:25rem;object-fit:cover;width:100%}&:hover.cyberus{box-shadow:2px 2px 10px rgba(82,0,114,.5)}&:hover.petshop{box-shadow:2px 2px 10px rgba(67,48,173,.5)}&:hover.sorteador{box-shadow:2px 2px 10px rgba(131,1,88,.5)}& .card-description{border-top:1px dashed var(--content-secondary);display:flex;flex-direction:column;gap:.5rem;padding-top:var(--pad-1);& h3{min-height:3.5rem;& a{color:var(--content-primary);font:400 2rem/100% var(--ff-poppins);max-width:25rem;min-height:3.5rem;transition:text-decoration 1s ease;&:hover{text-decoration:underline}}}& span{color:var(--content-secondary);font:400 .875rem/120% var(--ff-lora)}}}}}& section.about{background-color:var(--color-bg);color:var(--content-primary);padding-block:var(--pad-2);& .about-content{align-items:center;display:flex;justify-content:space-around;& .about-text{display:flex;flex-direction:column;gap:var(--gap-2);& h2{color:var(--content-primary);font:var(--title-h2)}& p{color:var(--content-secondary);font:var(--p-md);line-height:1.8;max-width:30rem}& .links{& .links-inner{border-radius:.875rem;display:flex;flex-direction:column;gap:var(--gap-1);padding:var(--pad-1);position:relative;&:before{background:hsla(0,0%,100%,.3);border-radius:.875rem;content:"";filter:blur(3px);height:100%;inset:0;position:absolute;width:100%;z-index:0}& span{color:var(--content-primary);font:600 1rem var(--ff-poppins);z-index:10}& .social-medias{display:flex;gap:var(--gap-1);z-index:1;a{align-items:center;background-color:var(--content-primary);border-radius:.5rem;color:var(--color-bg);display:flex;font:500 .875rem/100% var(--ff-poppins);gap:.25rem;justify-content:center;overflow:hidden;padding:.5rem;text-decoration:none;transition:background-color .3s ease,color .3s ease;width:6rem;& small{display:inline-block;max-width:6.25rem;overflow:hidden;position:relative;white-space:nowrap}& .icon-arrow-right{background-image:url(48edda78b1fc16317c72.svg);background-size:cover;height:.875rem;transition:background-image .3s ease;width:.875rem}&:hover.icon-linkedin{background-color:var(--blue-linkedin);color:var(--content-primary)}&:hover.icon-x{background-color:var(--x);color:var(--content-primary)}&:hover.icon-instagram{background-color:var(--rosa-instagram);color:var(--content-primary)}&:hover.icon-discord{background-color:var(--discord);color:var(--content-primary)}&:hover.icon-github{background-color:var(--github);color:var(--content-primary)}&:hover .icon-arrow-right{background-image:url(6d1f4d77adcc72434c2f.svg)}}& img{height:.875rem;width:.875rem}}}}}& .about-image{border-radius:1rem;box-shadow:1px 1px 5px hsla(0,0%,100%,.3);display:flex;height:100%;justify-content:center;max-width:30rem;overflow:hidden;& img{filter:grayscale(1);height:100%;object-fit:cover;transition:transform .3s ease,filter .3s ease;width:100%;&:hover{filter:grayscale(0);transform:scale(1.1)}}}}}}@keyframes move{0%{transform:translateX(0) translateY(0)}25%{transform:translateX(-10px) translateY(0)}50%{transform:translateX(0) translateY(10px)}75%{transform:translateX(10px) translateY(0)}to{transform:translateX(120px) translateY(120px)}}@media (width <= 90rem){main{& section{padding-block:var(--pad-05)}& section.hero{& h1{font:var(--title-h2)}}& section.projects{& h2{font:var(--title-h3)}& .cards{gap:var(--gap-2);grid-template-columns:repeat(auto-fit,minmax(450px,1fr));& .card{gap:var(--gap-1);padding:var(--pad-1);& .card-img{height:17rem}& .card-description{gap:.5rem;padding-top:var(--pad-1);& h3{min-height:fit-content;& a{font:400 1.5rem/100% var(--ff-poppins)}}& span{font:400 .875rem/120% var(--ff-lora)}}}}}& section.about{padding-block:var(--pad-1);& .about-content{gap:var(--gap-1);justify-content:space-between;& .about-text{gap:var(--gap-1);& h2{font:var(--title-h3)}& .links{& .links-inner{gap:var(--gap-05);padding:var(--pad-1);& span{font:600 1rem var(--ff-poppins)}& .social-medias{gap:var(--gap-1);a{gap:.25rem;overflow:hidden;width:6rem}}}}}}}}}@media (width <= 75rem){main{& section.projects{& h2{font:var(--title-h3)}& .cards{gap:var(--gap-2);grid-template-columns:repeat(auto-fit,minmax(400px,1fr));& .card{gap:var(--gap-1);padding:var(--pad-1);& .card-img{height:15rem;width:100%}& .card-description{gap:.5rem;padding-top:var(--pad-1);& h3{& a{font:400 1.5rem/120% var(--ff-poppins)}}& span{font:400 .875rem/120% var(--ff-lora)}}}}}& section.about{& .about-content{& .about-text{& .links{& .links-inner{& .social-medias{a{width:fit-content}}}}}}}}}@media (width <= 64rem){main{gap:var(--gap-1);& section.projects{& .cards{gap:var(--gap-1);& .card-description{padding-top:var(--pad-05);& h3{min-height:fit-content}}}}& section.about{padding-block:var(--pad-1);& .about-content{& .about-text{& h2{font:var(--title-h3)}& p{font:var(--p-sm);max-width:25rem}& .links{width:fit-content;& .links-inner{gap:var(--gap-05);padding:var(--pad-05);& span{font:600 .875rem/100% var(--ff-poppins)}& .social-medias{gap:var(--gap-05);a{font:600 .625rem/100% var(--ff-poppins);width:fit-content;& .icon-arrow-right{height:.625rem;width:.625rem}}}}}}& .about-image{max-width:25rem}}}}}@media (width <= 48rem){main{& .hello{font:400 .625rem/120% var(--ff-lora)}& section.hero{& h1{font:var(--title-h3)}}& section.projects{& h2{font:var(--title-h4)}& .cards{& .card{gap:var(--gap-05);& .card-description{padding-top:var(--pad-05);& h3{& a{font:var(--title-h5)}}}}}}& section.about{padding-block:var(--pad-1);& .about-content{align-items:start;flex-direction:column;& .about-text{& h2{font:var(--title-h5)}& p{font:var(--p-sm);max-width:100%}& .links{width:fit-content;& .links-inner{gap:var(--gap-1);padding:var(--pad-1);& span{font:600 1rem/100% var(--ff-poppins)}& .social-medias{flex-wrap:wrap;gap:var(--gap-05);a{font:500 .875rem/100% var(--ff-poppins);width:fit-content;& .icon-arrow-right{height:.625rem;width:.625rem}}}}}}& .about-image{max-width:25rem}}}}}@media (width <= 30rem){@keyframes fadeInScale{0%{filter:grayscale(1);transform:scale(1)}to{filter:grayscale(0);transform:scale(1.1)}}main{& section.hero{& h1{font:var(--title-h4)}}& section.projects{& h2{font:var(--title-h6)}& .cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));& .card{& .card-img{height:8rem}& .card-description{gap:.5rem;& h3{& a{font:var(--title-h6)}}}}}}& section.about{& .about-content{& .about-image{& img{animation-fill-mode:forwards;animation-name:fadeInScale;animation-timing-function:ease;animation-timeline:view();animation-range:entry 0 cover 30%}}}}}}footer{align-items:center;border-top:1px dashed var(--content-primary);display:flex;justify-content:space-between;padding-block:var(--pad-2);& span{color:var(--content-secondary)}& a:hover{color:var(--content-primary);text-decoration:underline}}@media (width <= 64rem){footer{padding-block:var(--pad-1);& span{font:var(--p-2sm)}& a{font:var(--p-sm)}}}@media (width <= 30rem){footer{padding-block:var(--pad-05);& span{max-width:10rem}}}