:root{--text-large: 1.9rem;--text-medium: 1.7rem;--text-small: 1.3rem;--gc-1: oklch(87% .2 93);--gc-2: oklch(63% .29 332);--gc-3: oklch(51% .285 265);--accent-gradient: linear-gradient( to right, var(--gc-1), var(--gc-2), var(--gc-3) )}*{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%;font-family:Arial,sans-serif;scroll-behavior:smooth}body{width:80%;margin:auto;max-width:1200px}footer{text-align:center;border-top:1px black solid;font-size:var(--text-large);margin-bottom:4rem;display:flex;align-items:center;flex-direction:column}footer .links{padding:2rem 0;display:flex;justify-content:center;width:50%}footer .links__link{flex:1;display:flex;align-items:center;justify-content:center}footer .links a{text-decoration:none;color:#000;padding:2rem}footer .links a:after{content:"";width:100%;height:1px;display:block;background-color:#000;transform:scaleX(0);transition:transform .3s;transform-origin:right}footer .links a:hover:after{transform:scaleX(1);transform-origin:left}footer .copyright{font-size:var(--text-medium)}@media screen and (max-width:40em){html{font-size:58%}body{width:85%}:root{--text-medium: 1.8rem}}@media screen and (max-width:59em){footer .links{width:100%}}nav{display:flex;align-items:center;justify-content:end;gap:1.5rem}nav a{font-size:var(--text-large);text-decoration:none;color:#000;padding:3rem 0}nav a:after{content:"";width:100%;height:1px;display:block;background-color:#000;transform:scaleX(0);transition:transform .3s;transform-origin:right}nav a:hover:after{transform:scaleX(1);transform-origin:left}header{display:flex;flex-direction:column;align-items:center;justify-content:center;height:70vh}header .hero{position:relative;background-color:#fff}header .hero__name{font-family:League Spartan,Helvetica,sans-serif;font-weight:900;font-size:11rem}header .hero__name--word span{display:inline-block;animation:popUp .75s both;animation-delay:calc(.08s * var(--i))}header .hero__title{font-size:2.4rem;text-align:right;line-height:3.5rem;animation:popUp .75s both;animation-delay:calc(.08s * var(--i))}header .hero:after{content:"";position:absolute;background-size:300%;animation:gradientRotate 4s infinite forwards alternate;background-image:var(--accent-gradient);mix-blend-mode:screen;inset:0}@media screen and (max-width:56.25em){.hero__name{display:flex;flex-direction:column}}@media screen and (max-width:35em){header .hero__name{font-size:9rem}}@media screen and (max-width:28.5em){header .hero__name{font-size:7.5rem}}.projects{display:flex;justify-content:space-evenly;margin:8rem 0;flex-wrap:wrap}.projects .project{transition:height 2s ease-out;margin:2rem;width:clamp(30rem,35vw,50rem);scroll-margin-top:5rem}.projects .project__image{object-fit:contain;width:100%;height:auto;border-radius:8px;transition:transform .4s ease-out;box-shadow:.1rem .1rem 1rem #d3d3d3;position:relative;z-index:1}.projects .project__video{display:none;border-radius:8px}.projects .project__title{font-size:1.8rem;padding:1.2rem 0}.projects .project__description{font-size:var(--text-medium);line-height:1.4}.projects .project:hover{cursor:pointer}.projects .project:hover .project__image{transform:scale(1.02) translate(calc(var(--mouse-x) * -.5rem),calc(-1.5rem + var(--mouse-y) * -.5rem)) perspective(150px) rotateX(calc(var(--mouse-y) * -1deg)) rotateY(calc(var(--mouse-x) * 1deg));box-shadow:.1rem .1rem 2rem #d3d3d3}.projects .project__full-info,.projects .project__close{display:none}.projects .project.selected{width:70%;height:auto;padding-bottom:15vh;order:-1;position:relative;display:flex;flex-direction:column;cursor:default}.projects .project.selected .project__image,.projects .project.selected .project__video{display:block;width:60%;margin:0 auto}.projects .project.selected .video_replace{display:none}.projects .project.selected .project__title{font-size:2rem;padding:2rem 0 1rem}.projects .project.selected .project__description{display:none}.projects .project.selected .project__full-info{display:block}.projects .project.selected .project__full-info--description{font-size:var(--text-medium);padding:1rem 0}.projects .project.selected .project__full-info--description p{padding:.5rem 0;line-height:1.5}.projects .project.selected .project__full-info--tech{display:flex;flex-wrap:wrap;justify-content:center;gap:3rem;align-items:center;padding:3rem 0;font-size:var(--text-small);font-weight:700}.projects .project.selected .project__full-info--tech .technology{object-fit:contain;text-align:center;font-weight:400;display:flex;flex-direction:column}.projects .project.selected .project__full-info--tech .technology__logo{width:auto;max-height:4rem;aspect-ratio:1/1;padding-bottom:.5rem}.projects .project.selected .project__full-info--links{display:flex;justify-content:center;gap:4rem}.projects .project.selected .project__full-info--links .project-link{display:flex;align-items:center}.projects .project.selected .project__full-info--links .project-link a{font-size:var(--text-large);text-decoration:none;color:#000;padding:3rem 0}.projects .project.selected .project__full-info--links .project-link a:after{content:"";width:100%;height:1px;display:block;background-color:#000;transform:scaleX(0);transition:transform .3s;transform-origin:right}.projects .project.selected .project__full-info--links .project-link a:hover:after{transform:scaleX(1);transform-origin:left}.projects .project.selected .project__full-info--links .project-link__icon{height:1.8rem;width:1.8rem;vertical-align:middle}.projects .project.selected .project__full-info--links .project-link__text{margin-left:.5rem;vertical-align:middle}.projects .project.selected:hover .project__image{transform:none;box-shadow:.1rem .1rem 1rem #d3d3d3}.projects .project.selected .project__close{display:block;color:#d3d3d3;font-size:6rem;position:absolute;top:-4rem;right:-7rem;transition:all .5s}.projects .project.selected .project__close:hover{color:gray;cursor:pointer}@media screen and (max-width:56.25em){.projects .project{padding-bottom:10vh;width:clamp(10rem,50vh,50rem)}.projects .project.selected{order:initial}.projects .project.selected .project__image,.projects .project.selected .project__video{width:95%}}@media screen and (max-width:34.5em){.projects .project.selected{width:100%}.projects .project.selected .project__close{right:-3rem}}@keyframes gradientRotate{0%{background-position:80% 20%}to{background-position:20% 80%}}@keyframes popUp{0%{transform:translateY(4rem);opacity:0}to{opacity:1;transform:translateY(0)}}