@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap";*{box-sizing:border-box;color:#fff;margin:0;padding:0;font-family:Inter,sans-serif;overflow-x:hidden}body{background-color:#161513}.circle{background-color:#00e600;border-radius:50%;width:15px;height:15px;position:absolute}.navbar{z-index:999;background-color:#111111a1;justify-content:space-between;align-items:center;width:100%;height:16vh;padding:35px 10vw;display:flex;position:fixed;overflow-y:hidden}.navbar a{color:#fff;border-radius:20px;padding:10px 15px;font-size:1.1rem;font-weight:bolder;text-decoration:none}.nav{z-index:-1;height:8vh;list-style:none;display:flex}.nav-item{justify-content:center;align-items:center;width:10vw;height:8vh;display:flex}.sidebar{z-index:999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#ffffff94;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:20px;width:50%;height:100dvh;padding:5vh 5vw;font-size:1.5rem;display:flex;position:fixed;top:0;right:0;transform:translate(100%)}.sidebar li:first-child{margin-left:auto}.sidebar li:first-child img{height:40px}.sidebar li{opacity:0;display:inline-block;transform:translate(100%)}#menu{display:none}.logo{flex-direction:column;align-items:center;display:flex}.logo h2{color:#fff;font-size:1.5rem;font-weight:bolder}.hero-page{z-index:9;justify-content:center;align-items:center;width:100%;height:90dvh;padding-top:15vh;display:flex}.main{z-index:9;flex-direction:column;justify-content:center;align-items:center;gap:3vh;width:50vw;height:max-content;display:flex}.main img{object-fit:cover;z-index:9;border-radius:50%;height:25vh}.main h2{z-index:9;font-size:2rem}.main span{text-align:center;z-index:9;margin-bottom:3vh;font-size:1.2rem}.container{display:flex}.container a:first-child{color:#111;margin-right:20px}.container a{text-decoration:none}.btn{justify-content:center;align-items:center;width:250px;height:7vh;display:flex}.btn-1{color:#111;background-color:#fff;border:3px solid #fff;border-radius:40px;font-size:1.1rem;font-weight:700;text-decoration:none}.btn-2{border:3px solid #fff;border-radius:40px;font-weight:700}.btn-2 a{text-decoration:none}.project-section{flex-direction:column;justify-content:center;align-items:center;width:100%;height:fit-content;margin-top:10vh;margin-bottom:10vh;display:flex}.project-section h2{color:#ccc;margin-bottom:5vh;font-size:2rem}.projects{justify-content:center;align-items:center;gap:20px;width:100%;height:75dvh;display:flex}.project{background-color:#111;border:1px solid #acacacdc;border-radius:10px;flex-direction:column;align-items:center;gap:10px;width:40vw;padding-bottom:2vh;display:flex;overflow:hidden}.project img{width:100%}.project h3{font-size:1.3rem}.project button{background-color:#111;border:2px solid #fff;border-radius:25px;padding:15px 25px}.project button a{text-decoration:none}.experience-section{flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%;height:max-content;margin-top:10vh;display:flex}.exp-box{background-color:#285846;border:3px solid #fff;border-radius:20px;width:60%;padding:2vw 5vh}.exp-box p{text-align:justify;margin-top:20px}.exp-box h3{transition:all .3s}.exp-logo{background-color:#fff;border-radius:5px;width:fit-content;padding:10px 15px}.role{justify-content:space-between;display:flex}.Footer{height:60vh;padding:20vh;overflow-y:hidden}.Footer h2{margin-bottom:20px;font-size:2rem}.Footer ul{list-style:none}.Footer ul li{margin-bottom:5px}.mail{justify-content:center;align-items:center;width:fit-content;margin-top:30px;display:flex}.mail a{justify-content:center;align-items:center;gap:10px;display:flex}.icons{justify-content:center;align-items:center;gap:10px;width:fit-content;margin-top:40px;margin-bottom:20px;display:flex}.skill-section{flex-direction:column;justify-content:center;align-items:center;display:flex;overflow-y:hidden}.skill-section h2{margin:30px;font-size:2rem}.skills{grid-template-columns:repeat(auto-fit,minmax(120px,5fr));gap:20px;width:100%;height:fit-content;padding:50px 65px;display:grid;overflow-y:hidden}.img{border-radius:20px;flex-direction:column;justify-content:center;align-items:center;height:fit-content;display:flex;overflow-y:hidden;box-shadow:0 0 1px 3px #0000}.img img{height:100px}@media (width<=1230px){.navbar{padding:35px 5vw}.nav-item{width:15vw}.main{justify-content:center;width:70vw}.exp-logo img{width:150px}.exp-box{width:80%}.projects{height:65dvh}.Footer{padding:17vh}.skills{grid-template-columns:repeat(auto-fit,minmax(150px,5fr));padding:30px 45px}}@media (width<=940px){.navbar{padding:35px 5vw}#menu{justify-content:center;align-items:center;display:flex}.nav-item{display:none}.main{justify-content:center;width:80vw}.project h3{font-size:1rem}.project button{padding:10px 20px}.projects{height:50dvh}.Footer{padding:13vh}}@media (width<=700px){.navbar{padding:35px 5vw}.main span{font-size:1.1rem}.btn{width:200px;height:7vh}.projects{flex-wrap:wrap;height:105dvh;padding:2vh 5vw;display:flex;overflow-y:hidden}.project{width:80%}.project h3{font-size:.8rem}.exp-logo img{width:100px}.exp-box{width:90%;padding:2vh 5vw}.exp-box p{text-align:left}.exp-box ul li{margin-bottom:10px}.role{flex-direction:column;display:flex}.role span{width:100%}.Footer{padding:7vh}.skills{grid-template-columns:repeat(auto-fit,minmax(100px,4fr));padding:30px 45px}}@media (width<=530px){.navbar{padding:35px 7vw}.main span{font-size:1.1rem}.btn{width:120px;height:7vh;font-size:.8rem}.Footer{padding:4vh}.Footer ul li{font-size:.8rem}.projects{height:85dvh}.project h3{font-size:1rem}.mail img{height:25px}.mail a{gap:5px;font-size:.8rem}.skills{grid-template-columns:repeat(auto-fit,minmax(100px,2fr))}}@media (width<=430px){.main{width:91%}.main h2{font-size:1.7rem}.sidebar{width:100%;padding-left:15vw;font-size:2rem}.exp-box h3{font-size:1rem}.exp-box p{font-size:.8rem}.projects{height:75dvh}.project h3{font-size:.8rem}.role h4{font-size:.9rem}.Footer{padding:3vh}.skills{grid-template-columns:repeat(auto-fit,minmax(100px,2fr))}.img img{height:90px}.img h3{font-size:1rem}}