@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*,*:after,*:before{box-sizing:border-box;margin:0;padding:0}:root{font-family:Poppins,sans-serif;--nav-color: #727272;--gray-background: #dadada;--dark-gray-bg: #a5a5a5;--darker-bg: #303443;--contact-btn: #1d1d1d}html{scroll-behavior:smooth}#root{display:flex;flex-direction:column;width:100%;align-items:center}html.menu-open,body.menu-open{overflow:hidden}.main-container{padding:0 1rem;margin:0 1rem;width:100%;max-width:1100px;display:flex;flex-direction:column;justify-content:center}header{display:flex;justify-content:space-between;margin:3px 0;padding:0 .5rem;animation:top-to-bottom 1s ease-in forwards}.color-initials{display:flex;align-items:center;gap:.5rem;color:var(--contact-btn);font-size:14px}a{text-decoration:none;color:inherit}.color-ball{background-color:#ecc053;width:1.25rem;height:1.25rem;border-radius:50%}.nav-sections{list-style-type:none;display:flex;color:var(--nav-color);gap:.2rem;font-size:14px}.nav-section{cursor:pointer;padding:.5rem 1rem;border-radius:25px}.nav-section:hover{background-color:#f3f3f3}.nav-section.active{color:#000}.nav-hide .nav-sections{position:relative;right:-16px}.menu-btn{position:relative;display:none;justify-content:center;align-items:center;width:36px;height:36px;cursor:pointer}.menu-btn__burger,.menu-btn__burger:before,.menu-btn__burger:after{width:20.4px;height:2.2px;background-color:var(--contact-btn);border-radius:5px;transition:all .5s ease-in-out}.menu-btn__burger:before,.menu-btn__burger:after{content:"";position:absolute}.menu-btn__burger:before{transform:translateY(-7px)}.menu-btn__burger:after{transform:translateY(7px)}.menu-btn.open .menu-btn__burger{transform:translate(40px);background:transparent}.menu-btn.open .menu-btn__burger:before{transform:rotate(45deg) translate(-28.5px,28.5px);width:26.4px;height:1.5px}.menu-btn.open .menu-btn__burger:after{transform:rotate(-45deg) translate(-28.5px,-28.5px);width:26.4px;height:1.5px}.presentation-div{margin-bottom:20px;display:flex;height:500px;gap:20px}.personal-details{min-width:500px;max-width:700px;display:flex;flex-direction:column;justify-content:space-between;animation:show-personal-details 4s ease-in forwards}.my-picture{position:relative;overflow:hidden;width:calc(40vw - 40px);min-width:200px;max-width:460px;border-radius:25px;animation:show-picture 3s ease-in forwards;z-index:1}.my-picture img{position:relative;width:calc(40vw - 40px);min-width:200px;max-width:460px;height:500px;max-height:570px;object-fit:cover;object-position:-65px 0px;border-radius:25px;z-index:1}.personal-details,.contact-div{position:relative;padding:40px 90px 40px 40px;border-radius:25px;background-color:var(--gray-background);background-image:linear-gradient(45deg,transparent 40%,#eee5d9,#faead2,#ffe0b3);color:var(--contact-btn);text-align:center}.personal-details h1,.personal-details .personal-description{text-align:left}.personal-details h1{width:85%;line-height:45px;font-size:36px}.personal-description,.contact-description{margin:2.5rem 0 5rem}.contact-icons{display:flex;gap:1rem;align-items:center;position:relative}.contact-icons .linkedin-div,.contact-icons .github-div{background-color:#fff;border-radius:50%;width:48px;height:48px;display:flex;justify-content:center;align-items:center}.contact-me-btn{background-color:var(--contact-btn);color:#fff;padding:1rem 2rem;border:none;border-radius:25px;font-size:16px;cursor:pointer}.contact-me-btn:hover{background-color:#333}.icons{font-size:26px}.linkedin-div:hover{background-color:#0a66c2}.linkedin-div:hover .linkedin-icon{color:#fff}.github-div:hover{background-color:#333}.github-div:hover .github-icon{color:#fff}.projects-div{width:100%;display:grid;gap:20px;grid-template-columns:calc(50% - 10px) calc(50% - 10px);margin-bottom:20px;animation:show-others 5s ease-in forwards}.project-div{border-radius:25px;aspect-ratio:1 / 1;cursor:pointer;border:1px solid #e7e7e7;position:relative;background-color:var(--dark-gray-bg);overflow:hidden}.project-div:nth-child(odd){background-color:var(--darker-bg)}.project-div:first-child{background-color:#6b5ce5}.project-div:hover>*{transform:scale(1.05)}.project-div img{height:100%;width:100%;border-radius:25px;object-position:0% 0%;object-fit:cover;transition:all .8s ease-in-out;position:absolute;top:25%;left:7%}.project-info{color:#fff;width:75%;position:absolute;top:6%;left:6%;transition:all .8s ease-in-out}.project-title{font-weight:600;font-size:.9rem;font-size:clamp(.9rem,.8594594594594595rem + .4054054054054053vw,1.125rem)}.project-description{font-weight:300;font-size:.69rem;font-size:clamp(.69rem,.6341441441441441rem + .5585585585585586vw,1rem)}.arrow-icon{position:absolute;width:8%;height:8%;display:flex;justify-content:center;align-items:center;background-color:#fff;border-radius:50%;transform:rotate(45deg);z-index:2;right:6%;top:6%;font-size:.5rem;font-size:clamp(.5rem,.31981981981981983rem + 1.8018018018018018vw,.8rem);transition:all .8s ease-in-out}.project-div:hover .arrow-icon{transform:scale(1.05) rotate(45deg) translate(10px,-5px)}.project-div:hover>img{transform:scale(1.05) translateY(15px)}img.mobile-mockup{object-position:-25px -65px}.contact-div{text-align:left;margin-bottom:20px;animation:show-others 6s ease-in forwards}.email-paragraph{margin-top:2rem}@keyframes top-to-bottom{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes show-picture{0%{opacity:0}90%{opacity:0}to{opacity:1}}@keyframes show-personal-details{0%{opacity:0;transform:translateY(15%) scale(.9)}85%{opacity:0;transform:translateY(15%) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes show-others{0%{opacity:0;transform:translateY(5%)}90%{opacity:0;transform:translateY(5%)}to{opacity:1;transform:translateY(0)}}@keyframes right-to-left{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes left-to-right{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@media screen and (max-width: 1205px){.my-picture img{position:absolute}}@media screen and (max-width: 1125px){.my-picture img{object-position:-55px 0px}}@media screen and (max-width: 1055px){.personal-details h1{width:100%}.my-picture img{left:-2%}}@media screen and (max-width: 1000px){.my-picture img{left:-11%}}@media screen and (max-width: 954px){.personal-details{padding-right:40px}.my-picture img{left:-20%}}@media screen and (max-width: 960px){.project-div img{top:28%}}@media screen and (max-width: 876px){.personal-details h1{font-size:2rem;line-height:42px}.personal-description{font-size:.9rem}}@media screen and (max-width: 840px){.project-div img{top:32%}}@media screen and (max-width: 826px){.personal-details h1{font-size:1.85rem}.personal-description{font-size:.85rem}}@media screen and (max-width: 815px){html,body{overflow-x:hidden}.main-container{max-width:700px;margin:.5rem 0 0}header{margin:6px 0 20px;padding-right:0;z-index:10}.presentation-div{flex-direction:column-reverse;height:fit-content;position:relative;z-index:1}.contact-div{display:flex;flex-direction:column}.personal-details{width:100%;min-width:100%}.my-picture{min-width:100%;display:flex;position:relative}.my-picture img{height:40vh;width:100%;max-width:100%;object-position:1px -3px;left:0%;position:relative}.personal-description,.contact-description{margin:1rem 0 1.5rem}.projects-div{grid-template-columns:1fr}.menu-btn{display:flex;transition:all .5s ease-in-out}nav{display:none;transition:all .5s ease-in-out}nav.nav-show,nav.nav-hide{display:flex;flex-direction:column;flex-wrap:wrap;position:absolute;transition:all .5s ease-in-out;top:55px;left:0%;z-index:999999;background-color:#fff;border-radius:5px;height:200vh;width:200vw}nav.nav-show{animation:right-to-left .3s ease-in forwards}nav.nav-hide{animation:left-to-right .3s ease-in forwards}.nav-show .nav-sections{flex-direction:column;color:var(--contact-btn);z-index:9;font-size:26px;font-weight:500;margin-top:1rem}.nav-section{border-radius:5px;text-align:left}.nav-section:hover{color:var(--nav-color)}.project-div img{top:25%}.arrow-icon{font-size:.5rem;font-size:clamp(.4rem,.31981981981981983rem + 1.8018018018018018vw,1rem)}}@media screen and (max-width: 565px){.contact-div{padding-right:40px}}@media screen and (max-width: 555px){header{flex-wrap:wrap;row-gap:10px}.presentation-div{grid-template-rows:40vh 1fr}.personal-details h1,.personal-details .personal-description,.contact-div h1,.contact-div .contact-description{text-align:center}.contact-icons{justify-content:center;flex-wrap:wrap}}@media screen and (max-width: 455px){.project-div img{top:28%}img.mobile-mockup{object-position:-25px -55px}}@media screen and (max-width: 370px){.contact-icons :first-child{display:block;width:100%}.project-div img{top:37%}img.mobile-mockup{object-position:-25px -45px;transform:scale(.9);top:25%}}@media screen and (max-width: 300px){.main-container{padding:0 .1rem}.personal-details,.contact-div{padding:8px}h1{font-size:24px}p{font-size:12px}.my-picture img{width:120%;height:120%;object-position:0px}.email-paragraph{word-wrap:break-word}.project-div{aspect-ratio:1 / 2}.project-div img{top:25%;left:10%}.arrow-icon{width:15%;height:15%}.project-info{width:60%}img.mobile-mockup{object-position:-80px -45px;transform:scale(.8);top:25%}}@media screen and (max-width: 240px){.project-div img{top:30%}}@media screen and (max-width: 201px){.project-div{aspect-ratio:1 / 2.5}.arrow-icon{width:25%;height:10%}.project-div img{top:35%}.my-picture img{object-position:-15px}}@media screen and (max-width: 166px){.my-picture img{object-position:-33px}.project-div{aspect-ratio:1 / 3}.arrow-icon{display:none}.project-div img{top:30%}.project-info{width:90%;text-align:center}}
