:root{--bg-color: #010101;--secondary-color: cyan;--color: #fff}body,html{margin:0;padding:0}a,a:active,a:visited{text-decoration:none;color:var(--color)}a:hover{color:var(--secondary-color)}#root{width:100vw;height:100vh;background-color:var(--bg-color)!important}#alpha1{position:absolute;left:calc(50% + 2px);top:50%;display:inline-block;font-size:60px;font-weight:bolder;font-stretch:ultra-expanded;transform:translate(-50%,-50%) rotate(365deg);color:#0ff;font-family:Roboto,sans-serif;filter:blur(.5px)}#alpha2{position:absolute;left:50%;top:50%;display:inline-block;font-size:60px;font-weight:bolder;font-family:Roboto,sans-serif;font-stretch:ultra-expanded;transform:translate(-50%,-50%) rotate(365deg);color:#f14b67}.navbar-section{display:flex;align-items:center;justify-content:space-around;background-color:transparent;color:#fff;padding:1rem 2rem;font-size:18px;font-weight:600;position:fixed;z-index:99999999999999;background-color:var(--bg-color);width:100%}.navbar-section.left{width:fit-content;flex-direction:column;text-align:left;padding:0;background:#181818;border-right:1px solid #222;justify-content:flex-start!important;height:100%;overflow:hidden}.nav-logo{position:relative}.navbar-section.left .nav-logo{padding:3rem 0rem;display:flex;align-items:center}.navbar-section.left .nav-item-wrapper{flex-direction:column;align-items:center}.navbar-section.left .nav-item{border-top:1px solid #282828;padding:1rem;width:100%;color:#909096;font-size:14px;font-weight:400;text-align:center}.nav-social{display:flex;align-items:center;justify-content:space-evenly}.nav-social a{color:#909096;font-size:14px;font-weight:400;text-align:center}.nav-social a:hover{color:var(--secondary-color)}section.left{padding-right:140px!important}.nav-item-wrapper{flex:0 0 50%;width:100%;display:flex;justify-content:space-between;align-items:center}.nav-item{transition:all .3s ease-in;cursor:pointer;color:#fff;text-decoration:none}.nav-item:hover,.nav-item.active{color:var(--secondary-color)!important;transition:all .3s ease-in}section{min-height:fit-content}.intro{color:#fff;padding:2rem 0rem 2rem 1.5rem;position:relative}.intro-title{font-size:5rem;line-height:6rem;font-weight:600;letter-spacing:.095rem;position:relative}.intro-subtitle{font-size:1.6rem;color:#8d8d8d;margin-top:1rem}.btn-contact{padding:.9rem 3rem;color:#fff;font-size:1rem;outline:0px;border-radius:.325rem;margin-top:1rem;background:transparent;border:1px solid var(--secondary-color);color:var(--secondary-color);font-weight:500;transition:all .3s ease-in;box-shadow:inset 0 0 0 0 var(--secondary-color);position:relative;cursor:pointer}.btn-contact-fill{background:var(--secondary-color);color:var(--bg-color);font-weight:500;transition:all .3s ease-in}.btn-contact:before{content:"";position:absolute;left:-1px;top:-1px;height:calc(100% + 1px);width:0px;border-radius:.325rem;background-color:var(--secondary-color);transition:all .3s ease-in}.btn-contact span{position:relative;z-index:2;font-size:14px;font-family:Open Sans,sans-serif;letter-spacing:2px}.btn-contact:hover{color:#000;border-color:transparent}.btn-contact-fill:hover{opacity:.8}.btn-contact:hover.btn-contact:before{width:calc(100% + 1px)}.btn-contact:after{content:""}.letter-hover{transition:all .3s ease-in-out;display:inline-block;position:relative;color:#fff;opacity:0}.letter-hover:hover{color:var(--secondary-color);transition:all .3s ease-in-out;animation-duration:1s;animation-fill-mode:both;animation-name:rubberBand;transition:all .3s ease-in}.flex-center{display:flex;justify-content:center;align-items:center}.mx-auto{margin-left:auto;margin-right:auto}.relative{position:relative}.line-container{position:absolute;top:3rem;left:0;width:0px;height:100%}.line{position:absolute;top:0;left:50%;transform:translate(-50%);width:2px;height:90%;background:linear-gradient(to bottom,cyan,transparent)}.dot{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background-color:#0ff;border-radius:50%}.t-1{top:1rem!important}.my-project{display:flex;justify-content:center;align-items:center;padding:2rem 0rem;flex-wrap:wrap}.project-img:hover .view-project{opacity:1;transform:translate(50%,-50%) scale(1);transition:all .15s ease-out}.project-img{height:300px;width:100%;flex:0 0 20%;position:relative;overflow:hidden;cursor:pointer;-webkit-transition:-webkit-transform .4s;transition:transform .4s;padding-left:0!important;padding-right:0!important}.project-img-large{height:400px}.project-img:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;outline:1px solid var(--secondary-color);-webkit-transition:-webkit-transform .4s;transition:transform .4s}.project-img:hover.project-img:before{background:none;-webkit-transition:-webkit-transform .4s;transition:transform .4s}.project-img:hover.project-img img{object-position:bottom left;transition:all 5s}.project-img img{height:100%;width:100%;object-fit:cover;transform:scale(1);transition:all 2s;object-position:top left}.view-project{height:60px;width:60px;border-radius:50%;background:var(--secondary-color);position:absolute;top:50%;right:50%;transform:translate(50%,-50%) scale(0);display:flex;color:#000;justify-content:center;align-items:center;text-align:center;font-size:12px;word-break:break-word;letter-spacing:.2rem;cursor:pointer;-webkit-transition:-webkit-transform .4s;transition:transform .4s;padding:1rem;line-height:1.2rem;opacity:0}.portfolio{padding:2rem}.portfolio-title{font-size:4rem;font-weight:600;color:var(--secondary-color);margin-bottom:2rem;text-wrap:nowrap}.portfolio-sub{font-size:1rem;font-weight:500;color:#fff;line-height:1.7rem}.portfolio-description{width:100%}.resume{display:block;width:fit-content}.skill-section{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2rem 4rem;flex:0 0 40%;align-items:flex-start}.skill-detail{flex:0 0 48%}.skill-progress{display:flex;flex-direction:column;align-items:flex-start;width:80%;gap:.725rem;background:transparent;width:100%;margin-bottom:2rem}.skill-progress label{color:#fff;font-size:1rem;font-weight:600;opacity:1}.toggle-class,#navToggle{display:none}.row{display:flex;justify-content:space-between;align-items:center}.inner-p{font-size:400px;font-weight:bolder;display:inline-block;color:var(--secondary-color);transform:translateY(-50%) rotate(336deg);top:50%;position:absolute;right:7.5rem}.lower-p{font-size:400px;font-weight:bolder;transform:rotate(336deg);position:absolute;top:calc(50% + 15px);transform:translateY(-50%) rotate(336deg);right:100px;color:#fb4b67}.p-wrapper{position:relative}.progress-wrapper{flex-grow:1;width:100%;margin-top:6rem}.progress{width:100%!important;background:#fff;height:3px!important;border-radius:22px!important;position:relative}.progress-value{position:absolute;top:0;left:0;height:3px;border-radius:22px;background-color:transparent}.form-control{width:100%;border:0;outline:0;background:#2b2b2b;min-height:50px;font-size:16px;color:#8d8d8d;padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box;margin-bottom:1rem;border-bottom:2px solid transparent;transition:all .15s ease-in}.contact-section{display:flex;padding:0rem 4rem;align-self:center}.contact-form{padding-bottom:20rem}.personal-detail{display:flex;gap:1rem}.form-control:focus{border:0px;border-bottom:2px solid var(--secondary-color);transition:all .15s ease-in}.contact-form{margin-top:1rem}.contact-form textarea{padding:1rem 20px}.social-media{color:#fff;display:flex;justify-content:flex-end;align-items:center;width:100%;gap:3rem;font-size:70px;font-weight:bolder}.instagram{display:inline-block;width:7.5rem;height:7.5rem;text-align:center;border-radius:20px;color:#fff;font-size:100px;line-height:7.5rem;vertical-align:middle;background:#d6249f;background:radial-gradient(circle at 30% 107%,#fdf497,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);box-shadow:0 3px 10px #00000040}.linkedin{background:#007bb6;color:#fff;height:7.5rem;width:7.5rem;border-radius:10px;text-align:center;line-height:7.5rem}.github{font-size:8.75rem}button{cursor:pointer}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}}section.right{position:relative;padding-left:7rem!important}.project-container{min-height:100vh;background:#000;width:100%;position:fixed;top:0;left:0;z-index:9999999999999;overflow-x:hidden;overflow-y:auto;height:100%}.project-container>i{color:#fff;font-size:1.5rem;position:relative;left:2rem;top:1rem;cursor:pointer;z-index:999;margin-bottom:1rem}.project-detail-container{height:fit-content;padding:2rem;padding-top:0}.project-detail{color:#fff;width:75%;margin:auto;display:flex;gap:1rem;justify-content:space-between;align-items:center;height:100%}.project-detail-content{width:80%}.project-detail-content-btn{display:flex;flex-direction:column;margin-top:1rem;gap:.3rem}.project-detail-content-btn .btn{width:fit-content;min-width:220px}.project-social-icons{position:fixed;top:0;left:10;height:100%;display:flex;flex-direction:column;justify-content:center;gap:1rem}.project-social-icons i{font-size:2rem}@media only screen and (max-width: 1024px){html{font-size:14px!important}#alpha1,#alpha2{font-size:40px}.navbar-section{position:fixed;justify-content:space-between;flex-direction:row!important;padding:1rem 2rem!important;width:calc(100% - 4rem)!important;height:fit-content!important}.navbar-section.left .nav-item{padding-left:0}.navbar-section.left{justify-content:space-between!important}.navbar-section.left .nav-logo{padding:0}.nav-item-wrapper{flex-direction:column!important;position:fixed;left:0;width:100%;background:#2c2c2c;align-items:flex-start!important;padding:1rem 2rem;top:-3000px!important;transition:all .3s ease-in;height:calc(100% - 48px - 2rem)!important;justify-content:space-around}#navToggle:checked~.nav-item-wrapper{top:48px!important;padding-left:0!important}.navbar-section{justify-content:space-between}.nav-item{padding:.7rem 0rem}.toggle-class{cursor:pointer;display:block}.project-img{flex-basis:unset;height:400px}.skill-section{flex-direction:column!important}.portfolio{transform:translate(0);flex-direction:column;justify-content:center;align-items:flex-start}.contact-section{flex-direction:column!important}section.left{padding-left:2rem!important}.social-media{margin-top:3rem;justify-content:flex-start}.instagram{font-size:90px}.fa-linkedin{padding:0rem 1rem}.social-media{gap:1rem}.intro-title{font-size:4rem;line-height:5rem}.intro{padding:5rem 2rem}section{padding-left:2rem!important;padding-right:2rem!important}section.right{padding-left:1rem!important}.p-wrapper{display:none}.my-project{gap:1rem;flex-wrap:nowrap;overflow-x:scroll;justify-content:flex-start}.portfolio-title{text-wrap:wrap}.project-detail{width:90%}.project-detail>.project-img{display:none}.project-detail-container{margin-top:3rem}.project-social-icons{position:relative;flex-direction:row;justify-content:space-between;margin-bottom:1rem}.project-social-icons>div{display:none}}.content{width:334px;height:216px;background:var(--bg-color);border-radius:3px;overflow-y:auto;overflow-x:hidden;padding:0}.wrapper{padding:10px;width:668px;height:432px;transform:scale(.5);transform-origin:top left}.menuBurger{width:3vmax;height:2.5vmax;position:fixed;top:2vmax;left:2vmax;display:flex;flex-direction:column;justify-content:space-between;align-items:center;cursor:pointer;padding:1vmax;overflow:hidden;z-index:1000}.menuBurgerItem{height:.3vmax;width:2.8vmax;border-radius:30px;transition:all .4s}.menuBurgerItem1{transform:rotate(45deg);top:2vmax;position:absolute}.menuBurgerItem2{transform:translate(-200%)}.menuBurgerItem3{transform:rotate(-45deg);top:2vmax;position:absolute}.nav{display:flex}.nav1,.nav2,.nav3,.nav4{padding:2vmax;height:100vh;width:25%;box-sizing:border-box;font-family:Roboto;z-index:100;position:fixed;display:flex}.nav1{left:0%}.nav2{left:25%}.nav3{left:50%}.nav4{left:75%}@keyframes LogoleftIn{0%{transform:translate(-100vw)}to{transform:translate(0)}}@keyframes LogoleftOut{0%{transform:translate(0)}to{transform:translate(-100vw)}}@keyframes LinkIn{0%{transform:translateY(-100vw)}to{transform:translateY(0)}}@keyframes LinkOut{0%{transform:translateY(0)}to{transform:translateY(-100vw)}}@keyframes IconIn{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes IconOut{0%{transform:translate(0)}to{transform:translate(100vw)}}@media screen and (max-width: 800px){.nav1{flex-direction:column}.nav2,.nav3,.nav4{flex-direction:column!important;justify-content:center!important}.logoReactNavbar{width:200%!important}.linksReactNavbar{font-size:2vmax!important}}