:root{--font-title: "Montserrat", sans-serif;--font-main: "Poppins", sans-serif;--font-color-bright-white: rgb(245, 245, 246);--font-color-pale-white: rgba(229, 229, 231, .8)}*{margin:0;padding:0;font-family:var(--font-main);box-sizing:border-box}html{scroll-behavior:smooth}.autoShow{animation:autoShowAnimation both;animation-timeline:view(70% 5%);animation-duration:2s}@keyframes autoShowAnimation{0%{opacity:0}to{opacity:1}}.slide-side{animation:slideSideAnimation 3s both;animation-timeline:view(70% 5%)}@keyframes slideSideAnimation{0%{opacity:0;transform:translate(-10%)}to{opacity:1;transform:translate(0)}}.slide-up{animation:slideUpAnimation 1.5s both;animation-delay:.5s}@keyframes slideUpAnimation{0%{opacity:0;transform:translateY(0)}to{opacity:1;transform:translateY(-80%)}}.slide-down{animation:slideDownAnimation 2s both;animation-delay:.5s}@keyframes slideDownAnimation{0%{top:-20%}to{top:0}}.arrows-body{position:relative;align-items:center;justify-content:center;flex-direction:column;display:none}.arrow{position:relative;transform:rotate(-135deg);animation:arrowDown 2s infinite}.arrow:nth-child(1){bottom:5px;animation-delay:-.4s}.arrow:nth-child(2){animation-delay:-.2s}.arrow:nth-child(3){top:5px}@keyframes arrowDown{0%{opacity:0;transform:rotate(-135deg) translate(15px,15px)}0%{opacity:1}to{opacity:0;transform:rotate(-135deg) translate(15px,15px)}}canvas{position:fixed;top:0;left:0;z-index:-1}body{margin:0;padding:0;background-color:#000}nav{position:fixed;top:0;left:0;width:100%;background-color:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;z-index:9999;justify-content:end;align-items:center;padding:1rem 0}.nav-link{color:var(--font-color-pale-white);margin-right:2rem;text-decoration:none;transition:color .3s}.nav-link:hover{color:var(--font-color-bright-white)}.container{position:absolute;top:2rem;left:0}video{width:100%;position:relative;margin-top:0}.transparent-black-layer{height:25rem;background-color:#0202021a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.intro-container{display:flex;flex-direction:column;gap:2.5rem;padding:2rem 3rem;border-radius:6px;position:absolute;top:17rem;left:3rem}.intro-container>*{font-family:var(--font-title);font-weight:lighter;color:var(--font-color-bright-white)}.intro-title{margin:0;font-size:5rem;cursor:default}.occupation-title{font-size:2rem;text-shadow:black 5px 0 10px;cursor:default}.skills-container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem 3rem;margin-top:10rem}.skills-lists-container{display:flex;gap:8rem;padding:1rem}.skills-title{color:var(--font-color-bright-white);font-weight:700;font-size:3rem;margin-bottom:5rem;cursor:default}.skills-list{list-style-type:none}.skills-list li{color:var(--font-color-bright-white);margin-bottom:2rem;font-weight:lighter;background-color:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem;text-align:center;border-radius:5px;transition:transform .3s;display:flex;justify-content:center;align-items:center;cursor:default}.skills-list li:hover{transform:scale(1.4)}.projects-container{display:flex;flex-direction:column;justify-content:start;align-items:start;margin:20rem 5rem;gap:30rem;background-color:#0202021a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.project-card{height:12rem;color:var(--font-color-bright-white);display:flex;flex-direction:column;gap:2rem;padding:2rem;border-radius:5px}.project-title{font-size:6rem;cursor:default}.project-info{font-weight:lighter;font-size:2rem;cursor:default}.project-links{display:flex;gap:10rem;font-size:2rem}.project-link{text-decoration:none;color:var(--font-color-pale-white);transition:color .3s,text-shadow .3s;font-family:var(--font-title)}.project-link:hover{color:var(--font-color-bright-white);text-shadow:rgba(244,244,248,.5) 1px 0 10px}.ui-projects-wrapper{margin:20rem 0;display:flex;justify-content:center;align-items:center;width:100%;position:relative}.ui-projects-wrapper .ui-card{border-radius:10px;position:absolute;height:30rem;width:20rem;transition:.5s}.ui-projects-wrapper .ui-card .ui-img{top:0;left:0;position:absolute;width:100%;height:100%;object-fit:cover;border-radius:10px;transition:.5s;filter:grayscale(1)}.ui-projects-wrapper:hover .ui-card{transform:rotate(calc(var(--i) * 5deg)) translate(calc(var(--i) * 150px),-50px)}.ui-projects-wrapper .ui-card:hover{translate:calc(var(--i) * 20px) -50px;z-index:100}.ui-projects-wrapper .ui-card:hover .ui-img{filter:grayscale(0)}.about-container{display:flex;flex-direction:column;padding:10rem 6rem;width:80%}.about-title{color:var(--font-color-bright-white);font-size:10rem}.about-text{color:var(--font-color-bright-white);font-size:2rem;font-weight:lighter}.spotlight{position:fixed;width:20px;height:20px;border-radius:50px;background:#fff;transition:.1s;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:difference;display:none}.about-text:hover~.spotlight{transform:scale(6)}.contact-container{display:flex;flex-direction:column;color:var(--font-color-bright-white);padding:20rem 6rem 10rem}.contact-title{margin-bottom:2rem;font-weight:lighter;font-size:3rem}.contact-wrapper{display:flex;flex-direction:column;gap:1rem}.mail-wrapper{display:flex;align-items:center;gap:1rem}.mail{color:var(--font-color-pale-white);cursor:default}.media-link{display:flex;align-items:center;gap:1rem;text-decoration:none}.media{color:var(--font-color-pale-white)}.media-link span{transition:color .2s}.media-link span:hover{color:var(--font-color-bright-white)}.contact-wrapper svg{width:2rem;height:2rem}.contact-wrapper svg>*{fill:#e4e1ed;transition:fill .2s}.media-link:has(span:hover) svg:not(:hover){animation:tilt-shaking .5s infinite}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}@media screen and (min-width: 768px) and (max-width: 1024px){.arrows-body{display:flex;height:60px;margin-top:3rem}.arrow{width:15px;height:15px;border-top:2px solid var(--font-color-pale-white);border-left:2px solid var(--font-color-pale-white)}.intro-container{top:10rem}.intro-title{font-size:3rem}.occupation-title{font-size:1.5rem}.projects-container{margin:20rem 3rem;gap:20rem}.project-title{font-size:4rem}.project-info{font-size:1.5rem}.project-link{font-size:1.6rem}.ui-projects-wrapper{gap:2rem}.ui-projects-wrapper .ui-card{position:relative;height:22rem;width:12rem}.ui-projects-wrapper:hover .ui-card{transform:none}.ui-projects-wrapper .ui-card:hover{translate:none;z-index:index none}.ui-projects-wrapper .ui-card:active .ui-img{filter:none}.skills-lists-container{gap:3rem;padding:0}.about-container{padding:10rem 3rem}.about-title{font-size:4rem;margin-bottom:1rem}.about-text{font-size:1.5rem}}@media screen and (min-width: 340px) and (max-width: 767px){.arrows-body{display:flex;height:40px;margin-top:4rem}.arrow{width:10px;height:10px;border-top:2px solid var(--font-color-pale-white);border-left:2px solid var(--font-color-pale-white)}.nav-link{font-size:10px}.intro-container{top:5rem;left:.2rem;gap:1rem}.intro-title{font-size:1.4rem}.occupation-title{font-size:.8rem}.transparent-black-layer{height:10%}.projects-container{margin:37rem 1.8rem;gap:25rem}.project-card{padding:0;width:60%}.project-title{font-size:3rem}.project-info{font-size:1.3rem}.project-links{gap:5rem}.project-link{font-size:1.2rem}.ui-projects-wrapper{gap:2rem;flex-direction:column;margin:10rem 0}.ui-projects-wrapper .ui-card{position:relative;height:24rem;width:16rem}.ui-projects-wrapper:hover .ui-card{transform:none}.ui-projects-wrapper .ui-card:hover{translate:none;z-index:index none}.ui-projects-wrapper .ui-card:hover .ui-img{filter:none}.skills-lists-container{gap:2rem;padding:2rem 1.8rem;flex-direction:column}.skills-title{font-size:2rem}.skills-list li{padding:0}.about-container{padding:10rem 1.8rem}.about-title{font-size:2.6rem;margin-bottom:1.5rem}.about-text{font-size:1rem}.contact-container{padding:12rem 1.8rem 10rem}.contact-title{font-size:2rem}}@media screen and (min-width: 1600px){.nav-link{margin-right:4rem;font-size:1.4rem}.intro-container{gap:2.2rem}.intro-title{font-size:7rem}.occupation-title{font-size:3rem}.ui-projects-wrapper .ui-card{height:40rem;width:26rem}.skills-lists-container{gap:10rem}.skills-title{font-size:3.8rem}.skills-list li{font-size:1.8rem}.about-title{font-size:12rem}.about-text{width:85%}.contact-title{font-size:4rem}.mail,.media{font-size:1.6rem}}