*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth;transition:.3s}body{font-family:"Lato",sans-serif;width:100%;height:100vh;overflow-x:hidden;-webkit-user-select:none;-ms-user-select:none;user-select:none}body #root{width:100%;height:100%;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-y:scroll;transition:.3s}@media screen and (max-width:768px) and (max-height:650px){body #root{overflow-y:unset}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:#5850ec;border-radius:8px;border:transparent}.cursor{height:20px;width:20px;border-radius:50%;position:absolute;border:1px solid #494949;transition-duration:.2s;transition-property:transform;pointer-events:none;z-index:3}@keyframes cursorAnim{0%{transform:scale(1.2)}to{transform:scale(.8)}}.cursor2{height:20px;width:20px;border-radius:50%;position:absolute;border:8px solid #000;transition-duration:.2s;transition-timing-function:ease-out;animation:cursorAnim .5s infinite alternate;pointer-events:none;opacity:.5;transition-property:transform;z-index:3}.aboutPage{scroll-snap-align:start;width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;padding:0 0 4rem}.aboutPage h2{width:100%;font-size:1.8rem;text-align:center;padding:1rem 2rem;color:#5850ec}.aboutPage .aboutLayout{width:100%;height:calc(100% - 70px);display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:0 2rem}.aboutPage .aboutLayout .aboutImage{width:300px;border-radius:10px;overflow:hidden}.aboutPage .aboutLayout .aboutImage img{width:100%}.aboutPage .aboutLayout .aboutInfo{display:flex;flex-direction:column;align-items:center}.aboutPage .aboutLayout .aboutInfo .aboutInfoHeading{font-size:1.25rem;text-align:center;margin-bottom:1rem}.aboutPage .aboutLayout .aboutInfo .aboutInfoHeadingDark{color:#fff}.aboutPage .aboutLayout .aboutInfo .aboutInfoDesc{font-size:1.1rem;text-align:center;font-weight:400;margin-bottom:1rem}.aboutPage .aboutLayout .aboutInfo .aboutInfoDesc svg{height:1.1rem;width:1.1rem;color:#5850ec;position:relative;bottom:-2.5px}.aboutPage .aboutLayout .aboutInfoDescDark{color:#fff}.aboutPage .aboutLayout .contactLinks{width:90%;margin-bottom:1rem;display:flex;justify-content:space-evenly}.aboutPage .aboutLayout .contactLinks li{list-style-type:none}.aboutPage .aboutLayout .contactLinks li .contactLink{height:40px;width:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:inset 0 0 15px rgba(88,80,236,.2);text-decoration:none;color:#5850ec}.aboutPage .aboutLayout .contactLinks li .contactLink svg{height:1.25rem}.aboutPage .aboutLayout .contactLinks li .contactLinkDark{border:1px solid #162035;box-shadow:inset 0 0 15px rgba(22,32,53,.5)}.aboutPage .aboutLayout .downloadCV{text-decoration:none;color:#fff;width:200px;height:40px;background-color:#5850ec;display:flex;align-items:center;justify-content:center;border-radius:10px}.aboutPage .aboutLayout .downloadCV svg{margin-left:.5rem;transition:0s}@media screen and (max-width:392px){.aboutPage .aboutLayout .aboutInfo .aboutInfoHeading{font-size:1.15rem}}@media screen and (max-width:361px){.aboutPage .aboutLayout .aboutInfo .aboutInfoHeading{margin-top:1rem}}@media screen and (min-width:768px){.aboutPage{padding-top:10vh}.aboutPage .aboutLayout{width:80%;flex-direction:row}.aboutPage .aboutLayout .aboutInfo{width:calc(100% - 350px)}}@media screen and (min-width:1100px){.aboutPage .aboutLayout{width:75%}.aboutPage .aboutLayout .aboutImage{width:400px}.aboutPage .aboutLayout .aboutInfo{width:calc(100% - 450px)}.aboutPage .aboutLayout .aboutInfo .aboutInfoDesc{margin-bottom:1.5rem}}.educationPage{scroll-snap-align:start;width:100%;height:100vh;padding:0 0 4rem}.educationPage h2{width:100%;font-size:1.8rem;text-align:center;padding:1rem 2rem;color:#5850ec}.educationPage .educationLayout{width:100%;height:calc(100% - 70px);display:flex;align-items:center;padding:0 2rem}.educationPage .educationLayout .educationProgress{width:3px;height:500px;position:relative;display:flex;flex-direction:column;justify-content:space-between}.educationPage .educationLayout .educationProgress .educationProgressStops{height:9px;width:9px;border-radius:50%;transform:translateX(-3px);background-color:#5850ec;position:relative}.educationPage .educationLayout .educationProgress .educationProgressStops:before{content:"";position:absolute;height:18px;width:18px;border-radius:50%;transform:translateX(-4.5px) translateY(-4.5px);background-color:rgba(88,80,236,.4)}.educationPage .educationLayout .educationProgress:before{content:"";position:absolute;width:100%;height:100%;background-color:#a0a0a0}.educationPage .educationLayout .educationProgress:after{content:"";position:absolute;width:100%;height:100%;background-color:#5850ec}.educationPage .educationLayout .educationCards{width:calc(100% - 3px);height:600px;display:flex;flex-direction:column;justify-content:space-between;padding-left:2rem}.educationPage .educationLayout .educationCards .educationCard{width:100%;height:135px;background-color:#fff;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,.1);display:flex;align-items:center}.educationPage .educationLayout .educationCards .educationCard .percentage{height:80px;width:80px;margin:0 1rem;position:relative;transition:0s}.educationPage .educationLayout .educationCards .educationCard .percentage .progressBackground{fill:none;stroke:hsla(0,0%,62.7%,.2);stroke-width:10px}.educationPage .educationLayout .educationCards .educationCard .percentage .progress{fill:none;stroke:#5850ec;stroke-width:10px;stroke-linecap:round;transform-origin:center;transform:rotate(-90deg)}.educationPage .educationLayout .educationCards .educationCard .percentage .progressX{stroke-dasharray:202px}.educationPage .educationLayout .educationCards .educationCard .percentage .progressXII{stroke-dasharray:169px}.educationPage .educationLayout .educationCards .educationCard .percentage .progressBCA{stroke-dasharray:178px}.educationPage .educationLayout .educationCards .educationCard .percentage .progressMCA{stroke-dasharray:201px}.educationPage .educationLayout .educationCards .educationCard .percentage .progressShadow{width:60px;height:60px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;box-shadow:0 0 15px rgba(0,0,0,.2)}.educationPage .educationLayout .educationCards .educationCard .percentage .progressDarkBG{background-color:#0f1624;box-shadow:0 0 15px rgba(0,0,0,.2)}.educationPage .educationLayout .educationCards .educationCard .percentage p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700}.educationPage .educationLayout .educationCards .educationCard .info{padding-right:.5rem;transition:0s}.educationPage .educationLayout .educationCards .educationCard .info h3{margin-bottom:.1rem}.educationPage .educationLayout .educationCards .educationCard .info h4{font-size:.9rem;margin-bottom:.1rem}.educationPage .educationLayout .educationCards .educationCard .info p{font-size:.8rem}.educationPage .educationLayout .educationCards .educationDarkBG{background-color:#0f1624;box-shadow:0 0 15px #162035;color:#fff}@media screen and (max-width:376px){.educationPage h2{font-size:1.5rem}.educationPage .educationLayout{transform:scale(.9) translateY(-2.5%)}}@media screen and (max-width:361px){.educationPage .educationLayout{transform:scale(.9) translateY(2.5%)}}@media screen and (min-width:768px){.educationPage{padding-top:10vh}}@media screen and (min-width:999px){.educationPage .educationLayout{flex-direction:column-reverse;align-items:center;justify-content:center}.educationPage .educationLayout .educationProgress{width:80%;height:3px;flex-direction:row;margin-top:2rem}.educationPage .educationLayout .educationProgress .educationProgressStops{transform:translateX(-3px)}.educationPage .educationLayout .educationProgress:after,.educationPage .educationLayout .educationProgress:before{top:0;transform:translate(-3px,3px)}.educationPage .educationLayout .educationCards{width:100%;height:300px;flex-direction:row;padding:0}.educationPage .educationLayout .educationCards .educationCard{padding:3rem 1rem;flex-direction:column;width:225px;height:97%}.educationPage .educationLayout .educationCards .educationCard .percentage{transform:scale(1.25)}.educationPage .educationLayout .educationCards .educationCard .info{padding:2.5rem 0 0;width:100%;text-align:center}.educationPage .educationLayout .educationCards .educationCard .info h4{margin-bottom:.75rem}}@media screen and (min-width:1200px){.educationPage .educationLayout .educationProgress{width:64%}.educationPage .educationLayout .educationCards{width:80%}}.hobbiesPage{scroll-snap-align:start;width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;padding:0 0 4rem}.hobbiesPage h2{width:100%;font-size:1.8rem;text-align:center;padding:1rem 2rem;color:#5850ec}.hobbiesPage .aboutLayout{width:100%;height:calc(100% - 70px);display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.hobbiesPage .aboutLayout .hobbiesTitle{text-align:center;padding-bottom:1rem;transition:0s}.hobbiesPage .aboutLayout .hobbiesTitleDark{color:#fff}.hobbiesPage .aboutLayout .routes{display:flex;justify-content:space-evenly;width:300px;height:125px}.hobbiesPage .aboutLayout .routes a{height:125px;width:125px;text-decoration:none}.hobbiesPage .aboutLayout .routes a .btnRoute{position:relative;height:100%;width:100%;border-radius:50%;box-shadow:0 0 15px rgba(88,80,236,.2);color:#000;display:flex;justify-content:center;align-items:center;z-index:2;overflow:hidden}.hobbiesPage .aboutLayout .routes a .btnRoute h5{text-align:center;transition:0s;font-weight:400}.hobbiesPage .aboutLayout .routes a .btnRoute svg{height:15px;width:15px;margin-left:.5rem;color:#a0a0a0}.hobbiesPage .aboutLayout .routes a .btnRoute:before{content:"";position:absolute;top:-5%;left:-5%;height:110%;width:110%;border-radius:50%;z-index:-1;transition:.3s;opacity:0}.hobbiesPage .aboutLayout .routes a .btnRoute:hover{color:#fff}.hobbiesPage .aboutLayout .routes a .btnRoute:hover:before{opacity:1;background:linear-gradient(225deg,#08004d,#042ca4)}.hobbiesPage .aboutLayout .routes a .btnRouteDark{box-shadow:0 0 15px #162035;color:#fff}.hobbiesPage .aboutLayout .hobbiesList{display:grid;grid-template-columns:1fr 1fr;grid-gap:.5rem;gap:.5rem}.hobbiesPage .aboutLayout .hobbiesList .hobbyCard{height:175px;width:175px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.hobbiesPage .aboutLayout .hobbiesList .hobbyCard img{height:140px;width:140px}.hobbiesPage .aboutLayout .hobbiesList .hobbyCard .hobbyCardText{transition:0s;position:absolute;bottom:0;font-weight:400}.hobbiesPage .aboutLayout .hobbiesList .hobbyCard .hobbyCardTextDark{color:#fff}@media screen and (max-width:376px){.hobbiesPage h2{font-size:1.5rem}}@media screen and (max-width:361px){.hobbiesPage .aboutLayout{transform:scale(.9)}}@media screen and (min-width:768px){.hobbiesPage{padding:10vh 0 0}.hobbiesPage .aboutLayout{height:calc(100% - 70px - 10vh);flex-direction:row;width:70%}.hobbiesPage .aboutLayout .routes{margin-top:1rem}}@media screen and (min-width:1100px){.hobbiesPage .aboutLayout{transform:scale(1.2)}}.landingPage{scroll-snap-align:start;background-image:url(/static/media/LandingBG.201daa99.png);background-size:cover;background-position:50%;height:100vh;width:100%;display:flex;flex-direction:column-reverse}.landingPage .typeText{width:100%;height:50%;padding:5rem 0 0 1.5rem;display:flex;flex-direction:column}.landingPage .typeText h2{font-size:1.8rem;margin-bottom:.2rem;color:#323232}.landingPage .typeText p{font-size:1.8rem;font-weight:700;color:#323232}.landingPage .typeText .landingTextDark{color:#fff}.landingPage .typeText .typingText{color:#5850ec}.landingPage .typeText .typingCursor{display:inline-block;width:3px;background-color:#5850ec;margin-left:.1rem;animation:blink 1s infinite}.landingPage .typeText .stopBlinking{animation:none}.landingPage .avatar{width:100%;height:50%;display:flex;justify-content:center;align-items:center}.landingPage .avatar img{height:350px;width:350px;transition:.3s}@keyframes blink{0%{background-color:#5850ec}49%{background-color:#5850ec}50%{background-color:transparent}99%{background-color:transparent}to{background-color:#5850ec}}@media screen and (min-width:767px){.landingPage{flex-direction:row;padding-top:10vh}.landingPage .typeText{height:100%;width:100%;padding:2rem 0 0 2rem;justify-content:center}.landingPage .typeText h2,.landingPage .typeText p{font-size:2.2rem}.landingPage .avatar{height:100%}.landingPage .avatar img{height:400px;width:400px}}@media screen and (min-width:1100px){.landingPage .typeText h2,.landingPage .typeText p{font-size:2.5rem;margin-left:3rem}.landingPage .avatar img{height:550px;width:550px}}nav{width:100%;height:3rem;position:fixed;bottom:0;background-color:hsla(0,0%,100%,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 0 15px rgba(0,0,0,.2);display:flex;justify-content:space-between;align-items:center;padding:0 2rem;z-index:3}nav .navLogo{height:2rem;width:2rem}nav .navLogo img{height:100%;width:100%}nav .navItems{position:fixed;bottom:0;left:0;width:100%;padding:1.5rem 1.5rem 4rem;background-color:#fff;border-radius:1.5rem 1.5rem 0 0;box-shadow:0 -1px 7px rgba(0,0,0,.2);transition:.3s;transform:translateY(100%);z-index:3}nav .navItems ul{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:2rem;gap:2rem}nav .navItems ul li{list-style:none}nav .navItems ul li a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:#5850ec}nav .navItems ul li a svg{margin-bottom:.25rem}nav .navItems .navClose{position:absolute;bottom:.65rem;right:2rem;font-size:1.5rem;color:#5850ec}nav .navItemsDark{background-color:#0f1624;box-shadow:0 -1px 7px #162035}nav .navItems.showNavItems{transform:translateY(0)}nav .navToggle{display:flex;align-items:center}nav .navToggle .menuToggle,nav .navToggle .themeToggle{font-size:1.25rem;color:#5850ec}nav .navToggle .menuToggle{margin-left:2rem}.navDark{background-color:rgba(15,22,36,.9)}@media screen and (min-width:768px){nav{top:0;height:10vh;padding:0 5rem}nav .navLogo{height:45px;width:45px}nav .navLogo img{height:100%;width:100%}nav .navItems{position:relative;background-color:unset;box-shadow:unset;transform:none;padding:0;width:unset;margin-left:auto}nav .navItems ul{display:flex;grid-column-gap:1.5rem;-webkit-column-gap:1.5rem;column-gap:1.5rem}nav .navItems ul li a{padding:.5rem;color:unset;transition:.3s}nav .navItems ul li a:hover{color:#5850ec;font-weight:700}nav .navItems ul li a svg{display:none}nav .navItems ul li .navLinksDark{color:hsla(0,0%,100%,.8)}nav .navItems .navClose{display:none}nav .navToggle .themeToggle{margin-left:2rem;transition:.3s;cursor:pointer}nav .navToggle .themeToggle:hover{color:#5850ec}nav .navToggle .themeToggle .themeToggleDark{color:hsla(0,0%,100%,.8);background-color:red}nav .navToggle .menuToggle{display:none}}.startLogoContainer{width:100%;height:100%;position:fixed;top:0;left:0;animation:vanish .5s ease-out 5s forwards;background-color:#fff;z-index:4}.box,.startLogoContainer{display:flex;justify-content:center;align-items:center}.box{height:150px;width:150px;font-size:8rem;position:relative;overflow:hidden}.box .LogoOutline{position:absolute;z-index:3}.box .Logo,.box .Logo img,.box .LogoOutline,.box .LogoOutline img{height:100%;width:100%}.box:before{background-color:hsla(0,0%,100%,.6);border-radius:30%}.box:after,.box:before{content:"";position:absolute;width:125%;height:125%;animation:spin 4s linear forwards}.box:after{background-color:#fff;border-radius:47%}.boxDark:before{background-color:rgba(15,22,36,.6);border-radius:30%}.boxDark:after,.boxDark:before{content:"";position:absolute;width:125%;height:125%;animation:spin 4s linear forwards}.boxDark:after{background-color:#0f1624;border-radius:47%}@keyframes spin{0%{transform:translateY(-10%) rotate(0deg)}40%{transform:translateY(-50%) rotate(200deg)}60%{transform:translateY(-50%) rotate(300deg)}to{transform:translateY(-100%) rotate(500deg)}}@keyframes vanish{to{top:-100%;opacity:0}}@media screen and (min-width:768px){.box{height:200px;width:200px}}.projectPage{scroll-snap-align:start;width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;padding:0 0 4rem;overflow-x:hidden}.projectPage h2{font-size:1.8rem;padding:1rem 2rem;color:#5850ec}.projectPage .projectLayout{align-self:center;width:391px;height:calc(100% - 70px);place-content:center;transition:.3s;display:grid;grid-template-columns:repeat(3,auto);grid-template-rows:repeat(6,75px);grid-gap:.5rem;gap:.5rem;grid-template-areas:". proj1 ." "proj2 proj1 proj3" "proj2 proj4 proj3" "proj5 proj4 proj6" "proj5 proj7 proj6" ". proj7 projn"}.projectPage .projectLayout .projectCard{width:125px;height:158px;border-radius:10px;background-color:#fff;box-shadow:0 0 15px rgba(88,80,236,.2);display:flex;flex-direction:column;align-items:center;padding:1rem .5rem}.projectPage .projectLayout .projectCard .projectCardImage{height:50px;width:50px;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:inset 0 0 7px rgba(88,80,236,.2);margin-bottom:.5rem}.projectPage .projectLayout .projectCard .projectCardImage svg{height:30px;width:30px;color:#5850ec}.projectPage .projectLayout .projectCard .projectCardImageDark{border:1px solid #162035;box-shadow:inset 0 0 7px #162035}.projectPage .projectLayout .projectCard .projectCardInfo{display:flex;flex-direction:column;justify-content:space-between;width:100%;text-align:center;height:calc(100% - 50px)}.projectPage .projectLayout .projectCard .projectCardInfo .projectCardInfoTitle{transition:0s}.projectPage .projectLayout .projectCard .projectCardInfo .projectLinks{width:100%;display:flex;flex-direction:column;position:relative;bottom:0}.projectPage .projectLayout .projectCard .projectCardInfo .projectLinks a{text-decoration:none;font-size:.7rem;margin:.25rem .25rem 0;padding:.25rem 0;border-radius:5px;color:#000;background-color:rgba(88,80,236,.1)}.projectPage .projectLayout .projectCard .projectCardInfo .projectLinks .projectLinkDark{color:#e6e6e6;background-color:rgba(0,0,0,.1)}.projectPage .projectLayout .projectdarkBG{background-color:#0f1624;box-shadow:0 0 15px #162035;color:#fff}.projectPage .projectLayout .proj1{grid-area:proj1}.projectPage .projectLayout .proj2{grid-area:proj2}.projectPage .projectLayout .proj3{grid-area:proj3}.projectPage .projectLayout .proj4{grid-area:proj4}.projectPage .projectLayout .proj5{grid-area:proj5}.projectPage .projectLayout .proj6{grid-area:proj6}.projectPage .projectLayout .proj7{grid-area:proj7}.projectPage .projectLayout .projn{grid-area:projn;width:125px;height:75px}.projectPage .projectLayout .projn a{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-decoration:none;color:#a0a0a0;opacity:.4;transition:.3s}.projectPage .projectLayout .projn a p{margin-top:.25rem;font-size:.8rem}.projectPage .projectLayout .projn a:hover{opacity:.6}@media screen and (max-width:376px){.projectPage h2{padding-bottom:5rem}.projectPage .projectLayout{transform:scale(.9)}}@media screen and (max-width:361px){.projectPage h2{padding-bottom:1rem}}@media screen and (min-width:768px){.projectPage{padding:10vh 0 0}.projectPage .projectLayout{width:640px;height:calc(100% - 70px - 10vh);grid-template-rows:repeat(3,auto);grid-template-columns:repeat(6,auto);grid-template-areas:". proj1 proj1 proj2 proj2 ." "proj3 proj3 proj4 proj4 proj5 proj5" ". proj6 proj6 proj7 proj7 projn"}.projectPage .projectLayout .projectCard{width:208px;height:150px;overflow:hidden;padding:1rem}.projectPage .projectLayout .projectCard .projectCardImage{transition:.3s;transform:scale(1.5) translateY(40%);margin-bottom:0}.projectPage .projectLayout .projectCard .projectCardInfo{transition:.3s;transform:translateY(60%)}.projectPage .projectLayout .projectCard .projectCardInfo h4{margin-top:.75rem}.projectPage .projectLayout .projectCard .projectCardInfo .projectLinks{display:grid;grid-template-columns:1fr 1fr;grid-gap:.5rem;gap:.5rem}.projectPage .projectLayout .projectCard .projectCardInfo .projectLinks a{margin:0;width:100%;transition:.3s}.projectPage .projectLayout .projectCard .projectCardInfo .projectLinks a:hover{background-color:rgba(88,80,236,.2)}.projectPage .projectLayout .projectCard:hover .projectCardImage{transform:none}.projectPage .projectLayout .projectCard:hover .projectCardInfo{transform:translateY(0)}.projectPage .projectLayout .projn{width:100px;height:150px}}@media screen and (min-width:1100px){.projectPage .projectLayout{width:790px}.projectPage .projectLayout .projectCard{width:258px}.projectPage .projectLayout .projn{width:125px}}.skillsPage{scroll-snap-align:start;width:100%;height:100vh;padding:0 0 4rem}.skillsPage h2{width:100%;font-size:1.8rem;text-align:center;padding:1rem 2rem;color:#5850ec}.skillsPage .skillsLayout{display:grid;grid-template-columns:repeat(5,auto);grid-template-rows:repeat(8,64px);grid-gap:.5rem;gap:.5rem;grid-template-areas:". nodejs pos5 . ." "pos3 c_cpp c_cpp expressjs pos2" "git c_cpp c_cpp mysql mongodb" "javascript javascript python reactjs reactjs" "javascript javascript java reactjs reactjs" "css illustrator illustrator html threejs" "pos4 illustrator illustrator adobexd pos1" ". figma photoshop pos6 .";width:368px;height:calc(100% - 70px);place-content:center;margin:0 auto;transition:.3s}.skillsPage .skillsLayout .skill{border-radius:50%;box-shadow:0 0 15px rgba(88,80,236,.2);display:flex;align-items:center;justify-content:center;transition:.3s;position:relative;overflow:hidden;font-weight:700;background-color:#fff}.skillsPage .skillsLayout .skill:hover{box-shadow:0 2px 15px rgba(88,80,236,.9);color:#fff;cursor:pointer}.skillsPage .skillsLayout .skill:before{content:"";position:absolute;width:110%;height:110%;top:-5%;left:-5%;background:linear-gradient(225deg,#5850ec,#090983);z-index:-1;transition:.3s;opacity:0}.skillsPage .skillsLayout .skill:hover:before{opacity:1}.skillsPage .skillsLayout .skilldarkBG{background-color:#0f1624;box-shadow:0 0 15px rgba(22,32,53,.75);border:1px solid rgba(27,40,66,.6431372549019608);color:#fff}.skillsPage .skillsLayout .skilldarkBG:hover{box-shadow:0 2px 15px rgba(0,0,0,.4);border:none}.skillsPage .skillsLayout .skilldarkBG:before{content:"";position:absolute;width:110%;height:110%;top:-5%;left:-5%;background:linear-gradient(225deg,#042ca4,#08004d);z-index:-1;transition:.3s;opacity:0}.skillsPage .skillsLayout .smallskill{height:64px;width:64px;font-size:.65rem}.skillsPage .skillsLayout .largeskill{height:144px;width:144px;font-size:1.25rem}.skillsPage .skillsLayout .uselessskill{height:25px;width:25px}.skillsPage .skillsLayout .nodejsSkill{grid-area:nodejs;animation:float1 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .expressjsSkill{grid-area:expressjs;animation:float2 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .gitSkill{grid-area:git;animation:float2 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .mysqlSkill{grid-area:mysql;animation:float5 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .mongodbSkill{grid-area:mongodb;animation:float1 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .pythonSkill{grid-area:python;animation:float2 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .javaSkill{grid-area:java;animation:float5 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .cssSkill{grid-area:css;animation:float3 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .htmlSkill{grid-area:html;animation:float3 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .photoshopSkill{grid-area:photoshop;animation:float2 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .figmaSkill{grid-area:figma;animation:float1 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .threejsSkill{grid-area:threejs;animation:float5 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .adobexdSkill{grid-area:adobexd;animation:float1 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .c_cppSkill{grid-area:c_cpp;animation:float3 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .javascriptSkill{grid-area:javascript;animation:float1 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .reactjsSkill{grid-area:reactjs;animation:float2 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .illustratorSkill{grid-area:illustrator;animation:float4 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .pos1{grid-area:pos1;animation:float3 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .pos2{grid-area:pos2;align-self:end;animation:float4 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .pos3{grid-area:pos3;align-self:end}.skillsPage .skillsLayout .pos3,.skillsPage .skillsLayout .pos4{justify-self:end;animation:float1 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .pos4{grid-area:pos4}.skillsPage .skillsLayout .pos5{grid-area:pos5;align-self:end;animation:float4 10s linear infinite alternate-reverse}.skillsPage .skillsLayout .pos6{grid-area:pos6;animation:float1 10s linear infinite alternate-reverse}@keyframes float1{0%{transform:translateX(-4px) translateY(0)}25%{transform:translateX(-2px) translateY(4px)}50%{transform:translateX(0) translateY(-4px)}75%{transform:translateX(2px) translateY(4px)}to{transform:translateX(4px) translateY(0)}}@keyframes float2{0%{transform:translateX(4px) translateY(0)}25%{transform:translateX(2px) translateY(-4px)}50%{transform:translateX(0) translateY(4px)}75%{transform:translateX(-2px) translateY(-4px)}to{transform:translateX(4px) translateY(0)}}@keyframes float3{0%{transform:translateX(0) translateY(4px)}25%{transform:translateX(4px) translateY(2px)}50%{transform:translateX(-4px) translateY(0)}75%{transform:translateX(4px) translateY(-2px)}to{transform:translateX(0) translateY(-4px)}}@keyframes float4{0%{transform:translateX(0) translateY(-4px)}25%{transform:translateX(-4px) translateY(-2px)}50%{transform:translateX(4px) translateY(0)}75%{transform:translateX(-4px) translateY(2px)}to{transform:translateX(0) translateY(4px)}}@keyframes float5{0%{transform:translateX(-4px) translateY(4px)}25%{transform:translateX(2px) translateY(-4px)}50%{transform:translateX(4px) translateY(4px)}75%{transform:translateX(-4px) translateY(-4px)}to{transform:translateX(0) translateY(0)}}@media screen and (max-width:376px){.skillsPage .skillsLayout{transform:scale(.95)}}@media screen and (max-width:361px){.skillsPage .skillsLayout{transform:scale(.85)}}@media screen and (min-width:768px){.skillsPage{padding:10vh 0 0}.skillsPage .skillsLayout{width:584px;height:calc(100% - 70px - 10vh);display:grid;grid-template-columns:repeat(8,auto);grid-template-rows:repeat(5,auto);grid-gap:.5rem;gap:.5rem;grid-template-areas:". pos1 nodejs expressjs javascript javascript pos6 ." "java c_cpp c_cpp mysql javascript javascript html pos3" "pos2 c_cpp c_cpp mongodb threejs css reactjs reactjs" ". python git illustrator illustrator adobexd reactjs reactjs" ". . pos4 illustrator illustrator figma photoshop pos5"}.skillsPage .skillsLayout .pos1{align-self:end;justify-self:center}.skillsPage .skillsLayout .pos2{align-self:stretch;justify-self:end}.skillsPage .skillsLayout .pos3{justify-self:start}.skillsPage .skillsLayout .pos5{align-self:stretch}.skillsPage .skillsLayout .pos6{align-self:end}}@media screen and (min-width:1100px){.skillsPage .skillsLayout{transform:scale(1.2)}}.vectorContainer{height:100vh;width:100%;display:flex;justify-content:center;align-items:center;padding:0 0 3rem}.vectorContainer .vectorGrid{display:grid;grid-template-rows:200px 200px 200px;grid-template-columns:350px;grid-gap:.5rem;gap:.5rem}.vectorContainer .vectorGrid .eyesVectors,.vectorContainer .vectorGrid .portraitsVectors{height:100%;width:100%}.vectorContainer .vectorGrid .swiper-container{width:350px;border-radius:.25rem}.vectorContainer .vectorGrid .swiper-container .swiper-slide{width:200px;height:100%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(0,0,0,.2);-webkit-filter:blur(4px);filter:blur(4px);border-radius:.25rem;overflow:hidden;position:relative}.vectorContainer .vectorGrid .swiper-container .swiper-slide img{height:100%;width:100%}.vectorContainer .vectorGrid .swiper-container .swiper-slide p{position:absolute;width:100%;bottom:0;padding:.25rem 0;background-color:hsla(0,0%,100%,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-align:center;font-size:.65rem;font-weight:700}.vectorContainer .vectorGrid .swiper-container .swiper-slide .swiper-slide-shadow-left,.vectorContainer .vectorGrid .swiper-container .swiper-slide .swiper-slide-shadow-right{background-image:none}.vectorContainer .vectorGrid .swiper-container .swiper-slide-active{-webkit-filter:blur(0);filter:blur(0)}.vectorContainer .vectorGrid .miscVectors{height:100%;width:100%}.vectorContainer .vectorGrid .miscVectors .swiper-container{height:100%}.vectorContainer .vectorGrid .miscVectors .swiper-container .swiper-slide{width:100%;height:100%}.vectorContainer .vectorGrid .miscVectors .swiper-container .swiper-slide img{width:100%;height:100%;object-fit:cover}@media screen and (max-width:361px){.vectorContainer .vectorGrid{grid-gap:0;gap:0}}@media screen and (min-width:768px){.vectorContainer{padding:10vh 0 0}.vectorContainer .vectorGrid{grid-template-rows:repeat(2,300px);grid-template-columns:repeat(2,350px);grid-template-areas:"portraits eye" "misc misc"}.vectorContainer .vectorGrid .portraitsVectors{grid-area:portraits}.vectorContainer .vectorGrid .eyesVectors{grid-area:eye}.vectorContainer .vectorGrid .swiper-container{width:100%;height:100%}.vectorContainer .vectorGrid .swiper-container .swiper-slide{width:300px;height:300px}.vectorContainer .vectorGrid .miscVectors{grid-area:misc}.vectorContainer .vectorGrid .miscVectors .swiper-container .swiper-slide{width:600px}}@media screen and (max-height:674px){.vectorContainer .vectorGrid{transform:scale(.9)}}.posterContainer{padding:calc(10vh + .75rem) .75rem 0;-webkit-column-count:3;-webkit-column-width:33%;columns:33% 3}.posterContainer .poster{margin-bottom:.75rem;cursor:pointer}.posterContainer .poster:hover{opacity:.8}.show{width:100%;height:100%;position:fixed;left:0;right:0;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:4;opacity:0;transform:scale(0)}.show img{width:auto;max-width:100%;height:auto;max-height:100%}.show svg{position:fixed;top:10px;right:10px;height:2rem;width:2rem;color:#5850ec;background-color:rgba(0,0,0,.4);border-radius:50%;cursor:pointer}.show.open{opacity:1;transform:scale(1)}@media screen and (max-width:999px){.posterContainer{-webkit-column-count:2;-webkit-column-width:50%;columns:50% 2}}@media screen and (max-width:768px){.posterContainer{-webkit-column-count:1;-webkit-column-width:100%;columns:100% 1;padding:.75rem .75rem calc(4vh + .75rem)}}.darkThemeBG{background-color:#0f1624}
/*# sourceMappingURL=main.32a658b5.chunk.css.map */