html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}.projectsContainer{display:flex;gap:20px;margin-top:20px}.projectsContainer>div{position:relative;height:420px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--radius);overflow:hidden}.projectsContainer img{height:100%;position:absolute;top:0;left:50%;transform:translate(-50%);z-index:0;object-fit:cover;filter:grayscale(100%)}.descriptionContainer{z-index:1;position:relative}.descriptionBackground{position:absolute;height:100%;width:100%;top:0;left:0;background-color:var(--main-color);z-index:-1;opacity:.8}.projectsContainer .active .descriptionContainer{color:var(--secondary-color);height:65%;display:flex;flex-direction:column;justify-content:space-between;padding:15px}.projectsContainer .active{flex:6}.projectsContainer .active .btnLink{background-color:var(--accentuation);color:var(--secondary-color);width:fit-content;padding:10px;border-radius:var(--radius);text-decoration:none;font-size:18px;visibility:visible;transition:color .5s}.projectsContainer .active p{font-size:18px;line-height:22px;visibility:visible}.projectsContainer .inactive .descriptionContainer{color:var(--accentuation);flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;padding:15px}.projectsContainer .inactive{flex:1;position:relative}.projectsContainer .inactive h3{transform:rotate(.75turn);position:absolute;bottom:150px;right:-120px;width:300px}.projectsContainer .inactive p,.projectsContainer .inactive .btnLink{visibility:hidden}.projectLinks{display:flex;justify-content:space-between}.expContainer{padding:15px;display:flex;flex-direction:column;gap:10px;background-color:var(--main-color);border-radius:var(--radius)}.expContainer .title{font-size:24px}.expContainer .date{color:var(--accentuation);font-weight:500}.left,.right{width:400px;position:relative;border-radius:var(--radius)}.left{margin-left:-500px;box-shadow:-5px 5px 15px #eff0f3b3}.left .arrow{background-color:var(--secondary-color);position:absolute;height:30px;width:15px;clip-path:polygon(0 0,0 100%,100% 50%);right:-15px;bottom:calc(50% - 15px)}.right{margin-left:500px;box-shadow:5px 5px 15px #eff0f3b3}.right .arrow{background-color:var(--secondary-color);position:absolute;height:30px;width:15px;clip-path:polygon(100% 0,0 50%,100% 100%);left:-15px;bottom:calc(50% - 15px)}@media (prefers-reduced-motion: no-preference){.left,.right{scale:.5;opacity:0;animation:scale-effect linear both;animation-timeline:view();animation-range:100px 300px}}@keyframes scale-effect{to{scale:1;opacity:1}}.skillsContainer{display:flex;flex-wrap:wrap;row-gap:40px;padding:20px 0;justify-content:center}.skill{width:25%;display:flex;flex-direction:column;align-items:center;gap:20px}.skill img,.skill svg{height:40px;color:var(--accentuation)}.scroller{display:none}@media (prefers-reduced-motion: no-preference){@media (min-width: 1000px){.skillsContainer{display:none}.scroller{display:block;width:100%;margin:0 auto;overflow:clip;mask:linear-gradient(90deg,transparent,white 15%,white 85%,transparent)}.scrollerInner{display:flex;justify-content:flex-start;gap:3rem;flex-wrap:nowrap;animation:scrolling linear;animation-timeline:scroll(root);padding-block:2rem;white-space:nowrap}.reverse{animation-direction:reverse}}@keyframes scrolling{to{transform:translate(-100%)}}}:root{--main-color: #eff0f3;--secondary-color: #0d0d0d;--accentuation: #f0944f;--radius: 10px}html{scroll-behavior:smooth}body{font-family:Roboto,sans-serif;font-size:18px;color:var(--secondary-color)}.wrapper{max-width:1200px;margin:0 auto}h1{font-size:48px;font-weight:700;margin-bottom:24px}h2{font-size:40px;font-weight:900;margin-bottom:20px;text-transform:uppercase}h3{font-size:32px;font-weight:600;margin-bottom:16px}h4{font-size:24px;font-weight:600;margin-bottom:12px}header{background-color:var(--accentuation);color:var(--main-color);height:60px;width:100vw;display:flex;align-items:center;position:fixed;top:0;z-index:5}header>div{display:flex;justify-content:space-between;width:100%}nav{display:flex;gap:20px}header a{text-decoration:none;text-transform:uppercase;color:var(--main-color);font-size:24px;font-weight:700}header .visibleXs{display:none}header .menu{display:none}main{margin-top:60px;background:linear-gradient(180deg,#eff0f3,#f09754cc 80%,#f0944f);position:relative;overflow-x:clip}section{padding-top:70px}.bigShape1{height:100vh;width:100vh;clip-path:polygon(100% 0,0 50%,100% 100%);background-color:var(--accentuation);position:absolute;right:0;top:10%;z-index:-1}.bigShape2{height:100vh;width:100vh;clip-path:polygon(0 0,0 100%,100% 50%);background-color:var(--accentuation);position:absolute;left:0;top:50%;z-index:-1}#introduction{height:500px;display:flex;align-items:center}#introduction>div{display:flex;flex-direction:column;justify-content:center;width:100%;gap:50px;position:relative;padding-bottom:20px}#introduction span{color:var(--accentuation)}#introduction .btn{background-color:var(--accentuation);color:var(--secondary-color);width:fit-content;padding:20px;font-size:24px;font-weight:700;border-radius:var(--radius);text-decoration:none;text-transform:uppercase}#introduction img{max-height:400px;object-fit:scale-down;position:absolute;bottom:0;right:0;transform:scaleX(-1);z-index:2}#introduction .shape{height:300px;width:300px;clip-path:polygon(100% 0,0 50%,100% 100%);background-color:var(--accentuation);position:absolute;right:0;bottom:0;z-index:0}#projects>div{display:flex;flex-direction:column;gap:20px}#aboutMe>div{display:flex;flex-direction:column;gap:20px}.skills{display:flex;flex-direction:column;gap:20px}.languagesContainer{display:flex;justify-content:space-around;padding:20px 0}.languagesContainer>div{display:flex;flex-direction:column;align-items:center;gap:20px}.languagesContainer>div>div:first-of-type{font-size:40px;font-weight:500;color:var(--accentuation)}.experiences{display:flex;flex-direction:column;align-items:center;gap:20px;position:relative;margin:50px 0;padding:20px 0}.timeline{background-color:var(--secondary-color);width:4px;height:100%;position:absolute;top:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-size:24px;font-weight:500}.timeline>div:first-child{position:absolute;top:-30px}.timeline>div:last-child{position:absolute;bottom:-30px}.resume{display:flex;flex-direction:column;align-items:center;gap:20px}.btnResume{background-color:var(--main-color);color:var(--secondary-color);padding:20px;border-radius:var(--radius);text-decoration:none;font-weight:700}.contactContainer{display:flex;justify-content:space-around;align-items:center;height:80px}.contactContainer>a{display:flex;align-items:center;gap:20px;text-decoration:none;color:var(--main-color);font-size:24px;font-weight:500}.contactContainer svg{color:var(--main-color);font-size:24px}footer{background-color:var(--secondary-color);color:var(--main-color);height:60px;width:100%;display:flex;align-items:center;font-weight:700}@media (max-width: 1200px){.wrapper{width:100vw;padding:0 20px}}@media (max-width: 1000px){#introduction{height:500px}#introduction>div{justify-content:space-between;height:100%}#introduction img{max-height:300px;bottom:20px}#introduction .shape{height:250px;width:250px;bottom:20px}.left,.right{max-width:300px;width:100%}.left{margin-left:-400px}.right{margin-left:400px}}@media (max-width: 800px){header nav{display:none}header .visibleXs{display:unset;font-size:24px}header .menu.visible{display:flex;flex-direction:column;align-items:flex-end;gap:20px;padding:20px;position:absolute;top:60px;background-color:var(--accentuation)}.projectsContainer{flex-direction:column}.projectsContainer .active{flex:unset}.projectsContainer img{width:100%;height:100%;object-fit:cover;object-position:center}.projectsContainer .active .descriptionContainer{height:60%}.projectsContainer .inactive .descriptionContainer h3{transform:none;margin-bottom:0;position:relative;width:auto;right:unset;bottom:unset;width:fit-content}.projectsContainer .inactive p,.projectsContainer .inactive img{display:none}.experiences{gap:30px}.left,.right{margin:0;box-shadow:none;max-width:400px;width:100%}.arrow{display:none}}@media (max-width: 550px){#introduction{height:700px}#introduction img,#introduction .shape{bottom:20%}#introduction .btn{align-self:center}.skill{width:50%}.contactContainer{flex-direction:column;align-items:flex-start;gap:20px;height:auto;padding-bottom:30px}}@media (min-width: 1000px){header a:after{content:"";display:block;width:0;height:3px;background:var(--main-color);transition:width .3s ease-out}header a:hover:after{width:100%}#introduction .btn>div{color:var(--secondary-color);background:linear-gradient(to right,var(--main-color),var(--main-color) 50%,var(--secondary-color) 50%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;overflow:hidden;background-position:100%;background-size:200% 100%;transition:background-position .3s ease}#introduction .btn:hover>div{background-position:0 100%}.contactContainer>a{color:var(--secondary-color);background:linear-gradient(to right,var(--secondary-color),var(--secondary-color) 50%,var(--main-color) 50%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;overflow:hidden;background-position:100%;background-size:200% 100%;transition:background-position .3s ease}.contactContainer>a:hover{background-position:0 100%}.projectsContainer .btnLink:hover{color:var(--main-color);transition:color .5s}}
