*{box-sizing:border-box;margin:0;padding:0;color:var(--text-main-color)}body{background-color:var(--background-color)}h1{font-family:var(--font-serif);font-size:2rem;text-align:center}main{font-size:1.5rem;position:relative;top:0;width:100%;height:100vh;overflow:hidden}#container{position:absolute;display:block}#main{--btnWidth: 4rem;--btnHeight: 4rem;--btnGap: 1rem;--bottomPosition: 50px;position:absolute;bottom:var(--bottomPosition);left:0;right:0;margin:auto 0 0;width:100%;height:auto;display:flex;flex-direction:column}#about{display:flex;flex-direction:column;align-items:center;width:fit-content;margin:0 auto 1rem}#about h1{color:var(--white-color);font-family:var(--font-serif);text-decoration:none;font-weight:700;font-size:2.4rem;margin-bottom:-.8rem}#about h2{color:var(--white-color);font-family:var(--font-main);font-weight:lighter;font-size:1.5rem}#about h1:after{content:"";display:block;translate:0 1.3rem;width:100%;height:3px;background-color:var(--white-color);border-radius:100%}#pointcloudGUI{display:flex;justify-content:center;align-items:center;gap:var(--btnGap)}#sceneInfo{text-decoration:none;font-family:var(--font-main);font-weight:700;background-color:var(--white-color);border-radius:var(--btnWidth);display:flex;align-items:center;justify-content:center}#sceneInfo>img{height:var(--btnHeight);transition:transform .2s;z-index:1}#sceneInfo:after{content:"More info about this project";background-color:var(--white-color);color:var(--black-color);font-size:1.5rem;padding:1.095rem 1.095rem 1.095rem 2rem;transform:translate(11rem);position:absolute;border-radius:0 var(--btnHeight) var(--btnHeight) 0;clip-path:ellipse(0% 50% at 0% 50%);transition:clip-path .3s ease}#sceneInfo:hover:after{clip-path:ellipse(110% 150% at 0% 50%)}#pointFullscreen{text-decoration:none;font-family:var(--font-main);font-weight:700;background-color:var(--white-color);border-radius:var(--btnWidth);display:flex;align-items:center;justify-content:center}#pointFullscreen>img{height:var(--btnHeight);scale:80%;transition:transform .2s;z-index:1}#sceneControl{list-style:none;height:var(--btnHeight);width:calc(var(--btnWidth) * 3);border-radius:var(--btnWidth);overflow:hidden;display:flex;justify-content:center}#sceneControl>li>button{font-size:2rem;cursor:pointer;border:0;top:0;bottom:0;height:100%;width:var(--btnWidth);margin:auto;background-color:var(--white-color);transition:all .3s ease}#sceneControl>li>button>img{top:0;bottom:0;height:100%;margin:auto;transition:transform .2s}img.left{rotate:-90deg}img.right{rotate:90deg}#scenePauseButton{scale:70%}#sceneControl>li>button:hover>img,#sceneInfo:hover>img,#pointFullscreen:hover>img{transform:scale(.8)}.transition>li>button{opacity:50%;cursor:not-allowed!important}#demo{margin-top:5rem;display:flex;flex-direction:column;align-items:center;gap:1rem;overflow:hidden}#demo__content{display:block;width:max(min(2048px,75%),23rem);aspect-ratio:2.38;height:auto;border-radius:1rem;background-color:#00000059;overflow:hidden}#demo__content>video{width:100%;height:100%}#work{margin:100px 0 200px}#work h1{color:var(--text-main-color);font-family:var(--font-serif);font-size:2rem;text-align:center}#work p{margin:0 0 2rem;color:var(--text-secondary-color);font-size:1rem;text-align:center}.workContainer{position:relative;width:90%;max-width:1500px;margin:auto;display:grid;grid-template-columns:repeat(var(--workGridColums),1fr);grid-template-rows:repeat(var(--workGridRows),1fr);aspect-ratio:var(--workGridColums) / var(--workGridRows);gap:.5rem;justify-content:center;align-items:center}.work__card{grid-area:var(--workGridPosition);height:100%;overflow:hidden;position:relative;filter:grayscale(0);transition:all .2s ease-in-out;border-radius:1rem;box-shadow:#00000029 0 10px 36px}.work__card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:var(--image);background-size:cover;background-repeat:no-repeat;background-position-x:calc(50% - var(--offsetX));background-position-y:calc(var(--size) * var(--parallax) * var(--strength));transform:scale(1.2)}.workContainer:has(.work__card:hover) .work__card:not(.work__card:hover){filter:grayscale(50%)}.work__card:hover{box-shadow:#000000a3 0 20px 64px;transform:scale(105%);z-index:3}.work__card .work__card-title{position:absolute;font-size:2rem;font-family:var(--font-serif);color:var(--white-color);top:0;left:1rem;opacity:0;transition:opacity .3s ease,top .3s ease}.work__card:hover .work__card-title{opacity:1;top:1rem}@media only screen and (max-width: 600px){.workContainer{width:95%;gap:.3rem}}.timeline{--line_width: 4px;--line_distance: 2rem;--date_height: 3rem;color:var(--text-main-color);margin:80px 0;display:grid;align-content:center}.timeline>h1{text-align:center;margin:2rem 0;font-family:var(--font-serif)}.timeline__container{list-style:none;width:min(1200px,90%);margin:auto;display:grid;grid-template-columns:var(--line_width) 1fr;grid-auto-columns:max-content;column-gap:var(--line_distance)}.timeline__container:before{content:"";grid-column:1;grid-row:1 / span 20;background-color:var(--text-main-color);border-radius:var(--line_width)}.timeline>h1:after{left:0;right:0;margin:auto;position:absolute;content:"";display:block;width:calc(min(1200px,90%) - var(--line_width));height:5rem;border:inset var(--line_width);border-radius:.5rem 0 0;border-right:0;border-bottom:0}.timeline>h1.bottom:after{margin:-5rem auto;border:inset var(--line_width);border-radius:0 0 0 .5rem;border-right:0;border-top:0}.timeline__item:not(:last-child){margin-bottom:3rem}.timeline__item{grid-column:2;grid-row:span 2}.timeline__item--date{background-color:var(--date-color);height:var(--date_height);text-align:center;font-family:var(--font-serif);color:var(--white-color);display:grid;place-content:center;border-radius:10vh}.timeline__item>.timeline__item--date:after{content:"";position:absolute;width:var(--line_distance);height:var(--line_width);background-color:var(--text-main-color);transform:translate(calc(var(--line_distance) * -1),calc(var(--date_height) / 2 - var(--line_width) / 2))}.timeline__item--content{margin-inline:2rem;padding:1.5rem;border-radius:0 0 5px 5px;box-shadow:#00000029 0 10px 36px,#0000000f 0 0 0 1px;background-color:var(--text-secondaryAlt-color)}.timeline__item--content h3{font-size:1.5rem;margin-bottom:.4rem}@media (min-width: 900px){.timeline__container{grid-template-columns:1fr var(--line_width) 1fr}.timeline__container:before{grid-column:2}.timeline__item:nth-child(odd){grid-column:1}.timeline__item:nth-child(even){grid-column:3}.timeline__item:nth-child(2){grid-row:2/4}.timeline__item:nth-child(odd)>.timeline__item--date:after{justify-self:end;transform:translate(var(--line_distance),calc(var(--date_height) / 2 - var(--line_width) / 2))}.timeline>h1:after{border:0;border-radius:0;background-color:var(--text-main-color);width:var(--line_width)}.timeline>h1.bottom:after{border:0;border-radius:0;height:2.5rem}}.skills{margin-top:100px}.skills__container{margin:0 auto;max-width:1200px;background-color:var(--background-color);border-radius:25px;position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));padding:50px;gap:50px;list-style:none}.skills__item{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;border-radius:15px;cursor:pointer;background-color:var(--white-color);transform:translate(0);box-shadow:#0000000d 0 10px 36px,#0000000f 0 0 0 1px;transition:transform .2s,box-shadow .2s,background-color .3s ease}.skills__item:hover{transform:translate(5px,-10px);box-shadow:#00000080 -5px 10px 40px,#0003 -5px 10px}.skills__item.active{background-color:var(--black-color)}.skills__item h3{position:absolute;bottom:15px;text-align:center;font-size:1.2rem;color:var(--black-color);transition:all .3s ease}.skills__item.active h3{color:var(--white-color);transform:translateY(-150px)}.skills__item p{color:var(--white-color);padding:30px 5px 5px;position:absolute;text-align:center;clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);transition:all .3s}.skills__item.active p{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.skills__item-Logo-container{padding:20px;display:flex;justify-content:center;gap:5px;flex-wrap:wrap}.skills__item-Logo{width:50px;transition:filter .3s ease,scale .2s ease}.skills__item-Logo:hover{scale:120%}.skills__item.active .skills__item-Logo{filter:blur(30px)}@media only screen and (max-width: 600px){.software-programs__item-container{grid-template-columns:repeat(auto-fit,minmax(min(100px,100%),1fr));padding:20px}}#contactForm{margin-top:80px;background-image:linear-gradient(58.2deg,#b56576 0%,#6d597a 50%,#355070 100%);box-shadow:0 0 50px 10px #00000080}.contactForm__container{display:flex;align-items:center;justify-content:center;padding:50px 0}form{width:30%;max-width:600px;display:grid;grid-template-columns:1fr 1fr;grid-gap:10px}.contactForm__title{font-family:var(--font-serif);font-weight:700;color:var(--white-color)}.contactForm__item{padding-left:10px;height:2rem;border-style:solid;border-radius:8px;box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;font-family:var(--font-main);background-color:var(--white-color);color:#6d597a}.contactForm__item:focus{background-image:linear-gradient(118.2deg,#b5657600 0%,#b5657649 100%)}#message{resize:vertical;height:9rem}#contactForm__submit{background-color:#645878;color:var(--white-color);font-weight:700;font-size:1rem;cursor:pointer;transition:background-color .3s ease}#contactForm__submit:hover{background-color:#746a85}#contactForm__submit.loading{background-color:#616161;background-image:repeating-linear-gradient(60deg,transparent 0px,transparent 9px,#818181 10px,#818181 19px,transparent 20px);animation:50s infinite linear submit_load}@keyframes submit_load{0%{background-position-x:0}to{background-position-x:100vw}}#contactForm__alert{border-style:solid;font-weight:700;text-align:center;font-size:1.5rem;color:var(--white-color);opacity:0;transform:scalex(.7);transition:all .3s ease}#contactForm__alert.sent,#contactForm__alert.error{opacity:1;transform:scalex(1)}#contactForm__alert.sent{background-color:#20c464;border-color:#56ce88}#contactForm__alert.sent:after{content:"Message Send!"}#contactForm__alert.error{background-color:#c42b20;border-color:#d12626}#contactForm__alert.error:after{content:"ERROR"}.full-width{grid-column:1/3}@media only screen and (max-width: 600px){form{width:95%}}.contactForm__container>.divider{display:block;margin:0 50px;width:5px;height:200px;background-color:var(--white-color);border-radius:5px}.socials__container{list-style:none;display:flex;flex-direction:column;gap:5px}.socials__item>.socials__links{display:flex;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;border-radius:15px;background-color:var(--white-color);overflow:hidden;box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;z-index:10;transition:background-color .3s ease}.socials__item>.socials__links:hover{background-color:#0000}.socials__item>.socials__links>.socials__background{position:absolute;display:inline-block;width:60px;height:60px;border-radius:15px;background:var(--backgroundImage);clip-path:circle(0% at 0 50%);transition:clip-path .3s ease,background-color .3s ease}.socials__item>.socials__links:hover>.socials__background{clip-path:circle(110% at 0 50%)}.socials__item>.socials__links:focus>.socials__background{clip-path:circle(110% at 50% 0);border-style:solid;border-color:#ffffff4d}.socials__item>.socials__links>.socials__icon{display:block;width:100%;height:100%;background:var(--backgroundImage);mask-image:var(--icon);-webkit-mask-image:var(--icon);transition:background-color .3s ease}.socials__item>.socials__links:hover>.socials__icon,.socials__item>.socials__links:focus>.socials__icon{background-color:#fff;background-image:none}.socials__item>.socials__links>.socials__links-title{position:absolute;background-color:var(--gray-color);color:var(--white-color);font-family:var(--font-main);padding:.5rem 1rem;border-radius:5px;transform:translate(0) scale(.1,.2);opacity:0;transition:transform .3s .2s ease,opacity .3s .2s ease}.socials__item>.socials__links:hover>.socials__links-title{opacity:1;transform:translate(90px) scale(1)}@media only screen and (max-width: 1100px){.contactForm__container{flex-direction:column}.contactForm__container>.divider{margin:25px 0;width:200px;height:5px}.socials__container{flex-direction:row}.socials__title{position:absolute;text-align:center}.socials__item{margin-top:50px}.socials__item>.socials__links>.socials__background{clip-path:circle(0% at 50% 0)}.socials__item>.socials__links:hover>.socials__background{clip-path:circle(110% at 50% 0)}.socials__item>.socials__links:hover>.socials__links-title{opacity:1;transform:translateY(60px) scale(1)}}#commercialwork h1{margin:0 0 2rem}#commercials{position:relative;width:90%;max-width:1500px;margin:auto;display:grid;grid:auto-flow / repeat(3,1fr);gap:1rem;list-style:none}@media only screen and (max-width: 600px){#commercials{grid:auto-flow / 1fr}}.commercial__card{display:inline-block;position:relative;width:auto;aspect-ratio:.85;overflow:hidden;cursor:pointer;border-radius:.5rem;transition:all .2s ease;box-shadow:#00000029 0 10px 36px}.commercial__card h3{font-size:1.5rem}.commercial__card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:var(--image);background-size:cover;background-position:center;transition:all .3s ease;z-index:1}.commercial__card:hover:before{opacity:0}.commercial__card.clicked:before{opacity:1}.commercial__card:hover{scale:95%;box-shadow:#00000080 0 8px 25px}.commercial__card.clicked{scale:100%;box-shadow:#00000029 0 10px 36px}.commercial__card.clicked:before{filter:grayscale(50%) brightness(50%) blur(10px)}.commercial__card .commercial__card--video{position:relative;display:inline-block;height:100%;left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%);pointer-events:none;transition:all .3s ease}.commercial__card.clicked .commercial__card--video{opacity:0}.commercial__title{z-index:3;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:calc(100% - 2rem);position:absolute;bottom:1rem;padding:1rem;pointer-events:none;transition:all .3s ease}.commercial__card.clicked .commercial__title{bottom:80%}.commercial__logo{display:block;--size: 3rem;width:var(--size);height:var(--size);background-image:var(--logo);background-size:contain;background-position:center;background-repeat:no-repeat}.commercial__content{display:flex;flex-direction:column;padding:2rem;gap:1rem;z-index:3;position:absolute;width:calc(100% - 2rem);bottom:1rem;justify-content:center;opacity:0;margin:auto;pointer-events:none;transition:all .3s ease}.commercial__card.clicked .commercial__content{opacity:1}.commercial__card.clicked .commercial__content a{pointer-events:all}.commercial__info{font-size:1.2rem;font-weight:700}
