:root{interpolate-size:allow-keywords;--step--2: clamp(.64rem, .5935rem + .2327vw, .7738rem);--step--1: clamp(.8rem, .7195rem + .4026vw, 1.0315rem);--step-0: clamp(1rem, .8696rem + .6522vw, 1.375rem);--step-1: clamp(1.25rem, 1.0473rem + 1.0137vw, 1.8329rem);--step-2: clamp(1.5625rem, 1.2562rem + 1.5317vw, 2.4432rem);--step-3: clamp(1.9531rem, 1.4997rem + 2.2673vw, 3.2568rem);--step-4: clamp(2.4414rem, 1.7806rem + 3.3042vw, 4.3413rem);--step-5: clamp(3.0518rem, 2.1004rem + 4.7569vw, 5.787rem);--step-6: clamp(3.8147rem, 2.4584rem + 6.7815vw, 7.7141rem);--step-7: clamp(4.7684rem, 2.8503rem + 9.5904vw, 10.2829rem);--step-8: clamp(5.9605rem, 3.266rem + 13.4723vw, 13.707rem);--step-9: clamp(7.4506rem, 3.6868rem + 18.819vw, 18.2715rem);--step-10: clamp(9.3132rem, 4.081rem + 26.1612vw, 24.3559rem);--fluid-16-120: clamp(1rem, -1.2609rem + 11.3043vw, 7.5rem);--fluid-150-250: clamp(9.375rem, 7.2011rem + 10.8696vw, 15.625rem);--fluid-300-714: clamp(18.75rem, 9.75rem + 45vw, 44.625rem);--fluid-250-400: clamp(15.625rem, 12.3641rem + 16.3043vw, 25rem);--space-3xs: clamp(.25rem, .2065rem + .2174vw, .375rem);--space-2xs: clamp(.5rem, .4348rem + .3261vw, .6875rem);--space-xs: clamp(.75rem, .6413rem + .5435vw, 1.0625rem);--space-s: clamp(1rem, .8696rem + .6522vw, 1.375rem);--space-m: clamp(1.5rem, 1.3043rem + .9783vw, 2.0625rem);--space-l: clamp(2rem, 1.7391rem + 1.3043vw, 2.75rem);--space-xl: clamp(3rem, 2.6087rem + 1.9565vw, 4.125rem);--space-2xl: clamp(4rem, 3.4783rem + 2.6087vw, 5.5rem);--space-3xl: clamp(6rem, 5.2174rem + 3.913vw, 8.25rem);--primary-color: #f3505f;--red-color: #ff0642;--secondary-color: #ffdbb7;--bg-color: #080707;--bounce: linear( 0, .012 .9%, .05 2%, .411 9.2%, .517 11.8%, .611 14.6%, .694 17.7%, .765 21.1%, .824 24.8%, .872 28.9%, .91 33.4%, .939 38.4%, .977 50.9%, .994 68.4%, 1 )}.main__hero-section{display:flex;flex-direction:column;justify-content:space-around;min-height:100dvh}.main__container-titles{text-wrap:wrap;text-align:end;min-height:35dvh;color:var(--primary-color)}header{z-index:1;padding-block:2.5rem;width:100%;position:sticky;top:0}.header__nav-menu{z-index:99;letter-spacing:-7px;transition:top .6s ease-in-out;position:fixed;top:-4000px;left:0;right:0;min-height:100dvh;display:flex;align-items:center;justify-content:space-evenly;flex-direction:column;align-items:flex-start;font-size:93px;background-color:var(--bg-color);color:#fff}.header__nav-menu .header__container-logo{display:flex;justify-content:space-between;align-items:center;width:100%}.header__say-hello-action{display:grid;gap:.5rem;font-size:var(--step-0);letter-spacing:0;color:var(--primary-color);p {font-size: var(--step-1); display: flex; gap: .6rem;} a {text-decoration: none; color: var(--primary-color); border-block-end: 1px solid;}}.header__container-logo,.header__hamb{overflow:hidden}.header__container-hamb{z-index:9999;width:50px;height:50px;display:flex;flex-direction:column;border:1px #ff06403f solid;align-items:center;justify-content:center;gap:10px;cursor:pointer;border-radius:50%}.header__hamb-line1,.header__hamb-line2{background-color:#ff0642;width:30px;height:.5px;border-radius:.5em;transition:all .2s ease-in-out;justify-self:center;display:inline-block}.header__hamb-line2{width:22px;margin-inline-start:.1rem}.line-open{transform:rotate(-30deg);transform-origin:center center}.header__nav-link{padding:.6rem;view-transition-class:header-links;a {padding: .5rem 0;}}.active:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:.9rem;z-index:-1;background-color:var(--primary-color);border:1px solid black}.header__nav-link.active{view-transition-name:--header-link-active}.header__nav-link.active:before{view-transition-name:--header-link-active-before}.header__nav-link:nth-child(1){view-transition-name:--header-link-1}.header__nav-link:nth-child(2){view-transition-name:--header-link-2}.header__nav-link:nth-child(3){view-transition-name:--header-link-3}.header__nav-link:nth-child(4){view-transition-name:--header-link-4}::view-transition-old(.header__link-active),::view-transition-new(.header__link-active){height:100%}::view-transition-group(--header-link-active-before){animation-timing-function:var(--bounce);animation-duration:.4s}::view-transition-group(.header-links){z-index:1}.header__nav-link:where(.active){color:#000}.open{top:0}.header__container-social-links{gap:1.5rem;width:100%;display:flex}.header__container-social-links img{width:25px}.header__logo-img{width:71px;height:30px}canvas{width:100%;height:50dvh;left:-2px;outline:none;pointer-events:none}.main__about-me-section{background-color:var(--primary-color);color:#000;text-wrap:balance;display:grid;gap:var(--space-2xl);padding-block-end:3rem;line-height:1.6}.main__line{width:clamp(17.5rem,4.1522rem + 66.7391vw,55.875rem);height:1px;background-color:#000}.main__line--secondary{place-self:flex-end}.main__about-me-secundary{max-width:35ch;margin-inline-start:clamp(1.5625rem,.4538rem + 5.5435vw,4.75rem)}.main__gallery{display:grid;place-items:center;gap:var(--space-l);grid-template-columns:1fr;img {width: 280px;}}.main__project-card{display:grid;gap:var(--space-xs)}.main__label{display:flex;gap:.5rem;flex-wrap:wrap}.main__label>span{background-color:var(--bg-color);color:var(--primary-color);padding:1rem;border-radius:.5rem}@keyframes test{to{width:5%;opacity:1}}.main__title-container{display:flex;flex-direction:column}.main__title-container .main__title{font-size:clamp(5rem,-.2174rem + 26.087vw,20rem);text-wrap:nowrap;font-weight:700;letter-spacing:-8px}#projects{text-align:end}.main__img-about{scale:.5;opacity:0;width:var(--fluid-150-250);rotate:-5deg;animation:appear forwards;animation-timeline:view();animation-range:entry 70% cover 80%}.main__about-text{width:100%;font-size:var(--step-2)}.main__projects{display:grid;gap:var(--space-2xl)}.main__projects .main__project-card:nth-child(2){justify-self:end}.main__project-card>a img{width:var(--fluid-300-714);height:auto;border-radius:8px}@keyframes appear{to{scale:1;opacity:1}}.main__skills-section{display:grid;min-height:100dvh;background-color:var(--secondary-color);color:var(--bg-color)}.section-title{position:relative;display:flex;align-items:center;justify-content:center;gap:1rem;padding-inline:1rem;text-wrap:nowrap;h2 {letter-spacing: 0px; font-size: var(--step-3);} .section-title__line {width: 0%; opacity: 0; height: 2px; background-color: var(--bg-color); animation: test forwards; animation-timeline: view(); animation-range: entry 0% cover 45%;}}.main__skills-container{display:flex;flex-direction:column;margin-block-end:5rem;details {width: 100%; border-bottom: 1px solid var(--bg-color); position: relative; transition: transform .5s ease; ::marker {content: "";} :not(p)::after {content: "▸"; transition: all .2s; transform-origin: 50%; color: var(--primary-color); font-size: var(--step-7);}} ::details-content {transition: all .3s ease,content-visibility .3s allow-discrete; height: 0; overflow: clip;} [open]::details-content {height: auto; padding: 2rem 3rem;} details[open] summary::after {transform: rotate(90deg);} summary {display: flex; cursor: pointer; justify-content: space-evenly; max-width: 1000px; font-size: var(--step-7);}}.main__progress-section{display:flex;flex-direction:column;justify-content:space-around;min-height:100dvh}.main__progress-section .section-title__about{color:var(--red-color);text-wrap:pretty;text-align:center;font-size:var(--step-1);letter-spacing:0}.main__progress-section .section-title__line{background-color:var(--red-color)}.progress__card{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;align-items:center;color:var(--bg-color);border-radius:.5rem;background-color:var(--primary-color);width:var(--fluid-250-400);height:430px;rotate:-12deg;img {width: 100px;} .card-title {font-size: var(--step-3); letter-spacing: -6px;} p {font-weight: lighter;} div:first-of-type {display: flex; flex-direction: column; align-items: center; gap: 1.5rem; width: 50%;}}.progress__card:nth-child(2n){rotate:12deg}.progress__card-footer{display:flex;justify-content:center;width:100%;p:last-of-type {transform: translateX(50px);}}.progress-section_cards-container{display:flex;gap:10rem}.main__contact-section{color:var(--primary-color);p {font-size: var(--step--1);}}.main__contact-section-wrapper{min-height:100dvh;display:flex;flex-direction:column;justify-content:space-around}.contact-title{font-size:var(--step-6);text-wrap:balance}.contact-section__nav-title{font-size:22px;margin-block-end:1rem}.main__contact-header{display:flex;p:last-of-type {margin-left: auto;}}.main__footer-nav{display:flex;flex-direction:column;gap:3rem}.contact-section__nav-wrapper{li {font-size: var(--step--1); cursor: pointer; margin-block-end: .5rem;} div {display: flex; flex-direction: column; gap: .5rem;}}.contact-section__nav-wrapper .back-to-top{border:var(--primary-color) solid 1px;border-radius:5rem;width:75px;height:75px;cursor:pointer;display:grid;place-items:center}.contact-section__nav-links-wrapper{display:flex;justify-content:space-around;align-items:center}.contact-section__btn-contact{text-align:center;letter-spacing:-4px;color:var(--bg-color);background-color:var(--red-color);font-size:var(--step-3);padding:.5rem;border-radius:1rem;cursor:pointer}.contact-section_footer-line{position:relative;top:3vh;width:100%;height:1px;background-color:var(--primary-color)}.contact-section__bottom-info{justify-content:space-between;display:flex;margin-inline:3rem;nav {display: flex; gap: 1rem; margin-left: auto; > li {list-style: none;} img {width: 25px;}}}@keyframes colon-blink{0%,to{opacity:1}50%{opacity:0}}.colon{animation:colon-blink 1.3s infinite;font-size:1.1rem}@media (width >= 970px){h2{text-wrap:nowrap}.header__hamb{display:none}.header__nav-menu{min-height:auto;position:relative;top:0;font-size:16px;background-color:transparent}.header__nav-menu>ul{display:flex;gap:5rem;letter-spacing:0}.header__nav-menu .header__container-logo{display:none}.header__container-social-links,.header__say-hello-action{display:none}.main__gallery{grid-template-columns:repeat(2,1fr);img:nth-child(1) {width: 588px; grid-column: 1/5;} img:nth-child(2) {width: 350px;} img:nth-child(3) {width: 412px;}}.main__about-me-secundary{max-width:50ch}.section-title{padding-block:8rem}.progress__card{height:620px}.main__footer-nav{flex-direction:row;justify-content:space-around;align-items:last baseline;gap:5rem}.main__footer-nav .contact-section__btn-contact{width:60%}.contact-section__nav-wrapper{width:30%}.progress-section_cards-container{margin-block:5rem}.contact-section_footer-line{top:5vh}.main__footer-nav{margin-block-start:7rem}}@media (width < 400px){.header__nav-menu{font-size:70px}}