*,*:before,*:after{box-sizing:border-box;padding:0;margin:0}html{scroll-behavior:smooth;--button-color: #6a3de8;--purple-color: #9e7ef7;--purple-light-color: #8e67f7;--purple-very-light-color: #d1c5f5;--purple-dark-color: #4c2dd3;--white-color: #fff;--button-hover-color: #5935bd;--button-active-color: #432a8a;--button-text-color: #fff;--button-text-hover-color: #fff;--button-text-active-color: #fff;--transparent-purple-color: #4a20bdf6;--card-color: #0e071f;--contact-form: #261450}body{background-color:#010213;color:#fff;transition:background .3s,color .3s;font-family:Outfit,sans-serif}a{text-decoration:none}.header{width:70%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;margin:3rem auto;border-radius:2rem;padding:1rem 2rem;background-color:var(--card-color);box-shadow:0 2px 30px var(--transparent-purple-color)}.nav{width:100%;margin:0 auto;display:flex;justify-content:space-between}.logo{font-size:1rem;font-weight:700;color:var(--white-color);text-decoration:none}.logo p:last-child{font-size:.65rem;font-weight:700;color:var(--purple-color)}.nav-links{display:flex;justify-content:space-between;align-items:center}.nav-list{display:flex;justify-content:space-between;align-items:center;width:100%;list-style-type:none}.nav-list-desk{gap:2.5rem}.nav-link{display:block;color:var(--purple-color);transition:color .2s ease-in-out,background-color .2s ease-in-out;text-decoration:none;font-weight:700}.nav-link-contact{width:130px;height:50px;color:var(--button-text-color);padding:10px 15px;font-weight:700;cursor:pointer;transition:all .3s ease;border-radius:10px;background-color:var(--button-color)}.nav-link-contact:hover{background-color:var(--button-hover-color);color:var(--button-text-hover-color)}.nav-link:hover{color:var(--purple-dark-color);border-bottom:2px solid var(--purple-dark-color)}.nav-link.active{color:var(--white-color)}.menu-button-hide{display:none;width:35px;height:35px;border:none;background-color:#fff0;color:#e6dada;font-size:25px}.nav-sidebar{width:100%;margin-top:1rem;display:none}.nav-list-mobile{display:flex;flex-direction:column;align-items:center;padding:1.5rem;width:100%;list-style-type:none;border-radius:2rem}.nav-list-mobile li{margin-bottom:1.5rem}@media (max-width: 900px){.header{width:90%}}@media (max-width: 650px){.header{padding:0rem;box-shadow:0 2px 30px var(--transparent-purple-color)}.nav{width:95%;padding:.6rem}.nav-mobile{width:100%}.nav-sidebar{display:block;width:100%;margin-top:0rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s}.nav-sidebar.open{max-height:500px;opacity:1}.nav-mobile-hide{display:none}.menu-button-hide{display:block}.icon-animate{display:inline-block;transition:transform .3s cubic-bezier(.4,0,.2,1)}.icon-animate.open{transform:rotate(180deg) scale(1.2)}}footer{width:100%;display:flex;flex-direction:column;box-shadow:0 2px 30px var(--transparent-purple-color)}.footer-one{width:80%;margin:20px auto;padding:1rem 0;display:flex;justify-content:space-between;gap:2rem}.footer-me{line-height:1.5}.footer-me p:nth-child(2){color:var(--purple-color)}.footer-me p:nth-child(3){font-size:1.1rem;margin-bottom:1rem}.footer-me button{min-width:130px;height:40px;color:var(--button-text-color);font-weight:700;cursor:pointer;transition:all .3s ease;position:relative;display:inline-block;outline:none;overflow:hidden;border-radius:5px;border:none;background-color:var(--button-color)}.footer-me button:hover{border-radius:5px;padding-right:24px;padding-left:8px}.footer-me button:hover:after{opacity:1;right:10px}.footer-me button:after{content:"»";position:absolute;opacity:0;font-size:20px;line-height:40px;top:0;right:-20px;transition:.4s}.footer-me button a{width:100%;color:var(--button-text-color)}.footer-ql{line-height:1.5}.footer-ql ul{list-style-type:none;margin-top:1rem;font-size:1.2rem;display:flex;flex-direction:column;gap:1rem}.footer-ql ul a{color:var(--purple-color)}.footer-ql ul a:hover{color:var(--purple-dark-color);border-bottom:1px solid var(--purple-dark-color)}.footer-lc{line-height:1.5}.footer-lc p{margin-top:1rem;display:flex;gap:1rem}.footer-lc a{color:var(--purple-color)}.footer-lc a:hover{color:var(--purple-dark-color);border-bottom:1px solid var(--purple-dark-color)}@media (max-width: 1100px){.footer-one{width:90%}}@media (max-width: 600px){.footer-one{width:95%;margin:10px auto;flex-direction:column}.footer-me{line-height:1.3}.footer-me h2{font-size:1.2rem;margin-bottom:2px}.footer-me p:nth-child(2){margin-bottom:1rem}.footer-me p:nth-child(3){font-size:1.2rem}.footer-ql{line-height:1.5}.footer-ql ul{margin-top:.5rem;font-size:1rem;gap:.3rem}.footer-lc{line-height:1}.footer-lc p{margin-top:1rem;display:flex;gap:1rem}.footer-lc a{font-size:.8rem}}.footer-two{border-top:1px solid #fff;width:100%;text-align:center;margin:5px auto}.footer-two p{width:90%;margin:10px}.home-container{width:100%;margin-bottom:5rem}.home{width:90%;height:100vh;display:flex;align-items:center;justify-content:space-between;margin:0 auto;gap:1rem}.home-left{display:flex;flex-direction:column;width:50%}.home-left p:nth-child(2){font-size:1rem;font-family:Verdana,Geneva,Tahoma,sans-serif;color:var(--purple-color);margin-bottom:2rem}.home-left p:nth-child(3){font-size:1.2rem;font-family:Verdana,Geneva,Tahoma,sans-serif;color:#fff;margin-bottom:1rem;line-height:1.7;letter-spacing:1px;text-align:justify}.my-name span{display:block;font-size:3rem;font-family:Roboto,sans-serif}.home-left button{width:130px;height:40px;color:var(--button-text-color);padding:5px 10px;font-weight:700;cursor:pointer;transition:all .3s ease;position:relative;display:inline-block;outline:none;border-radius:5px;border:none;background-color:var(--button-color)}.home-left button:hover{background-color:var(--button-hover-color);color:var(--button-text-hover-color)}.home-left button:active{top:2px}.home-left button a{width:100%;color:var(--button-text-color)}.home-right{width:50%;position:relative;height:100%}.star{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-10}.stage-cube-cont{width:100%;height:100%;top:20%;padding-top:22%;margin-left:0;position:absolute;right:0;overflow:hidden;z-index:-20}.cubespinner{animation-name:spincube;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:20s;transform-style:preserve-3d;transform-origin:100px 100px 0;margin-left:calc(50% - 100px)}.cubespinner div{position:absolute;width:200px;height:200px;border:1px solid var(--purple-light-color);background:var(--transparent-purple-color);text-align:center;font-size:100px;display:flex;justify-content:center;align-items:center;box-shadow:0 0 20px 0 var(--transparent-purple-color)}.cubespinner .face1{transform:translateZ(100px);color:#ccf8d7}.cubespinner .face2{transform:rotateY(90deg) translateZ(100px);color:#f06529}.cubespinner .face3{transform:rotateY(90deg) rotateX(90deg) translateZ(100px);color:#05b4ff}.cubespinner .face4{transform:rotateY(180deg) rotate(90deg) translateZ(100px);color:#5ed4f4}.cubespinner .face5{transform:rotateY(-90deg) rotate(90deg) translateZ(100px);color:#efd81d}.cubespinner .face6{transform:rotateX(-90deg) translateZ(100px);color:#ec4d28}@keyframes spincube{0%,to{transform:rotateX(0) rotateY(0) rotate(0)}16%{transform:rotateY(-90deg) rotate(90deg)}33%{transform:rotateY(-90deg) rotateX(90deg)}50%{transform:rotateY(-180deg) rotate(90deg)}66%{transform:rotateY(-270deg) rotateX(90deg)}83%{transform:rotateX(90deg)}}@media (max-width: 1000px){.home{width:90%}}@media (max-width: 900px){.home{width:80%;height:auto;flex-direction:column;gap:1rem;margin-top:3rem}.home-left,.home-right{width:100%}.star{width:100%;height:100%}.stage-cube-cont{position:relative;width:100%;height:445px}}@media (max-width: 700px){.home{width:90%}}@media (max-width: 450px){.home{width:90%}.stage-cube-cont{height:250px}.home-left p:nth-child(2){font-size:.9rem;margin-bottom:1rem}.home-left p:nth-child(3){font-size:1.2rem;line-height:1.5;letter-spacing:0px;text-align:start}.my-name span{display:block;font-size:1.5rem;font-family:Roboto,sans-serif}.cubespinner{transform-origin:60px 60px 0;margin-left:calc(50% - 60px)}.cubespinner div{width:120px;height:120px;font-size:50px}.cubespinner .face1{transform:translateZ(60px)}.cubespinner .face2{transform:rotateY(90deg) translateZ(60px)}.cubespinner .face3{transform:rotateY(90deg) rotateX(90deg) translateZ(60px)}.cubespinner .face4{transform:rotateY(180deg) rotate(90deg) translateZ(60px)}.cubespinner .face5{transform:rotateY(-90deg) rotate(90deg) translateZ(60px)}.cubespinner .face6{transform:rotateX(-90deg) translateZ(60px)}}.about-container{width:80%;margin:8rem auto;text-align:center}.about{margin-top:2rem;background-color:var(--card-color);padding:2rem;border-radius:1rem;box-shadow:0 2px 20px var(--transparent-purple-color)}.about-container h2{font-size:2rem;font-family:Verdana,Geneva,Tahoma,sans-serif;color:var(--purple-color)}.about-image p{margin-top:1rem;font-size:1.4rem;letter-spacing:1px;line-height:1.5;font-family:Verdana,Geneva,Tahoma,sans-serif;text-align:justify}.about-image img{width:200px;height:200px;border-radius:100px;float:left;margin-right:20px}@media (max-width: 480px){.about-container{width:95%;margin:3rem auto;display:flex;flex-direction:column;gap:1rem;text-align:center;justify-content:center}.about-container h2{font-size:1.2rem}.about{margin-top:1rem;padding:1rem;box-shadow:0 2px 3px var(--transparent-purple-color)}.about-image{display:flex;flex-direction:column;align-items:center;gap:1rem}.about-image p{margin-top:1.4rem;font-size:1.2rem;text-align:left}.about-image img{float:none;margin-right:0;width:300px;height:250px;border-radius:10px;object-fit:cover;object-position:center}}.latest-projects{width:80%;margin:8rem auto;text-align:center}.latest-projects h2{font-size:2rem;font-family:Verdana,Geneva,Tahoma,sans-serif;color:var(--purple-color);margin-bottom:3rem}.latest-projects-grid{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}.view-all-btn{display:inline-block;margin-top:2.5rem;padding:10px 25px;font-weight:700;border-radius:5px;background-color:var(--button-color);color:var(--button-text-color);text-decoration:none;transition:all .3s ease}.view-all-btn:hover{background-color:var(--button-hover-color);color:var(--button-text-hover-color)}@media (max-width: 480px){.latest-projects{width:95%;margin:3rem auto}.latest-projects h2{font-size:1.4rem;margin-bottom:1.5rem}}.skills-container{width:80%;margin:8rem auto;text-align:center}.skills-container h2{font-size:2rem;font-family:Verdana,Geneva,Tahoma,sans-serif;color:var(--purple-color)}.skills{margin-top:5rem}.skills p{width:80%;display:grid;grid-template-columns:repeat(6,1fr);line-height:1.5;gap:2rem;margin:0 auto;row-gap:2rem}.skills span{display:flex;flex-direction:column;align-items:center;gap:.5rem}.skills span img{width:50px;height:50px}@media (max-width: 1024px){.skills p{grid-template-columns:repeat(4,1fr)}}@media (max-width: 480px){.skills p{grid-template-columns:repeat(3,1fr);width:100%;gap:0rem;row-gap:1rem}.skills-container{width:95%;margin:0 auto;text-align:center}.skills-container h2{font-size:1.4rem}.skills{margin-top:2rem}.skills span{display:flex;gap:.5rem}.skills span img{width:50px;height:50px}}.experience{width:80%;margin:2rem auto;text-align:center;display:flex;flex-direction:column;gap:2rem}.experience h2{font-size:2rem;font-family:Verdana,Geneva,Tahoma,sans-serif;color:var(--purple-color)}.exp-cert{display:flex;flex-direction:column;gap:1rem;font-size:1.5rem}@media (max-width: 480px){.experience{width:95%;margin:3rem auto;text-align:center}.experience h2,.exp-cert{font-size:1.2rem}}.icon-container img{padding:.1rem;border-radius:50%;background-color:#fff}.card-container{width:400px}.card{display:flex;flex-direction:column;background-color:var(--card-color);border-radius:10px;margin:10px;height:auto;box-shadow:0 4px 8px 0 var(--button-active-color);transition:.3s}.card:hover{box-shadow:0 8px 16px 0 var(--button-active-color);scale:.99;transition:.3s}.card-image{width:100%;height:100%;border-radius:10px 10px 0 0;object-fit:contain}.info{padding:10px;display:flex;flex-direction:column;gap:10px;height:100%}.info h2{color:var(--purple-color);font-size:1.5rem;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.info p{color:var(--white-color);font-size:1rem;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.stack-info{height:50px}.info a{color:var(--white-color);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;text-decoration:none;min-width:100px;width:130px;height:35px;padding:5px 10px;font-weight:700;cursor:pointer;transition:all .3s ease;position:relative;display:inline-block;outline:none;overflow:hidden;border-radius:5px;border:none;background-color:var(--button-color);text-align:center}.info a:hover{border-radius:5px;padding-right:24px;padding-left:8px}.info a:hover:after{opacity:1;right:10px}.info a:after{content:"»";position:absolute;opacity:0;font-size:20px;top:0;right:-20px;transition:.4s}.stack{color:var(--purple-color);font-weight:700;text-transform:uppercase}.card-ink{margin:2rem 0}@media screen and (max-width: 400px){.card-image{height:auto}.info{padding:5px}.info h2,.info p{font-size:1.2rem}.stack-info{height:auto}.info a{width:100px;height:30px;font-size:1rem}}.work-container{width:100%;display:flex;margin-bottom:3rem}.all-work{width:100%;margin:1rem auto}.work-container h1{text-transform:uppercase;margin-bottom:2rem;text-align:center;font-size:2rem}.work{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;row-gap:2rem;column-gap:1rem;justify-content:center;align-items:center}@media (max-width: 600px){.work-container h1{font-size:1.5rem;margin-bottom:1rem}}.contact{width:50%;margin:3rem auto}.contact-title{text-align:center;margin-bottom:2rem;text-transform:uppercase}.contact__container{display:flex;flex-direction:column;gap:1rem;font-size:1.2rem;line-height:1.5;letter-spacing:1px}.contact__container a{color:var(--white-color);text-decoration:underline;font-weight:700}.contact__form{font-weight:700;width:100%;display:flex;flex-direction:column;gap:1rem;font-size:1.2rem;letter-spacing:1px;margin-top:2rem}.contact_submit{background-color:var(--purple-very-light-color);color:var(--contact-form);width:100px;border-radius:5px;margin:0 auto;padding:.6rem;border:none;font-size:inherit;cursor:pointer;transition:all .3s ease-in-out}.contact_submit:hover{background-color:var(--contact-form);color:var(--purple-very-light-color);transform:scale(1.05)}.contact__form__container{display:flex;flex-direction:column;gap:.5rem;width:100%;font-size:1.2rem;letter-spacing:1px}.contact__form__container input,.contact__form__container textarea{width:100%;padding:1rem;border:none;border-radius:5px;background-color:var(--contact-form);color:#fff;font-size:inherit;outline:none;resize:vertical}.contact__form__container input:focus,.contact__form__container textarea:focus{border-bottom:2px solid var(--purple-color);transition:border-bottom .9s ease-in-out}@media (max-width: 1000px){.contact{width:70%;margin:3rem auto}}@media (max-width: 768px){.contact{width:80%;margin:3rem auto}}@media (max-width: 480px){.contact{width:95%;margin:1.5rem auto}.contact-title{margin-bottom:1.2rem}.contact__container{gap:.6rem;font-size:1.2rem}.contact__form{font-weight:700;width:100%;display:flex;flex-direction:column;gap:.6rem;font-size:1.2rem;letter-spacing:1px;margin-top:2rem}.contact_submit{width:100px;border-radius:5px;padding:.6rem}.contact__form__container{gap:.4rem;font-size:1.2rem}.contact__form__container input,.contact__form__container textarea{width:100%;padding:.5rem}}.blog-container{margin:2rem auto;width:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.blog-content{width:650px;margin:2rem auto}.blog-contents{width:50%}.blog-contents-container{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:50px auto;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.per-blog{border:1px solid var(--transparent-purple-color);border-radius:10px;padding:10px;display:flex;gap:1rem;width:100%}.blog-image-container{width:50%;display:flex;justify-content:center}.blog-text-container{width:50%}.blog-image{width:100%;height:auto}.blog-text-container-title{font-size:1.2rem;margin-bottom:10px;letter-spacing:1px}.blog-navlink{text-decoration:none;color:var(--transparent-purple-color);font-size:1rem;display:inline-block;margin:20px 0 0;padding:5px 10px;border-radius:5px;background-color:var(--white-color);transition:all .3s ease-in-out}.blog-navlink:hover{background-color:var(--button-color);color:#fff;transform:scale(1.05)}.blog-contents-title,.blog{font-size:2.5rem;font-weight:700;margin-bottom:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;text-align:center}.blog-title-image{width:100%;height:auto}.blog-text-contents-date,.blog-contents-date{font-size:1rem;font-weight:700;margin-bottom:20px;text-align:left;color:var(--purple-color)}.blog-contents-sub-title{font-size:1.8rem;font-weight:700;margin-bottom:20px;text-transform:uppercase}.blog-contents-introduction{font-size:1.2rem;margin-bottom:20px;letter-spacing:1px}.blog-contents-section{display:flex;flex-direction:column;gap:10px;margin-bottom:2rem}.blog-contents-list{font-size:1.2rem;display:flex;flex-direction:column;gap:10px;margin-bottom:2rem;list-style-position:inside;padding:0;margin:0}.blog-contents-section p:nth-child(1),.blog-contents-section-p-sub{font-size:1.2rem;font-weight:700;text-transform:uppercase;letter-spacing:1px}.blog-contents-section-p-sub{margin:1rem 0rem}.blog-contents-section p:nth-child(2),.conclusion{font-size:1.2rem;letter-spacing:1px;line-height:1.3}pre{font-family:Courier New,Courier,monospace;background-color:#e09999;padding:5px;border-radius:5px;display:block;white-space:pre-wrap;line-height:1.5}code{font-family:Courier New,Courier,monospace;background-color:#000;padding:10px;border-radius:5px;display:block;white-space:pre-wrap;line-height:1.5;overflow-x:auto}.keyword{color:#fa0019;font-weight:700}.variable{color:#d0b7ff}.bracket{color:#fbff00}.property{color:#0ef}.string{color:#ff00ea}.number{color:#f7a800}.boolean{color:#fbff06;font-weight:700}.console{color:#00ff9d;font-weight:700}.method{color:#5bf334}.template{color:#03ff3e}.comment{color:#b5b8bb;font-style:italic}.tag{color:#fffb00;font-weight:700}.attr{color:#00ffea;font-weight:700}.selector{color:#ff00ea;font-weight:700}@media (max-width: 1024px){.blog-contents{width:70%}.blog-contents-title,.blog{font-size:2rem}.blog-contents-date{font-size:1rem}.blog-contents-sub-title{font-size:1.5rem}.blog-contents-introduction{font-size:1rem}.blog-contents-section p:nth-child(1),.blog-contents-section-p-sub{font-size:1rem}.blog-contents-section p:nth-child(2),.conclusion{font-size:.9rem}}@media (max-width: 834px){.blog-contents{width:80%}.blog-contents-title,.blog{font-size:1.8rem}.blog-contents-date{font-size:1rem}.blog-contents-sub-title{font-size:1.3rem}.blog-contents-introduction{font-size:1rem}.blog-contents-section p:nth-child(1),.blog-contents-section-p-sub{font-size:1rem}.blog-contents-section p:nth-child(2),.conclusion{font-size:.9rem}}@media (max-width: 768px){.blog-content{width:70%;margin:1rem auto}.per-blog{padding:5px;display:flex;flex-direction:column;gap:.6rem;width:100%}.blog-image-container{width:100%;display:flex;justify-content:center}.blog-image{width:100%;object-fit:cover}.blog-text-container{width:100%}.blog-text-contents-date{font-size:.9rem;margin-bottom:10px}.blog-text-container-title{font-size:1rem;margin-bottom:2px}.blog-navlink{font-size:1rem;margin:10px 0 0;padding:5px 10px;border-radius:5px}.blog-contents{width:90%}.blog-contents-title,.blog{font-size:1.5rem}.blog-contents-date{font-size:1rem}.blog-contents-sub-title{font-size:1.2rem}.blog-contents-introduction{font-size:1rem}.blog-contents-section p:nth-child(1),.blog-contents-section-p-sub{font-size:1rem}.blog-contents-section p:nth-child(2),.conclusion{font-size:.9rem}}@media (max-width: 480px){.blog-contents{width:95%}.blog-text-contents-date{font-size:1rem}.blog-text-container-title{font-size:1.2rem}.blog-contents-title{font-size:1.2rem;text-align:left}.blog-contents-list{gap:5px;font-size:1.2rem;margin-bottom:1rem}.blog-content{width:90%;margin:1rem auto}.blog-contents-date{font-size:1rem}.blog-contents-sub-title,.blog-contents-introduction{font-size:1.2rem}.blog-contents-section p:nth-child(1),.blog-contents-section-p-sub{font-size:1.2rem}.blog-contents-section p:nth-child(2),.conclusion{font-size:1.2rem}pre{background-color:#e09999;padding:2px;border-radius:2px;line-height:1;font-size:1rem}}