:root{--card-margin:4vw;--card-top-offset:2.1vh}@font-face{font-family:comfortaa;src:url(/static/fonts/Comfortaa-VariableFont_wght.ttf);font-display:swap}html,body{margin:0;padding:0;font-family:comfortaa,sans-serif,Helvetica,sans-serif;overflow:hidden;height:100%;background-color:#05516c}.material-symbols-outlined{font-size:20px!important;line-height:0!important}textarea{font-family:comfortaa,sans-serif,Helvetica,sans-serif}input[type=text]{font-family:comfortaa,sans-serif,Helvetica,sans-serif}.cards-container *{box-sizing:border-box;margin:0;padding:0}a{color:#fff;text-decoration:none}h1{font-weight:100}#container-mouse,#container-mouse-projects{visibility:hidden;position:absolute;left:50%;bottom:20px;transform:translateX(-50%);text-align:center;background-color:initial;display:flex;align-items:center;justify-content:center;z-index:2}#container-mouse-projects{visibility:visible}.mouse{width:20px;height:40px;border:1px solid #fff;border-radius:60px;position:relative;&::before { content:""; width:6px; height:6px; position:absolute; top:7px; left:50%; transform:translateX(-50%); background-color:white; border-radius:50%; opacity:1; animation:wheel 1.8s infinite; }}.tile{opacity:.4;position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-origin:center center;box-sizing:border-box;transition:transform 4.5s,left 5s,top 5s,height .5s,width .5s,opacity 1s}#wrap{position:relative;width:100%;height:100%;perspective:2800px;transform-style:preserve-3d}#wrap .transitionX,.transitionY{height:100vh;width:100vw;position:absolute;top:0;left:0;display:none;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}.transitionX:focus{outline:none}.transitionY:focus{outline:none}.visible{display:block!important}.first-page{width:100%;height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.container{display:flex;margin:auto}.logo-pages{z-index:100;width:45px;height:45px;position:absolute;right:15px;top:15px}.logo-pages img{width:100%}#home{background:radial-gradient(ellipse at center,#667a86,#05516c)}#cubic .container{position:absolute}.logo{position:absolute;cursor:pointer;top:50%;left:50%;transform:translate(-50%,-50%);width:170px;z-index:3;border-radius:50%}.logo-mobile{cursor:pointer;position:absolute;display:none;z-index:3;width:150px;transition:transform 1s,right 1.5s,top 1.5s}#home .navigation{color:#fff}.logo img,.logo-mobile img{width:100%}.moveRight,.moveLeft{position:absolute;height:auto;display:flex;align-items:center;top:50%;transform:translateY(-50%);padding:20px 0}.moveLeft{left:0}.moveRight{right:0}.moveUp,.moveDown{width:auto;position:absolute;left:50%;transform:translateX(-50%);text-align:center}.navigation.nav-horizontal{padding:20px 0}.moveUp{padding:0 10px 20px}.moveDown{padding:20px 10px 0}.moveUp{top:0}.moveDown{bottom:0}.ScollDown{position:absolute;left:50%;bottom:0;transform:translateX(-50%);text-align:center}.navigation{font-size:10px;line-height:1;align-items:center;cursor:pointer;z-index:2}.navigation span{display:inline-block;letter-spacing:5px}.nav-vertical span{margin-right:-5px}#contact form,#skills .cube-container,#about .description,#projects .projects{position:relative;opacity:0;right:400px}#projects{width:100%;height:100%;position:relative;background:linear-gradient(#667a86,#05516c)}#projects .container{display:grid;grid-template-columns:1fr 3fr}#projects .moveUp{color:#fff}#projects .moveDown{color:#fff}#projects .projects-title{display:none;height:100px;position:relative;flex-direction:column}#projects .projects-title h1{margin:auto;letter-spacing:8px;font-size:2.5em;color:#fff}.poject-buttons{display:flex;justify-content:space-between}.project-btn{display:flex;align-items:center;margin:10px;padding:8px 10px;color:#fff;outline:1px solid #fff;outline-offset:-4px;border-radius:20px;cursor:pointer}.projects-icon{width:1.2rem;margin-right:5px}.form-container{margin:auto}.form-group{position:relative;margin-bottom:15px}.form-control{width:100%;padding:10px;border:1px solid #fff;border-radius:6px;font-size:16px;color:#fff;display:block;width:350px;background:0 0;outline:none;margin-bottom:17px;margin-top:17px}.form-control:focus{outline:none}.form-label{position:absolute;top:10px;left:10px;transition:all .2s ease;pointer-events:none}.form-control:focus+.form-label,.form-control:not(:placeholder-shown)+.form-label{top:-14px;left:10px;font-size:12px;color:#fff}.btn{font-family:inherit;background-color:initial;border:1px solid #fff;width:100%;padding:10px;border-radius:6px;color:#fff;font-size:16px;cursor:pointer}.status{display:none;margin-top:10px;padding:10px;border-radius:6px;font-size:14px}.status--info{display:block;color:#fff;border:1px dashed #fff}.status--success{display:block;color:#e7ffe7;border:1px solid #2e7d32;background-color:rgba(46,125,50,.25)}.status--error{display:block;color:#ffe7e7;border:1px solid #c62828;background-color:rgba(198,40,40,.25)}#contact{background:linear-gradient(#05516c,#667a86)}#contact .container{width:80vw;display:grid;grid-template-columns:1fr 1fr;color:#fff}#contact .moveDown{color:#fff}#contact .moveUp{color:#fff}#contact .contact-title{position:relative;display:flex;flex-direction:column}#contact .contact-title h1{margin:auto;letter-spacing:8px;font-size:2.5em}#skills{background:linear-gradient(to right,#05516c,#667a86)}#skills .container{width:80vw;display:grid;grid-template-columns:1fr 1.5fr;color:#fff}#skills .moveRight{color:#fff}#skills .moveLeft{color:#fff}#skills .skills-title{position:relative;display:flex;flex-direction:column}#skills .skills-title h1{margin:auto;letter-spacing:8px;font-size:2.5em}.cube-container{height:100%;width:100%;display:flex;flex-direction:column}.scene{width:200px;height:230px;position:relative;perspective:800px;margin:auto}.carousel{width:100%;height:100%;position:absolute;transform:translateZ(-288px);transform-style:preserve-3d;transition:transform .25s linear;*/}.carousel__cell{display:flex;position:absolute;width:200px;height:230px;transform-style:preserve-3d}.carousel__cell img{transition:all 1s linear;width:130px;height:130px;-webkit-box-reflect:below 0 -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(30%,transparent),to(RGBA(0,0,0,.3)))}.carousel__cell .center{margin:auto;width:130px;height:130px;padding:20px}.center .circle-chart{display:none;position:absolute!important}.center:hover .circle-chart{display:block;z-index:3;-webkit-box-reflect:below 0 -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(30%,transparent),to(RGBA(0,0,0,.3)))}.center:hover img{transform:scale(.6);-webkit-box-reflect:below 0 -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(30%,transparent),to(transparent))}.carousel__cell:nth-child(1){transform:rotateY(0)translateZ(288px)}.carousel__cell:nth-child(2){transform:rotateY(40deg)translateZ(288px)}.carousel__cell:nth-child(3){transform:rotateY(80deg)translateZ(288px)}.carousel__cell:nth-child(4){transform:rotateY(120deg)translateZ(288px)}.carousel__cell:nth-child(5){transform:rotateY(160deg)translateZ(288px)}.carousel__cell:nth-child(6){transform:rotateY(200deg)translateZ(288px)}.carousel__cell:nth-child(7){transform:rotateY(240deg)translateZ(288px)}.carousel__cell:nth-child(8){transform:rotateY(280deg)translateZ(288px)}.carousel__cell:nth-child(9){transform:rotateY(320deg)translateZ(288px)}.about .description{padding-left:20px;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;white-space:wrap}.about .description p{margin:auto;font-size:1.1em;letter-spacing:5px;text-indent:3em;text-indent:20px}#about{background:linear-gradient(to right,#667a86,#05516c)}#about .container{padding:0 150px;display:grid;grid-template-columns:1fr 2fr;color:#fff}#about .moveLeft{color:#fff}#about .moveRight{color:#fff}#about .about-title{position:relative;display:flex;flex-direction:column}#about .about-title h1{margin:auto;letter-spacing:8px;font-size:2.5em}.rotateCubeTopOut{will-change:transform;transform:translateZ(0);transform-origin:50% 100%;animation:rotateCubeTopOut 1.2s ease-in}.rotateCubeTopIn{will-change:transform;transform:translateZ(0);transform-origin:50% 0%;animation:rotateCubeTopIn 1.2s ease-in}.rotateCubeBottomOut{will-change:transform;transform:translateZ(0);transform-origin:50% 0%;animation:rotateCubeBottomOut 1.2s ease-in}.rotateCubeBottomIn{will-change:transform;transform:translateZ(0);transform-origin:50% 100%;animation:rotateCubeBottomIn 1.2s ease-in}.rotateCubeRightOut{will-change:transform;transform:translateZ(0);transform-origin:100% 50%;animation:rotateCubeRightOut 1.2s ease-in}.rotateCubeRightIn{will-change:transform;transform:translateZ(0);transform-origin:0% 50%;animation:rotateCubeRightIn 1.2s ease-in}.rotateCubeLeftOut{will-change:transform;transform:translateZ(0);transform-origin:0% 50%;animation:rotateCubeLeftOut 1.2s ease-in}.rotateCubeLeftIn{will-change:transform;transform:translateZ(0);transform-origin:100% 50%;animation:rotateCubeLeftIn 1.2s ease-in}@keyframes rotateCubeTopOut{50%{animation-timing-function:ease-out;transform:translate3d(0,-50%,-100px)rotateX(45deg)}100%{transform:translate3d(0,-100%,0)rotateX(90deg)}}@keyframes rotateCubeTopIn{0%{transform:translate3d(0,100%,0)rotateX(-90deg)}50%{animation-timing-function:ease-out;transform:translate3d(0,50%,-100px)rotateX(-45deg)}}@keyframes rotateCubeBottomOut{50%{animation-timing-function:ease-out;transform:translate3d(0,50%,-200px)rotateX(-45deg)}100%{transform:translate3d(0,100%,0)rotateX(-90deg)}}@keyframes rotateCubeBottomIn{0%{transform:translate3d(0,-100%,0)rotateX(90deg)}50%{animation-timing-function:ease-out;transform:translate3d(0,-50%,-200px)rotateX(45deg)}}@keyframes rotateCubeRightOut{50%{animation-timing-function:ease-out;transform:translate3d(-50%,0,0)rotateY(-45deg)}100%{transform:translate3d(-100%,0,0)rotateY(-90deg)}}@keyframes rotateCubeRightIn{0%{transform:translate3d(100%,0,0)rotateY(90deg)}50%{animation-timing-function:ease-out;transform:translate3d(50%,0,0)rotateY(45deg)}}@keyframes rotateCubeLeftOut{50%{animation-timing-function:ease-out;transform:translate3d(50%,0,0)rotateY(45deg)}100%{transform:translate3d(100%,0,0)rotateY(90deg)}}@keyframes rotateCubeLeftIn{0%{transform:translate3d(-100%,0,0)rotateY(-90deg)}50%{animation-timing-function:ease-out;transform:translate3d(-50%,0,0)rotateY(-45deg)}}.circle-chart__circle{stroke-width:2.5;stroke-linecap:round;fill:none;animation:circle-chart-fill 2s reverse;transform:rotate(-90deg);transform-origin:center}.circle-chart__circle--negative{transform:rotate(-90deg)scale(1,-1)}.circle-chart__background{stroke:#9ed6f6;stroke-width:2;fill:none}.circle-chart__info{animation:circle-chart-appear 2s forwards;opacity:0;color:red}.circle-chart__percent{text-anchor:middle;font-size:8px;transform:translateY(.5em);fill:#fff}.success-stroke{stroke:#05516c}@keyframes circle-chart-fill{to{stroke-dasharray:0 100}}@keyframes circle-chart-appear{to{opacity:1;transform:translateY(0)}}.circle-chart{width:130px;height:130px;background-color:rgba(0,0,0,.8);-webkit-border-radius:50%;border-radius:50%}@keyframes circle-chart-fill{to{stroke-dasharray:0 100}}@keyframes circle-chart-appear{to{opacity:1;transform:translateY(0)}}@keyframes wheel{to{opacity:0;top:27px}}.hidden{opacity:0;visibility:hidden;transition:opacity .5s ease-out}.logo-fixed{position:fixed!important;top:auto!important;left:auto}@keyframes opacityZero{0%{opacity:1}80%{opacity:.7}100%{opacity:0}}.cards-container{width:80vw;height:100vh;margin:4vh auto;text-align:center;overflow-y:scroll;overflow-x:hidden;scrollbar-width:none;scroll-snap-type:y mandatory}.cards-container::-webkit-scrollbar{display:none}#cards{display:grid;gap:var(--card-margin);list-style:none;--numcards:5;padding-bottom:calc((var(--numcards) + 1) * var(--card-top-offset))}.card{scroll-snap-align:start;scroll-snap-stop:always;top:0;height:90vh;padding-top:15px}.card__content{padding:40px 15px;color:#fff;height:100%;border-radius:1em;overflow:hidden;display:flex;transform-origin:50% 0%;will-change:transform;transform:translate3d(0,0,0)}.card__content>div{grid-area:text;width:80%;display:flex;gap:2em;flex-direction:column;align-items:center;justify-content:center}.card__content>figure{grid-area:img;overflow:hidden}.card__content>figure>img{width:100%;height:100%;object-fit:contain}#card_1{background:0 0;background-color:initial;--index:1}#card_2{--index:2}#card_3{--index:3}#card_4{--index:4}#card_5{--index:5}.scroll-progress{width:10vw;position:fixed;left:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:20px}.scroll-dot{width:10px;height:10px;border-radius:50%;background-color:#fff;cursor:pointer;transition:all .3s ease}.scroll-dot.active{background-color:#042b3a;transform:scale(1.3);box-shadow:0 0 10px rgba(255,255,255,.7)}@media only screen and (max-width:850px){#cards{view-timeline-name:--cards-element-scrolls-in-body}@supports(animation-timeline:view()){.card{--index0:calc(var(--index) - 1);--reverse-index:calc(var(--numcards) - var(--index0));--reverse-index0:calc(var(--reverse-index) - 1)}@keyframes scale-fade{to{transform:scale(calc(1.1 - (.1 * var(--reverse-index))))}0%{opacity:1}80%{opacity:.8}100%{opacity:.6}}.card__content{--start-range:calc(var(--index0) / var(--numcards) * 100%);--end-range:calc(var(--index) / var(--numcards) * 100%);animation:linear scale-fade forwards;animation-timeline:--cards-element-scrolls-in-body;animation-range:exit-crossing var(--start-range)exit-crossing var(--end-range)}.card__content *{animation:linear opacityZero forwards;animation-timeline:--cards-element-scrolls-in-body;animation-range:exit-crossing var(--start-range)exit-crossing var(--end-range)}}}@media only screen and (min-width:851px){#cards{animation-timeline:none}.cards-container{scroll-snap-type:y mandatory;overflow-y:auto}}@media only screen and (max-width:1300px){.card__content{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}#skills .container{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto}#projects .container{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto}#contact .container{width:100vw;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto}#about .container{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto}.scene{margin-top:10px}.about-title,.skills-title,.contact-title{margin:40px auto}}@media only screen and (max-width:850px){#wrap{perspective:none;transform-style:flat}#about .container{padding:0}.logo-mobile{display:block;position:fixed;top:50%;right:50%;transform:translate(50%,-50%)}#about .description{padding:10px}.logo{visibility:hidden}#container-mouse{visibility:visible}#wrap .transitionX,.transitionY{transform:none;position:relative;height:auto;min-height:80dvh;width:100vw;display:block}#home{height:100dvh!important;min-height:100dvh}.cards-container{height:100dvh}#wrap{overflow:scroll;display:flex;flex-flow:column;display:block}#home{order:1}#wrap #about{order:3;height:100dvh}#wrap #contact .container{height:auto}#projects{order:2}#skills{order:3}#contact{order:5}.logo-pages{display:none}.navigation{display:none!important}#about{background:linear-gradient(#05516c,#4982a0);min-height:80dvh}#about .container{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;height:80dvh}#projects{overflow:visible;display:block;height:auto;min-height:80vh;background:linear-gradient(#4982a0,#05516c)}#projects .projects-title{display:flex}#skills{background:linear-gradient(#05516c,#4982a0);min-height:80dvh}#skills .container{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;height:80dvh}#contact{background:linear-gradient(#4982a0,#05516c);min-height:80dvh}#contact .container{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;height:80dvh}.cards-container{overflow:visible;height:auto;margin:0 auto;width:97vw}#container-mouse-projects{visibility:hidden}#cards{gap:0;padding-bottom:0}.card{position:sticky;padding-top:calc(var(--index) * var(--card-top-offset));height:97dvh}#card_1 .card__content{height:calc(97dvh - 100px)}#card_2,#card_3,#card_4,#card_5{padding-top:calc(var(--index) * var(--card-top-offset) + 100px)}.scroll-progress{display:none}}