body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{height:100vh;width:100vw;-webkit-tap-highlight-color:transparent}.App .sections{margin:0;width:100%;height:calc(100vh - 70px);background-color:#4d0335;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Ccircle fill='%234d0335' cx='50' r='50'/%3E%3Cg fill='%23490535'%3E%3Ccircle cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23460636' cx='50' cy='100' r='50'/%3E%3Cg fill='%23420836'%3E%3Ccircle cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%233e0936' cx='50' cy='200' r='50'/%3E%3Cg fill='%233b0a36'%3E%3Ccircle cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%23370b36' cx='50' cy='300' r='50'/%3E%3Cg fill='%23330c35'%3E%3Ccircle cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23300d35' cx='50' cy='400' r='50'/%3E%3Cg fill='%232c0e34'%3E%3Ccircle cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23280e33' cx='50' cy='500' r='50'/%3E%3Cg fill='%23250e32'%3E%3Ccircle cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%23210e31' cx='50' cy='600' r='50'/%3E%3Cg fill='%231e0e30'%3E%3Ccircle cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%231b0e2e' cx='50' cy='700' r='50'/%3E%3Cg fill='%23180e2d'%3E%3Ccircle cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23150d2b' cx='50' cy='800' r='50'/%3E%3Cg fill='%23120c29'%3E%3Ccircle cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%23100b28' cx='50' cy='900' r='50'/%3E%3Cg fill='%230c0926'%3E%3Ccircle cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23090824' cx='50' cy='1000' r='50'/%3E%3C/svg%3E");background-attachment:fixed;background-size:contain;position:relative;top:70px;scroll-behavior:smooth;-ms-scroll-snap-type:y;scroll-snap-type:y;scrollbar-width:none}.App .sections::-webkit-scrollbar{display:none}.App .sections>*{width:100vw;height:calc(100vh - 70px);scroll-snap-align:start}.aboutMe{display:flex;transition:all 1s ease;width:100%;flex-direction:column;align-items:center}.aboutMe h1{font-weight:500;color:#fff;margin-top:90px;font-size:50px}.aboutMe .grid{width:90%;height:80%}.aboutMe .grid .cards{margin:50px 20px 20px;background-color:#4a1b5f;box-shadow:0 12px 18px -6px rgba(241,238,238,.3);border-radius:10px}.aboutMe .grid .cards,.aboutMe .grid .cards .detail{display:flex;align-items:center;justify-content:center}.aboutMe .grid .cards .detail{flex-direction:column;flex:0.6 1}.aboutMe .grid .cards .detail.card2{padding-left:10px}.aboutMe .grid .cards .detail .arrowImg{height:50px;width:50px;-webkit-filter:invert(100%);filter:invert(100%)}.aboutMe .grid .cards .detail h1{font-size:30px}.aboutMe .grid .cards .detail p{color:#fff;font-size:20px;font-weight:300}.aboutMe .grid .cards .imagess{transition:all 1s ease;max-height:100%;max-width:100%;flex:0.4 1;object-fit:cover;display:block;align-items:center;justify-content:center}.aboutMe .grid .cards .imagess img{width:100%;height:100%;object-fit:contain;transition:1s ease}.aboutMe .grid .cards .imagess img:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.aboutMe .grid ::-webkit-scrollbar{display:none}.aboutMe.active{transition:all 1s ease;background-color:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Ccircle fill='%23fff' cx='50' r='50'/%3E%3Cg fill='%23f8f8f8'%3E%3Ccircle cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f2f2f2' cx='50' cy='100' r='50'/%3E%3Cg fill='%23ebebeb'%3E%3Ccircle cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23e4e4e4' cx='50' cy='200' r='50'/%3E%3Cg fill='%23dedede'%3E%3Ccircle cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%23d7d7d7' cx='50' cy='300' r='50'/%3E%3Cg fill='%23d1d1d1'%3E%3Ccircle cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23cacaca' cx='50' cy='400' r='50'/%3E%3Cg fill='%23c4c4c4'%3E%3Ccircle cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23bdbdbd' cx='50' cy='500' r='50'/%3E%3Cg fill='%23b7b7b7'%3E%3Ccircle cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%23b1b1b1' cx='50' cy='600' r='50'/%3E%3Cg fill='%23ababab'%3E%3Ccircle cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23a4a4a4' cx='50' cy='700' r='50'/%3E%3Cg fill='%239e9e9e'%3E%3Ccircle cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23989898' cx='50' cy='800' r='50'/%3E%3Cg fill='%23929292'%3E%3Ccircle cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%238c8c8c' cx='50' cy='900' r='50'/%3E%3Cg fill='%23868686'%3E%3Ccircle cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='gray' cx='50' cy='1000' r='50'/%3E%3C/svg%3E");background-attachment:fixed;background-size:contain}.aboutMe.active h1{font-weight:500;font-size:50px;color:#000}.aboutMe.active .grid .cards{background-color:#fff;box-shadow:0 12px 18px -6px rgba(0,0,0,.3)}.aboutMe.active .grid .cards .detail .arrowImg{-webkit-filter:invert(0);filter:invert(0)}.aboutMe.active .grid .cards .detail h1{font-weight:500}.aboutMe.active .grid .cards .detail p{color:#000;font-weight:400}::-webkit-scrollbar{display:none}@media only screen and (max-width:700px){.grid .cards{flex-direction:column}}.contact___main{display:flex;flex-direction:column;align-items:center;justify-content:center}.contact___main.active{transition:all 1s ease;background-color:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Ccircle fill='%23fff' cx='50' r='50'/%3E%3Cg fill='%23f8f8f8'%3E%3Ccircle cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f2f2f2' cx='50' cy='100' r='50'/%3E%3Cg fill='%23ebebeb'%3E%3Ccircle cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23e4e4e4' cx='50' cy='200' r='50'/%3E%3Cg fill='%23dedede'%3E%3Ccircle cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%23d7d7d7' cx='50' cy='300' r='50'/%3E%3Cg fill='%23d1d1d1'%3E%3Ccircle cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23cacaca' cx='50' cy='400' r='50'/%3E%3Cg fill='%23c4c4c4'%3E%3Ccircle cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23bdbdbd' cx='50' cy='500' r='50'/%3E%3Cg fill='%23b7b7b7'%3E%3Ccircle cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%23b1b1b1' cx='50' cy='600' r='50'/%3E%3Cg fill='%23ababab'%3E%3Ccircle cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23a4a4a4' cx='50' cy='700' r='50'/%3E%3Cg fill='%239e9e9e'%3E%3Ccircle cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23989898' cx='50' cy='800' r='50'/%3E%3Cg fill='%23929292'%3E%3Ccircle cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%238c8c8c' cx='50' cy='900' r='50'/%3E%3Cg fill='%23868686'%3E%3Ccircle cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='gray' cx='50' cy='1000' r='50'/%3E%3C/svg%3E");background-attachment:fixed;background-size:contain}.contact___main.active h1{color:#000;font-weight:400}.contact___main.active .contact__wrapper .contact__mainicon .mailid .mailidspan,.contact___main.active .contact__wrapper .contact__mainicon .phonenumber .spanPhoneNumber{color:#000}.contact___main.active .email:hover,.contact___main.active .facebook:hover,.contact___main.active .instagram:hover,.contact___main.active .phone:hover{box-shadow:0 1px 20px #000;background-color:#2e2e2e;color:#fff;transition:.5s ease}.contact___main h1{color:#fff;font-size:50px;font-weight:300}.contact___main .contact__wrapper{width:100%;object-fit:contain;display:flex;align-items:center;justify-content:center;padding:10px}.contact___main .contact__wrapper .contact__mainicon{overflow:hidden;object-fit:contain;display:flex;justify-content:center;padding:10px;cursor:pointer}.contact___main .contact__wrapper .contact__mainicon .mailid{display:flex;justify-content:center;align-items:center;padding-left:10px}.contact___main .contact__wrapper .contact__mainicon .mailid .mailidspan{display:flex;font-size:30px;color:#fff}.contact___main .contact__wrapper .contact__mainicon .mailid .mailidspan.active{display:none}.contact___main .contact__wrapper .contact__mainicon a{color:#000}.contact___main .contact__wrapper .contact__mainicon a :hover{color:#fff;transition:.5s ease}.contact___main .contact__wrapper .contact__mainicon .phonenumber{display:flex;justify-content:center;align-items:center;padding-left:10px}.contact___main .contact__wrapper .contact__mainicon .phonenumber .spanPhoneNumber{display:flex;font-size:20px;color:#fff}.contact___main .contact__wrapper .contact__mainicon .phonenumber .spanPhoneNumber.active{display:none}.contact___main .contact__wrapper .contact__mainicon .phonenumber h3{font-size:30px}.contact___main .contact__wrapper .contact__mainicon .phone{display:flex;overflow:hidden;object-fit:contain;border-radius:50%;transition:.5s ease}.contact___main .contact__wrapper .contact__mainicon .phone.active{display:none;transition:1s ease}.contact___main .contact__wrapper .contact__mainicon .email{display:flex;overflow:hidden;border-radius:50%;transition:.5s ease}.contact___main .contact__wrapper .contact__mainicon .email.active{display:none;transition:1s ease}.contact___main .contact__wrapper .contact__mainicon .facebook{display:flex;overflow:hidden;border-radius:50%;transition:.5s ease}.contact___main .contact__wrapper .contact__mainicon .facebook.active{display:none;transition:1s ease}.contact___main .contact__wrapper .contact__mainicon .instagram{display:flex;overflow:hidden;border-radius:50%;transition:.5s ease}.contact___main .contact__wrapper .contact__mainicon .instagram.active{display:none;transition:1s ease}.contact___main .contact__wrapper .contact__mainicon .MuiSvgIcon-root{width:4em;height:4em;color:#f0c2fd}.email:hover,.facebook:hover,.instagram:hover,.phone:hover{box-shadow:0 1px 20px #000;background-color:#43229e;color:#fff;transition:.5s ease}@media only screen and (max-width:700px){.contact__wrapper,.contact__wrapper .contact__mainicon{padding:0}.contact__wrapper .contact__mainicon .mailid .mailidspan,.contact__wrapper .contact__mainicon .phonenumber .spanPhoneNumber{font-size:15px!important}.contact__wrapper .contact__mainicon .MuiSvgIcon-root{transition:.5s ease!important;color:#fff!important;width:2em!important;height:2em!important}}.intro{display:flex}.intro,.intro.active{transition:all 1s ease}.intro.active{background-color:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Ccircle fill='%23fff' cx='50' r='50'/%3E%3Cg fill='%23f8f8f8'%3E%3Ccircle cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f2f2f2' cx='50' cy='100' r='50'/%3E%3Cg fill='%23ebebeb'%3E%3Ccircle cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23e4e4e4' cx='50' cy='200' r='50'/%3E%3Cg fill='%23dedede'%3E%3Ccircle cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%23d7d7d7' cx='50' cy='300' r='50'/%3E%3Cg fill='%23d1d1d1'%3E%3Ccircle cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23cacaca' cx='50' cy='400' r='50'/%3E%3Cg fill='%23c4c4c4'%3E%3Ccircle cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23bdbdbd' cx='50' cy='500' r='50'/%3E%3Cg fill='%23b7b7b7'%3E%3Ccircle cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%23b1b1b1' cx='50' cy='600' r='50'/%3E%3Cg fill='%23ababab'%3E%3Ccircle cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23a4a4a4' cx='50' cy='700' r='50'/%3E%3Cg fill='%239e9e9e'%3E%3Ccircle cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23989898' cx='50' cy='800' r='50'/%3E%3Cg fill='%23929292'%3E%3Ccircle cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%238c8c8c' cx='50' cy='900' r='50'/%3E%3Cg fill='%23868686'%3E%3Ccircle cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='gray' cx='50' cy='1000' r='50'/%3E%3C/svg%3E");background-attachment:fixed;background-size:contain}.intro.active #spanwhitetext,.intro.active .right .wrapper{color:#000}.intro .left{flex:0.6 1;overflow:hidden}.intro .left,.intro .left .imageContainer{display:flex;justify-content:center;align-items:center}.intro .left .imageContainer{min-width:200px;max-width:60%;border-radius:50%;border:1px solid purple;box-shadow:0 1px 20px}.intro .left .imageContainer>:hover{-webkit-filter:grayscale(0);transition:all 1s ease}.intro .left .imageContainer img{width:100%;-webkit-filter:grayscale(1);object-fit:contain;transition:all 1s ease}.intro .right{flex:0.4 1;display:flex;align-items:center;justify-content:center;position:relative}.intro .right a{position:absolute;bottom:0}.intro .right a img{bottom:0;width:100%;-webkit-filter:invert(100%);filter:invert(100%);-webkit-animation:arrowBlink 2s infinite;animation:arrowBlink 2s infinite}@-webkit-keyframes arrowBlink{10%{opacity:.1}30%{opacity:.3}50%{opacity:.5}70%{opacity:.7}to{opacity:.9}}@keyframes arrowBlink{10%{opacity:.1}30%{opacity:.3}50%{opacity:.5}70%{opacity:.7}to{opacity:.9}}.intro .right .wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;object-fit:contain;margin-right:20px;color:#fff}.intro .right .wrapper .right__download{border-radius:10px;background-color:#751260;display:flex;align-items:center;justify-content:center;width:100%;height:30px;transition:.5s ease-in}.intro .right .wrapper .right__download:hover{transition:.5s ease-out;background-color:#73378b}.intro .right .wrapper .right__download a{padding:5px;text-decoration:none}.intro .right .wrapper h1{font-size:60px;margin:10px 0;font-weight:400}.intro .right .wrapper h2{font-size:35px;font-weight:100}.intro .right .wrapper h3{font-size:30px;object-fit:contain;margin-right:30px;font-weight:200}.intro .right .wrapper h3 span{object-fit:contain;color:#fff}.intro .right .wrapper h3 .ityped-cursor{font-size:2.2rem;opacity:1;-webkit-animation:blink .3s infinite;animation:blink .6s infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@keyframes blink{to{opacity:0}}@-webkit-keyframes blink{to{opacity:0}}@media only screen and (max-width:700px){.intro{display:flex;flex-direction:column;align-items:center;justify-content:center}.intro .right{flex:0.6 1;padding:0}.intro .right a{bottom:-10px}.intro .right .wrapper{width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:flex-start;margin-top:20px}.intro .right .wrapper span{width:500px;margin-left:50px;align-items:center;display:flex;flex:1 1;overflow:hidden;overflow:hidden!important;justify-content:center}.intro .right .wrapper span ::-webkit-scrollbar{display:none}.intro .right .wrapper h1,.intro .right .wrapper h2{font-size:30px}.intro .right .wrapper h3{font-size:20px}.intro .left{flex:0.4 1;display:flex;justify-content:center;flex-direction:column;overflow:hidden}.intro .left .imageContainer{max-width:30%}}.menu{width:300px;height:100vh;background-image:linear-gradient(to bottom right,#641458,#3e0936);position:fixed;top:0;right:-300px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all 1s ease}.menu.active{right:0}.menu.passive{background-image:linear-gradient(to bottom right,#fff,#c9c8cc)}.menu.passive ul li a{color:#000}.menu ul{margin:0;padding:0;list-style:none;font-size:25px;width:60%}.menu ul li{margin-bottom:20px}.menu ul li a{text-decoration:none;color:#fff;font-weight:400!important}.menu ul li:hover a{color:#c0f!important}.portfolio{display:flex;flex-direction:column;align-items:center;transition:all 1s ease}.portfolio.active{transition:all 1s ease;background-color:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Ccircle fill='%23fff' cx='50' r='50'/%3E%3Cg fill='%23f8f8f8'%3E%3Ccircle cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f2f2f2' cx='50' cy='100' r='50'/%3E%3Cg fill='%23ebebeb'%3E%3Ccircle cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23e4e4e4' cx='50' cy='200' r='50'/%3E%3Cg fill='%23dedede'%3E%3Ccircle cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%23d7d7d7' cx='50' cy='300' r='50'/%3E%3Cg fill='%23d1d1d1'%3E%3Ccircle cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23cacaca' cx='50' cy='400' r='50'/%3E%3Cg fill='%23c4c4c4'%3E%3Ccircle cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23bdbdbd' cx='50' cy='500' r='50'/%3E%3Cg fill='%23b7b7b7'%3E%3Ccircle cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%23b1b1b1' cx='50' cy='600' r='50'/%3E%3Cg fill='%23ababab'%3E%3Ccircle cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23a4a4a4' cx='50' cy='700' r='50'/%3E%3Cg fill='%239e9e9e'%3E%3Ccircle cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23989898' cx='50' cy='800' r='50'/%3E%3Cg fill='%23929292'%3E%3Ccircle cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%238c8c8c' cx='50' cy='900' r='50'/%3E%3Cg fill='%23868686'%3E%3Ccircle cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='gray' cx='50' cy='1000' r='50'/%3E%3C/svg%3E");background-attachment:fixed;background-size:contain}.portfolio.active h1{margin-top:50px;color:#000}.portfolio.active ul li{color:#000}.portfolio.active ul li:hover{background-color:#000;color:#fff}.portfolio.active ul li.active{background-color:#fff!important;box-shadow:0 1px 10px #000}.portfolio.active ul li.active:hover{color:#000}.portfolio.active .container .item{transition:all 1s ease}.portfolio.active .container .item:hover{background-color:#cacaca}.portfolio.active .container .item:hover h3{color:#000}.portfolio h1{height:16%;margin-top:50px;font-weight:300;font-size:50px;color:#fff}.portfolio ul{margin:10px;list-style:none;display:flex;height:9%;width:100%;align-items:center;justify-content:center}.portfolio ul li{color:#fff;font-size:14px;margin-right:50px;padding:7px;border-radius:10px;cursor:pointer}.portfolio ul li:hover{background-color:#c465f0;color:#000}.portfolio ul li.active{background-color:#662a79;box-shadow:0 1px 10px #fd9cf0}.portfolio ul li.active:hover{color:#fff}.portfolio .container{height:100%;width:100%;flex-wrap:wrap}.portfolio .container,.portfolio .container .item{display:flex;align-items:center;justify-content:center}.portfolio .container .item{transition:all 1s ease;box-shadow:0 1px 20px #030303;width:320px;height:300px;border-radius:20px;flex-direction:column;margin:10px 20px;position:relative;cursor:pointer}.portfolio .container .item img{object-fit:cover;width:100%;height:100%;z-index:1}.portfolio .container .item h3{transition:all .5s ease;margin:0;position:absolute}.portfolio .container .item:hover{background-color:#420836}.portfolio .container .item:hover img{opacity:.2;z-index:0}.portfolio .container .item:hover h3{color:#fff}.container::-webkit-scrollbar{display:none}@media only screen and (max-width:700px){.portfolio .container .item img{-webkit-filter:brightness(.4);filter:brightness(.4)}.portfolio .container .item h3{z-index:2;color:#fff;font-size:30px;letter-spacing:2px;font-weight:300}.portfolio ul{margin:2px}.portfolio ul li{margin-right:30px}}.mainskills{width:100%;height:100%;transition:all 1s ease}.mainskills.active{transition:all 1s ease;background-color:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Ccircle fill='%23fff' cx='50' r='50'/%3E%3Cg fill='%23f8f8f8'%3E%3Ccircle cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f2f2f2' cx='50' cy='100' r='50'/%3E%3Cg fill='%23ebebeb'%3E%3Ccircle cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23e4e4e4' cx='50' cy='200' r='50'/%3E%3Cg fill='%23dedede'%3E%3Ccircle cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%23d7d7d7' cx='50' cy='300' r='50'/%3E%3Cg fill='%23d1d1d1'%3E%3Ccircle cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23cacaca' cx='50' cy='400' r='50'/%3E%3Cg fill='%23c4c4c4'%3E%3Ccircle cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23bdbdbd' cx='50' cy='500' r='50'/%3E%3Cg fill='%23b7b7b7'%3E%3Ccircle cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%23b1b1b1' cx='50' cy='600' r='50'/%3E%3Cg fill='%23ababab'%3E%3Ccircle cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23a4a4a4' cx='50' cy='700' r='50'/%3E%3Cg fill='%239e9e9e'%3E%3Ccircle cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23989898' cx='50' cy='800' r='50'/%3E%3Cg fill='%23929292'%3E%3Ccircle cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%238c8c8c' cx='50' cy='900' r='50'/%3E%3Cg fill='%23868686'%3E%3Ccircle cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='gray' cx='50' cy='1000' r='50'/%3E%3C/svg%3E");background-attachment:fixed;background-size:contain}.mainskills.active .skills{color:#000}.mainskills.active .skills.fixed{background-color:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Ccircle fill='%23fff' cx='50' r='50'/%3E%3Cg fill='%23f8f8f8'%3E%3Ccircle cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f2f2f2' cx='50' cy='100' r='50'/%3E%3Cg fill='%23ebebeb'%3E%3Ccircle cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23e4e4e4' cx='50' cy='200' r='50'/%3E%3Cg fill='%23dedede'%3E%3Ccircle cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%23d7d7d7' cx='50' cy='300' r='50'/%3E%3Cg fill='%23d1d1d1'%3E%3Ccircle cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23cacaca' cx='50' cy='400' r='50'/%3E%3Cg fill='%23c4c4c4'%3E%3Ccircle cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23bdbdbd' cx='50' cy='500' r='50'/%3E%3Cg fill='%23b7b7b7'%3E%3Ccircle cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%23b1b1b1' cx='50' cy='600' r='50'/%3E%3Cg fill='%23ababab'%3E%3Ccircle cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23a4a4a4' cx='50' cy='700' r='50'/%3E%3Cg fill='%239e9e9e'%3E%3Ccircle cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23989898' cx='50' cy='800' r='50'/%3E%3Cg fill='%23929292'%3E%3Ccircle cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%238c8c8c' cx='50' cy='900' r='50'/%3E%3Cg fill='%23868686'%3E%3Ccircle cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='gray' cx='50' cy='1000' r='50'/%3E%3C/svg%3E");background-attachment:fixed;background-size:contain}.mainskills.active .skills li h3{font-weight:400}.mainskills.active .skills li .bar{border:1px solid rgba(0,0,0,.438);box-shadow:0 0 10px #747070}.mainskills.active .skills li .bar span{background-color:#505050}.mainskills .skills{width:70%;color:#fff;margin-left:auto;margin-right:auto}.mainskills .skills.fixed{position:fixed;width:100%;height:10%;margin-bottom:50px;background-color:#420836;overflow:hidden}.mainskills .skills.fixed h1{font-weight:500}.mainskills .skills h1{text-align:center}.mainskills .skills li{padding-top:0;display:flex;flex-direction:column;margin:20px 0;list-style:none}.mainskills .skills li h3{font-weight:300}.mainskills .skills li .bar{background-color:#f5f5f5;display:block;height:3px;border:1px solid hsla(0,0%,99.2%,.438);border-radius:3px;overflow:hidden;box-shadow:0 0 10px #8c04fc}.mainskills .skills li .bar span{height:3px;float:left;background-color:#f700ff}.mainskills .htmls{width:90%;-webkit-animation:html 7s;animation:html 7s}.mainskills .css{width:90%;-webkit-animation:css 8s;animation:css 8s}.mainskills .javascript{width:70%;-webkit-animation:javascript 4s;animation:javascript 4s}.mainskills .react{width:80%;-webkit-animation:react 5s;animation:react 5s}.mainskills .python{width:50%;-webkit-animation:python 2s;animation:python 2s}.mainskills .django{width:50%;-webkit-animation:django 3s;animation:django 3s}.mainskills .Bm{width:70%;-webkit-animation:bu 9s;animation:bu 9s}.mainskills .fire{width:60%;-webkit-animation:fire 6s;animation:fire 6s}@-webkit-keyframes python{0%{width:0}to{width:60%}}@keyframes python{0%{width:0}to{width:60%}}@-webkit-keyframes django{0%{width:0}to{width:70%}}@keyframes django{0%{width:0}to{width:70%}}@-webkit-keyframes javascript{0%{width:0}to{width:70%}}@keyframes javascript{0%{width:0}to{width:70%}}@-webkit-keyframes react{0%{width:0}to{width:60%}}@keyframes react{0%{width:0}to{width:60%}}@-webkit-keyframes html{0%{width:0}to{width:90%}}@keyframes html{0%{width:0}to{width:90%}}@-webkit-keyframes css{0%{width:0}to{width:80%}}@keyframes css{0%{width:0}to{width:80%}}@-webkit-keyframes bu{0%{width:0}to{width:70%}}@keyframes bu{0%{width:0}to{width:70%}}@-webkit-keyframes fire{0%{width:0}to{width:50%}}@keyframes fire{0%{width:0}to{width:50%}}.down{padding-top:50px}.topbar__navbar{width:100%;height:70px;color:#fff;position:fixed;background-color:#420836;top:0;z-index:3;transition:all 1s ease}.topbar__navbar a{color:#fff}.topbar__navbar .wrapper{padding:10px 20px;text-align:center;justify-content:space-between}.topbar__navbar .wrapper,.topbar__navbar .wrapper .left{display:flex;align-items:center}.topbar__navbar .wrapper .left .logo{font-size:38px;text-decoration:none;font-weight:200;margin-right:20px}.topbar__navbar .wrapper .right{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.topbar__navbar .wrapper .right .nightscape{display:flex;align-items:center;justify-content:center;padding-right:20px;padding-left:20px;cursor:pointer}.topbar__navbar .wrapper .right .nightscape .nightbutton{color:#ff0}.topbar__navbar .wrapper .right .nightscape .nightbutton.active{color:#000}.topbar__navbar .wrapper .right .threelineicon{width:32px;height:25px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}.topbar__navbar .wrapper .right .threelineicon span{width:100%;height:3px;background-color:#f8f4f4;-webkit-transform-origin:left;transform-origin:left;transition:all 2s ease}.topbar__navbar.active .wrapper .left .logo{color:#fff}.topbar__navbar.active .threelineicon span:first-child{background-color:#fff8f8;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.topbar__navbar.active .threelineicon span:nth-child(2){opacity:0}.topbar__navbar.active .threelineicon span:last-child{background-color:#fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.topbar__navbar.nighttop{background-color:#ebebeb;color:#000}.topbar__navbar.nighttop .right .right__download{background-color:#c9c5c5}.topbar__navbar.nighttop .right .right__download:hover{color:#fff;transition:.5s ease-out;background-color:#1b1b1b}.topbar__navbar.nighttop .right .right__download:hover .intro__download__resume{transition:.5s ease;color:#fff}.topbar__navbar.nighttop a{color:#353434}.topbar__navbar.nighttop .threelineicon span:first-child,.topbar__navbar.nighttop .threelineicon span:last-child,.topbar__navbar.nighttop .threelineicon span:nth-child(2){background-color:#180669}.intro__download__resume{padding-right:14px;display:flex;align-items:center;justify-content:center;text-decoration:none}@media only screen and (max-width:700px){.intro__download__resume{display:none}.topbar__navbar .wrapper .left .logo{font-size:24px}}
/*# sourceMappingURL=main.17764f1b.chunk.css.map */