#root{background-color:#202020;-webkit-user-select:none;-moz-user-select:none;user-select:none}.landingPage{display:flex;flex-direction:column;gap:50px;align-items:center;justify-content:center;background:#202020;color:#dfdfdf;width:100%;height:100dvh;padding-block:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;overflow:hidden;position:relative;perspective:10px;transform-style:preserve-3d;-webkit-mask:linear-gradient(0deg,transparent 0%,#202020 60%);mask:linear-gradient(0deg,transparent 0%,#202020 60%)}.landingPage .bg{position:absolute;width:100%;height:100%;z-index:-1;transform:translateZ(-10px) scale(2)}.landingPage video{width:100%;z-index:0;position:absolute}.landingPage .clouds{position:absolute;width:100%;height:100%;z-index:-1;scale:.1;background-size:contain;background-repeat:no-repeat;bottom:160px;right:30%}.landingPage .logo{max-width:233.5px}.landingPage .logo h1{font-family:Rubik,sans-serif;color:#f4ebd9;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;font-size:40px;text-transform:uppercase;transform:rotateX(80deg) rotateY(0) rotate(-30deg);translate:0 400px 0;animation:logoUP 1s forwards}.landingPage .logo h1 span{color:#202020;background:#f4ebd9;width:100%;display:grid;place-items:center}@keyframes logoUP{to{transform:rotateX(0) rotateY(0) rotate(0);translate:0 0 0}}.landingPage .contactCircles{gap:20px;bottom:200px;display:flex;flex-direction:row;opacity:0;animation:logoOpacity 1s forwards 1s}@keyframes logoOpacity{to{opacity:1}}.landingPage .contactCircles .newBtn{background-color:transparent;border:2px solid #f4ebd9;animation:iconsGlow 1s infinite alternate;color:#f4ebd9}.landingPage .contactCircles .newBtn:nth-child(1){animation-delay:0ms;--iconColor: #C90F9C}.landingPage .contactCircles .newBtn:nth-child(2){animation-delay:.1s;--iconColor: white}.landingPage .contactCircles .newBtn:nth-child(3){animation-delay:.2s;--iconColor: #0077AF}.landingPage .contactCircles .newBtn:nth-child(4){animation-delay:.3s;--iconColor: white}.landingPage .contactCircles #codepenLogo{width:30px}@keyframes iconsGlow{0%{box-shadow:0 0 #f4ebd9;transform:translateY(0)}to{box-shadow:0 0 10px var(--iconColor);filter:drop-shadow(0 0 10px var(--iconColor));transform:translateY(-5px)}}.skills{margin-top:90px;padding-block:20px;width:100%;height:fit-content;background-color:#202020;display:flex;flex-direction:row;justify-content:center;align-items:center}@media only screen and (max-width: 1024px){.skills{flex-direction:column;gap:20px}}.skills .about{width:40%;height:535.2px;background-color:#f4ebd9;display:grid;place-items:center}@media only screen and (max-width: 1285px){.skills .about{width:30%;zoom:1}}@media only screen and (max-width: 1024px){.skills .about{width:70%;padding:20px;background-color:transparent}}@media only screen and (max-width: 768px){.skills .about{width:80%;height:fit-content;padding:0}}.skills .about .aboutCard{background-color:#2b2b2b;color:#202020;border-radius:10px;width:300px;height:350px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:10px;gap:10px}@media only screen and (max-width: 1024px){.skills .about .aboutCard{zoom:1.3}}@media only screen and (max-width: 768px){.skills .about .aboutCard{zoom:.8}}.skills .about .aboutCard .logo{position:absolute;top:10px;left:10px}.skills .about .aboutCard .logo h3{font-family:Rubik,sans-serif;color:#f4ebd9;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:10px;text-transform:uppercase}.skills .about .aboutCard .logo h3 span{color:#202020;background:#f4ebd9;width:100%;display:grid;place-items:center}.skills .about .aboutCard .certiBtn{position:absolute;top:9px;left:90.34px;font-family:Rubik,sans-serif}.skills .about .aboutCard .certiBtn button{background-color:#f4ebd9;border:1px solid #f4ebd9;border-left:none;color:#f4ebd9;cursor:pointer;text-transform:uppercase;transform:skew(-45deg);width:112.93px;height:24.86px}.skills .about .aboutCard .certiBtn button:before{content:"CERTIFICATIONS";display:grid;place-items:center;color:#202020;position:absolute;top:-1px;left:-13px;width:100%;height:100%;border:1px solid #f4ebd9;border-right:none;transform:skew(45deg);background-color:#f4ebd9;z-index:0;transition:all .2s ease}.skills .about .aboutCard .certiBtn button:hover{background-color:transparent;color:transparent}.skills .about .aboutCard .certiBtn button:hover:before{background-color:#2b2b2b;color:#f4ebd9}.skills .about .aboutCard .social{position:absolute;top:20px;right:20px;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px;z-index:2}.skills .about .aboutCard .social .icon{color:#202020;font-size:18px;cursor:pointer;transition:transform .2s ease}.skills .about .aboutCard .social .icon:nth-child(1){--iconColor: #0077af}.skills .about .aboutCard .social .icon:nth-child(2){--iconColor: #8a8a8a;font-size:15px}.skills .about .aboutCard .social .icon:nth-child(3){--iconColor: #02a1fc}.skills .about .aboutCard .social .icon:hover{transform:translateY(-2px);color:var(--iconColor)}.skills .about .aboutCard .imgHolder{width:100%;height:100%;background-color:#f4ebd9;border-radius:5px 0 5px 5px;margin-top:35px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-block:10px}.skills .about .aboutCard .imgHolder:after{content:"";position:absolute;top:-35px;right:0;width:80px;height:36px;background-color:#f4ebd9;border-radius:5px 5px 0 0;z-index:1}.skills .about .aboutCard .imgHolder:before{content:"";position:absolute;top:-35px;right:19px;width:80px;height:36px;transform:skew(-45deg);background-color:#f4ebd9;border-radius:0 5px 0 0;z-index:1}.skills .about .aboutCard .imgHolder .mainContent{width:280px;display:flex;flex-direction:row;z-index:1;align-items:center;justify-content:center;gap:10px}.skills .about .aboutCard .imgHolder .mainContent img{width:100px;border:2px solid #202020;border-radius:5px}.skills .about .aboutCard .imgHolder .mainContent h1{font-size:x-large;text-transform:uppercase}.skills .about .aboutCard .imgHolder .mainContent .text-wrapper{height:20px;position:relative}.skills .about .aboutCard .imgHolder .mainContent .text-wrapper h5{position:absolute;translate:0 0 0;opacity:0;font-weight:500}.skills .about .aboutCard .imgHolder .mainContent .text-wrapper h5:nth-child(1){animation:h3Anim 2s;animation-delay:0s}.skills .about .aboutCard .imgHolder .mainContent .text-wrapper h5:nth-child(2){animation:h3Anim 2s;animation-delay:1.5s}.skills .about .aboutCard .imgHolder .mainContent .text-wrapper h5:nth-child(3){animation:h3Anim 2s;animation-delay:3s}@-moz-keyframes h3Anim{0%{transform:translateY(10px);opacity:0}25%{transform:translateY(0);opacity:1}75%{transform:translateY(0);opacity:1}to{transform:translateY(-10px);opacity:0}}@-webkit-keyframes h3Anim{0%{transform:translateY(10px);opacity:0}25%{transform:translateY(0);opacity:1}75%{transform:translateY(0);opacity:1}to{transform:translateY(-10px);opacity:0}}@-o-keyframes h3Anim{0%{transform:translateY(10px);opacity:0}25%{transform:translateY(0);opacity:1}75%{transform:translateY(0);opacity:1}to{transform:translateY(-10px);opacity:0}}@keyframes h3Anim{0%{transform:translateY(10px);opacity:0}25%{transform:translateY(0);opacity:1}75%{transform:translateY(0);opacity:1}to{transform:translateY(-10px);opacity:0}}.skills .about .aboutCard .imgHolder .mainContent p{font-size:small}.skills .about .aboutCard .imgHolder .mainContent p span{color:#df2525;font-weight:600}.skills .about .aboutCard .imgHolder .aboutPara{margin:10px;text-align:justify}.skills .about .aboutCard .imgHolder .trophies{position:absolute;bottom:5px}.skills .about .aboutCard .imgHolder .trophies img{width:280px}.skills .container{width:60%;height:100%;background-color:#2b2b2b;display:flex;flex-direction:column;justify-content:start;align-items:center;gap:20px;padding-inline:20px}@media only screen and (max-width: 1285px){.skills .container{width:70%}}.skills .container .skillsContainer{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}.skills .container .skillsContainer .skillCard{position:relative;width:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;border:2px solid transparent}@media only screen and (max-width: 768px){.skills .container .skillsContainer .skillCard{width:55px}.skills .container .skillsContainer .skillCard h3{font-size:10px}}.skills .container .skillsContainer .skillCard:hover img{filter:brightness(.5);transform:translateY(-5px)}.skills .container .skillsContainer .skillCard:hover #dullIcons{filter:invert(0)}.skills .container .skillsContainer .skillCard:hover h3{transform:translateY(-5px);opacity:1;filter:drop-shadow(0 0 5px #f4ebd9)}.skills .container .skillsContainer .skillCard img{width:90%;border:2px solid transparent;padding:5px}.skills .container .skillsContainer .skillCard #dullIcons{filter:invert(1)}.skills .container .skillsContainer .skillCard h3{color:#f4ebd9;position:absolute;text-align:center;display:grid;place-items:center;opacity:0;width:100%;height:100%;border:2px solid #f4ebd9}.projects{margin-top:70px;display:flex;flex-direction:column;justify-content:start;align-items:center;gap:20px;background:#202020;width:100%;height:-moz-fit-content;height:fit-content;padding-block:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.projects h1{color:#f4ebd9;text-align:center}.projects .projCont{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;gap:20px}.projects .projCont .card{width:300px;height:384px;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;border-radius:10px;position:relative;border:2px solid #2b2b2b;cursor:pointer}.projects .projCont .card:hover .openIcon{opacity:1}.projects .projCont .card:hover .bgImg{scale:1.1;filter:grayscale(0)}.projects .projCont .card:hover .content .contentImgs .img:nth-child(1){transform:translateY(-10px);transition-delay:0ms}.projects .projCont .card:hover .content .contentImgs .img:nth-child(1) p{opacity:1;transition:opacity .2s ease;transition-delay:0ms}.projects .projCont .card:hover .content .contentImgs .img:nth-child(2){transform:translateY(-10px);transition-delay:.1s}.projects .projCont .card:hover .content .contentImgs .img:nth-child(2) p{opacity:1;transition:opacity .2s ease;transition-delay:.1s}.projects .projCont .card:hover .content .contentImgs .img:nth-child(3){transform:translateY(-10px);transition-delay:.2s}.projects .projCont .card:hover .content .contentImgs .img:nth-child(3) p{opacity:1;transition:opacity .2s ease;transition-delay:.2s}.projects .projCont .card .openIcon{opacity:0;position:absolute;top:10px;right:10px;z-index:2;background-color:#f4ebd9;color:#0b1426;border-radius:10px;padding:5px;font-size:medium;transition:all .2s ease}.projects .projCont .card .bgImg{width:100%;height:50%;z-index:0;filter:grayscale(1);-webkit-mask:linear-gradient(0deg,transparent 0%,white 100%);mask:linear-gradient(0deg,transparent 0%,white 100%)}.projects .projCont .card .bgImg img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.projects .projCont .card .webLogo{width:75px;height:75px;position:absolute;border-radius:50%;background-color:#202020;display:grid;place-items:center;z-index:2;border:5px solid #2b2b2b;box-shadow:none}.projects .projCont .card .webLogo img{width:100%;border-radius:50%}.projects .projCont .card .webLogo .noLogo{color:#f4ebd9;font-size:40px}.projects .projCont .card .profPic{position:absolute;padding:5px;border-radius:50%;background-color:#2b2b2b;display:grid;place-items:center;z-index:2}.projects .projCont .card .profPic img{width:75px;border-radius:50%}.projects .projCont .card .content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%;height:50%;background-color:#2b2b2b;z-index:1;color:#f4ebd9}.projects .projCont .card .content .contentImgs{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:20px}.projects .projCont .card .content .contentImgs .img{display:grid;place-items:center;position:relative}.projects .projCont .card .content .contentImgs .img:nth-child(1){transition-delay:0ms}.projects .projCont .card .content .contentImgs .img:nth-child(2){transition-delay:.1s}.projects .projCont .card .content .contentImgs .img:nth-child(3){transition-delay:.2s}.projects .projCont .card .content .contentImgs .img img{width:50px}.projects .projCont .card .content .contentImgs .img p{color:#f4ebd9;position:absolute;bottom:-20px;opacity:0;font-family:PT Sans Narrow,sans-serif;white-space:nowrap}.projects .projCont .card .content .contentImgs .img p:nth-child(1){transition-delay:0ms}.projects .projCont .card .content .contentImgs .img p:nth-child(2){transition-delay:.1s}.projects .projCont .card .content .contentImgs .img p:nth-child(3){transition-delay:.2s}.projects .projCont .card .content .contentImgs :where(#stylusLogo,#flaskLogo){filter:invert(1)}@keyframes pOpacity{to{opacity:1}}*{margin:0;padding:0;transition:all .2s ease;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}:root{background-color:#202020}nav{display:flex;position:fixed;left:50%;transform:translate(-50%);background-color:#202020;top:20px;width:fit-content;max-width:300px;border:2px solid #f4ebd9;z-index:4;flex-direction:row;padding:5px;color:#f4ebd9;gap:5px;border-radius:10px;box-shadow:0 0 10px #f4ebd9;justify-content:center;align-items:center}nav .item{padding:.5rem 1rem;border-radius:5px;display:flex;justify-content:center;align-items:center;width:80px;flex:1;cursor:pointer}nav .item:nth-child(1){flex:4;color:#202020;background:#f4ebd9}nav .progressBar{position:absolute;width:96%;height:2px;background:transparent;top:0}nav .airplane{color:#84d5ed;font-size:25px;position:absolute;left:0;top:-13px;transform:rotate(90deg);filter:drop-shadow(0 0 5px #202020)}nav .satellite{position:absolute;left:0;top:-13px;width:22px;aspect-ratio:1;filter:drop-shadow(0 0 5px #202020)}.scrollProgress{position:fixed;bottom:20px;right:20px;width:50px;height:50px;border-radius:50%;background:#2b2b2b;display:grid;place-items:center;z-index:5}.scrollProgress:hover>.valueHolder{opacity:1}.scrollProgress .valueHolder{position:absolute;width:90%;height:90%;background:#202020;border-radius:50%;display:grid;place-items:center;color:#f4ebd9;font-weight:700;font-size:small;opacity:0;transition:all .2s ease}.scrollProgress .scrollUp{width:90%;height:90%;background:#202020;border-radius:50%;color:#f4ebd9}