html{scroll-snap-type:y mandatory;scroll-behavior:smooth}*{margin:0;padding:0;box-sizing:border-box;font-family:DM Sans,sans-serif}body{background-color:#0c0c1d;color:#d3d3d3}a{text-decoration:none;color:inherit}section{height:100vh;scroll-snap-align:center}@media (max-width: 738px){section#skills{height:200vh}}.contact{height:100%;max-width:1000px;margin:auto;padding-top:50px;padding-bottom:50px;h1{font-size: 80px; line-height: 80px; margin-top: 30px; text-align: center; @media (max-width: 1200px) {font-size: 60px; text-align: center;} @media (max-width: 738px) {font-size: 36px;} @media (max-width: 500px) {margin-top: 60px;}} .flex-container{display: flex; gap: 60px; margin: 50px auto; padding-top: 40px; justify-content: center; .item{padding-bottom: 20px; margin: 30px; h2{font-size: 24px; @media (max-width: 500px) {font-size: 16px;}} span{font-size: 18px; @media (max-width: 500px) {font-size: 12px;}}} @media (max-width: 560px) {text-align: center; width: 350px; gap: 20px;} span{font-weight: 300;}}}@media (max-width: 850px){.contact{max-width:750px}}@media (max-width: 738px){.contact{width:100%;padding:10px}}.hero{height:calc(100vh - 100px);overflow:hidden;background:linear-gradient(180deg,#0c0c1d,#111132);position:relative}.hero .wrapper{max-width:1000px;height:100%;margin:auto}@media (max-width: 1000px){.hero .wrapper{max-width:800px}}.hero .wrapper .text-container{width:50%;height:100%;display:flex;flex-direction:column;justify-content:center;gap:40px;h2{font-size: 30px; color: rebeccapurple; letter-spacing: 10px; @media (max-width: 1000px) {font-size: 25px;} @media (max-width: 780px) {font-size: 25px; letter-spacing: 5px;}} h1{font-size: 60px; @media (max-width: 1000px) {font-size: 50px;} @media (max-width: 780px) {font-size: 40px;}} img{width: 50px; @media (max-width: 780px) {display: none;}}}@media (max-width: 780px){.hero .wrapper .text-container{height:50%;width:100%;gap:20px;align-items:center;text-align:center}}.hero .image-container{height:100%;position:absolute;top:0;right:10%;img{width: 100%; height: 100%; object-fit: cover; @media (max-width: 1200px) {height: 90%;} @media (max-width: 1000px) {height: 80%;}}}@media (max-width: 1200px){.hero .image-container{right:5%}}@media (max-width: 1000px){.hero .image-container{top:10%;right:5%}}@media (max-width: 780px){.hero .image-container{height:80%;width:50%;top:unset;bottom:-20%;right:25%}}.hero .slidingTextContainer{position:absolute;font-size:50vh;bottom:-120px;white-space:nowrap;color:#ffffff09;width:50%;font-weight:700}.sidebar{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#fff;color:#000;button{z-index: 999; width: 50px; height: 50px; border-radius: 50%; position: fixed; top: 25px; left: 25px; background-color: transparent; border: none; cursor: pointer;}}.sidebar .bg{position:fixed;z-index:999;top:0;left:0;bottom:0;width:400px;background:white}@media (max-width: 738px){.sidebar .bg{width:200px}}.sidebar .bg .links{position:absolute;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;a{font-size: 40px; @media (max-width: 738px) {font-size: 20px;}}}.navbar{height:100px}.navbar .wrapper{max-width:1000px;margin:auto;display:flex;align-items:center;justify-content:space-between;height:100%;span{font-weight: bold; font-size: 20px; .logo-color{color: rebeccapurple; text-transform: uppercase; font-weight: 1000;} @media (max-width: 780px) {display: none;}} .links{display: flex; gap: 20px; img{width: 20px; height: 20px;}}}@media (max-width: 1200px){.navbar .wrapper{max-width:800px}}@media (max-width: 1000px){.navbar .wrapper{max-width:700px}}@media (max-width: 880px){.navbar .wrapper{max-width:600px}}@media (max-width: 780px){.navbar .wrapper{justify-content:flex-end;padding:20px}}.parallax{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;h1{font-size: 100px; @media (max-width: 738px) {font-size: 72px; text-align: center;}} .mountains{background-image: url(/mountains.png); background-size: cover; background-position: bottom; width: 100%; height: 100%; position: absolute; z-index: 3; @media (max-width: 738px) {background-size: contain; background-repeat: no-repeat;}} .planets{background-image: url(/planets.png); background-size: cover; background-position: bottom; width: 100%; height: 100%; position: absolute; z-index: 2; @media (max-width: 738px) {background-size: contain; background-repeat: no-repeat;}} .stars{background-image: url(/stars.png); background-size: cover; background-position: bottom; width: 100%; height: 100%; position: absolute; z-index: 1;}}.portfolio{position:relative}.portfolio .progress{position:sticky;top:0;left:0;padding-top:50px;text-align:center;color:orange;font-size:36px}@media (max-width: 1200px){.portfolio .progress{font-size:26px}}@media (max-width: 738px){.portfolio .progress{padding-top:calc(100vh - 100px);font-size:20px}}.portfolio .progress .progress-bar{height:10px;background-color:#fff}.portfolio .container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden}.portfolio .container .wrapper{max-width:1000px;height:100%;margin:auto;display:flex;align-items:center;justify-content:center;gap:50px}@media (max-width: 850px){.portfolio .container .wrapper{gap:10px}}@media (max-width: 738px){.portfolio .container .wrapper{flex-direction:column}}.portfolio .container .wrapper .image-container{flex:1;height:50%;img{width: 100%; height: 100%; object-fit: cover; border-radius: 20px; border: 3px solid orange; @media (max-width: 850px) {height: 80%; width: 80%;}}}@media (max-width: 780px){.portfolio .container .wrapper .image-container{width:100%;max-height:300px}}@media (max-width: 738px){.portfolio .container .wrapper .image-container{width:100%;max-height:300px;text-align:center;margin-top:50px}}.portfolio .container .wrapper .text-container{flex:1;display:flex;flex-direction:column;gap:30px;h2{font-size: 72px; @media (max-width: 1200px) {font-size: 60px;} @media (max-width: 850px) {font-size: 40px;} @media (max-width: 738px) {font-size: 36px;}} p{color: gray; font-size: 20px; @media (max-width: 850px) {font-size: 18px;} @media (max-width: 738px) {font-size: 16px;}} button{background-color: orange; border: none; border-radius: 10px; padding: 10px; width: 200px; cursor: pointer;}}@media (max-width: 738px){.portfolio .container .wrapper .text-container{transform:none!important;padding:10px;align-items:center;text-align:center}}.skills{background:linear-gradient(180deg,#0c0c1d,#111132);height:100%}.container{width:100%;padding-right:20px;padding-left:20px;margin-right:auto;margin-left:auto}.skills-title{text-align:center;h2{font-size: 45px; font-weight: 700; line-height: 1.5; text-transform: capitalize; color: white; @media (max-width: 850px) {font-size: 35px;}}}.skills{padding:65px 0 100px;position:relative}.skill-items{margin:50px auto;width:1100px;display:flex;justify-content:space-between;gap:20px}@media (max-width: 1200px){.skill-items{width:1000px}}@media (max-width: 1000px){.skill-items{width:800px}}@media (max-width: 850px){.skill-items{width:700px}}@media (max-width: 738px){.skill-items{flex-direction:column;width:400px}}@media (max-width: 738px){.soft-skills{margin-top:120px}}.t-skills-items,.s-skills-items{margin:20px auto}.t-skills-title,.s-skills-title{color:#fff;font-size:25px}@media (max-width: 1000px){.t-skills-title,.s-skills-title{font-size:20px}}@media (max-width: 850px){.t-skills-title,.s-skills-title{font-size:18px}}@media (max-width: 738px){.t-skills-title,.s-skills-title{font-size:24px;text-align:center}}.skill-item{padding-top:24px}.skill-info{display:flex;justify-content:space-between}@media (max-width: 450px){.skill-info{width:350px}}.skill-info p{font-size:18px;font-weight:600;line-height:22px;color:gray;opacity:1;animation:showText .5s 1s linear forwards}.progress-line{margin-top:7px;height:10px;width:400px;background-color:#cdcdcd;border-radius:50px;position:relative}@media (max-width: 1000px){.progress-line{width:350px}}@media (max-width: 850px){.progress-line{height:8px;width:300px}}@media (max-width: 738px){.progress-line{width:400px;height:10px}}@media (max-width: 450px){.progress-line{width:350px}}.progress-line span{transform:scaleX(0);transform-origin:left;animation:animate 1s cubic-bezier(1,0,.5,1) forwards;height:100%;border-radius:50px;position:absolute;background-color:#4b5f83;transition:1s all}.progress-line span.animate{animation:animate 1.5s .5s cubic-bezier(1,0,.5,1) forwards}@keyframes showText{to{opacity:1}}@keyframes animate{to{transform:scaleX(1)}}