*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}body{font-family:"Noto Sans",sans-serif;line-height:1.6;color:#f9f9f9;background-color:#202020}body h1,body h2{font-family:"Archivo Black",sans-serif;text-align:center}body ul{list-style:none}body a{text-decoration:none;color:#f9f9f9}body .subtitle{margin-bottom:50px;font-size:2.5rem}.content{width:100%}.content .wrapper{width:90%;margin:0 auto;padding:4rem 0}@media screen and (max-width:450px){body .subtitle{font-size:2rem;line-height:1}}.top{width:100%;display:flex;flex-flow:column nowrap}.top .nav-bar{width:100%;height:80px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;z-index:99;transition:all .3s ease}.top .nav-bar .logo{display:flex}.top .nav-bar .menu{position:fixed;top:0;left:0;width:100%;height:100vh;background-color:rgba(32,32,32,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;clip-path:circle(0 at 50% 50%);transition:all .7s ease}.top .nav-bar .menu .menu-link{padding:15px;text-align:center;opacity:0;transform:translateY(30px);transition:all .4s cubic-bezier(.25,.1,.41,1.76)}.top .nav-bar .menu .menu-link .link{display:block;color:#f9f9f9;padding:5px 20px;border:2px solid rgba(249,249,249,0);border-radius:20px;font-size:1.5rem;transition:all .2s}.top .nav-bar .menu .menu-link .link:hover{border:2px solid #f9f9f9}.top .nav-bar .menu .menu-link:nth-child(5) .link{background-color:rgba(34,178,240,.8)}.top .nav-bar .menu .menu-link:nth-child(1){transition-delay:.1s}.top .nav-bar .menu .menu-link:nth-child(2){transition-delay:.2s}.top .nav-bar .menu .menu-link:nth-child(3){transition-delay:.3s}.top .nav-bar .menu .menu-link:nth-child(4){transition-delay:.4s}.top .nav-bar .menu .menu-link:nth-child(5){transition-delay:.5s}.top .nav-bar .menu.active{clip-path:circle(1000px at 50% 50%)}.top .nav-bar .menu.active .menu-link{opacity:1;transform:translateY(0)}.top .menu-active{position:fixed;top:0;left:0;background-color:rgba(32,32,32,.95);height:90px}.top .menu-icon{position:absolute;top:20px;right:20px;cursor:pointer;z-index:9;transition:all .5s ease}.top .menu-icon .line{width:35px;height:4px;background-color:#f3f3f3;margin:8px 0;transition:all .5s ease}.top .menu-icon.rotate{transform:rotate(180deg)}.top .menu-icon.rotate .line:nth-child(1){transform:rotate(45deg) translate(5px,10px)}.top .menu-icon.rotate .line:nth-child(2){opacity:0}.top .menu-icon.rotate .line:nth-child(3){transform:rotate(-45deg) translate(7px,-12px)}.top .sun-moon-btn{display:none;position:absolute;width:50px;height:50px;top:20px;right:70px;background-color:transparent;border:none;border-radius:50%;cursor:pointer;outline:0;z-index:9;overflow:hidden}.top .sun-moon-btn .sun-moon{display:flex;align-items:center;transition:.5s}.top .sun-moon-btn .sun-moon i{font-size:22px;margin:0 14px}.top .side-nav{width:45px;padding:10px 0;display:none;flex-direction:column;align-items:center;justify-content:center;position:fixed;top:50vh;border-radius:0 10px 10px 0;background-color:rgba(32,32,32,.1);z-index:99;transition:all .2s}.top .side-nav:hover{width:55px;background-color:rgba(32,32,32,.3);box-shadow:0 0 10px 1px rgba(249,249,249,.3)}.top .side-nav .side-social{text-align:center}.top .side-nav .side-social .social-link{padding:7px 0}.top .side-nav .side-social .social-link i{font-size:1.2rem;opacity:.5;transition:all .1s}.top .side-nav .side-social .social-link i:hover{opacity:1;transform:scale(1.2)}.top .banner{width:100%;display:flex;flex-direction:column;position:relative;overflow-x:hidden}.top .banner #waves{width:100%;position:absolute;top:0;left:0;fill:#22b2f0;fill-opacity:1;animation:wave 30s linear infinite}.top .banner:after,.top .banner:before{content:"";background-image:url(../../svg/bg-wave.svg);background-repeat:repeat-x;width:100%;height:770px;position:absolute;top:-250px;left:0;animation:wave2 50s linear infinite}.top .banner:after{top:-350px;animation:wave2 45s reverse infinite}.top .banner .title{color:#f9f9f9;font-size:1.4rem;position:absolute;top:40%;left:50%;transform:translate(-50%,-40%);text-align:center}.top .banner .scroll-down{position:absolute;bottom:5rem;left:50%;transform:translateX(-50%);text-align:center;font-size:1.3rem;animation:scroll-down 2s infinite}.about-sec .bio-wrapper{display:flex;justify-content:center;align-items:center}.about-sec .bio-wrapper .bio-img-box{width:300px;height:300px;border-radius:50%;background-image:linear-gradient(-45deg,#0696d4 0,#034561 25%,#000 50%,#034561 75%,#0696d4 100%);background-size:300% 300%;background-position:0 0;border:1px solid #f3f3f3;margin:0 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;animation:bg-avatar 40s linear infinite}.about-sec .bio-wrapper .bio-img-box .bio-img{width:70%}.about-sec .bio-wrapper .bio-img-box:hover{animation:img-pulse 1s linear infinite}.about-sec .bio-wrapper .bio-box .bio-text{text-align:center;margin-top:1rem}.about-sec .bio-wrapper .bio-box .bio-text p{color:#a1a1a1}.about-sec .bio-wrapper .bio-box .bio-text p span{font-weight:700;color:#f9f9f9}@media screen and (max-width:1200px){.about-sec .bio-wrapper{flex-direction:column}}@media screen and (max-width:450px){.about-sec .bio-wrapper .bio-img-box{width:200px;height:200px}}.skill-sec{width:100%;background-color:#202020}.skill-sec .skill-wrapper .tech-box{width:100%;margin-top:1rem;align-items:center;display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px}.skill-sec .skill-wrapper .tech-box .tech-icon-box .tech-icon{width:100%}.skill-sec .skill-wrapper .skills-box{width:100%;margin-top:1rem;display:flex;flex-flow:row wrap;justify-content:space-around}.skill-sec .skill-wrapper .skills-box .skill-item{width:100%;border-radius:20px;padding:5px 10px;margin-bottom:1rem;text-align:center}.skill-sec .skill-wrapper .skills-box .skill-item h3{font-size:1.5rem;text-align:center}.skill-sec .skill-wrapper .skills-box .skill-item p{color:#a1a1a1}.skill-sec .skill-wrapper .skills-box .skill-item p span{font-weight:700;color:#f9f9f9}.skill-sec .skill-wrapper .skills-box .skill-item p strong{color:#22b2f0}.skill-sec-new .subtitle{margin:0}.skill-sec-new .skill-wrapper{display:flex;gap:30px}.skill-sec-new .skill-wrapper .tech-wrapper,.skill-sec-new .skill-wrapper .tools-wrapper{padding:30px;flex:1;box-shadow:4px 4px 4px #161616;border-radius:20px}.skill-sec-new .skill-wrapper .tech-wrapper h3,.skill-sec-new .skill-wrapper .tools-wrapper h3{margin-bottom:30px;font-size:2rem}.skill-sec-new .skill-wrapper .tech-wrapper .skill-item,.skill-sec-new .skill-wrapper .tools-wrapper .skill-item{background-color:#027aad;color:#fff;padding:8px 15px;border-radius:4px;font-weight:600;display:inline-block;text-transform:uppercase;transition:all .3s ease}.skill-sec-new .skill-wrapper .tech-wrapper .skill-item:hover,.skill-sec-new .skill-wrapper .tools-wrapper .skill-item:hover{background-color:#22b2f0;transform:translateY(-2px)}.skill-sec-new .skill-wrapper .tech-wrapper .tech-box{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.skill-sec-new .skill-wrapper .tech-wrapper .tech-box .skill-item{flex:1 1 33.33%}.skill-sec-new .skill-wrapper .tools-wrapper .tools-box{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.skill-sec-new .skill-wrapper .tools-wrapper .tools-box .skill-item{flex:1 1 calc(33.33% - 20px)}@media screen and (max-width:750px){.skill-sec-new .skill-wrapper{flex-direction:column}}@media screen and (max-width:450px){.skill-sec-new .skill-wrapper .tech-wrapper h3,.skill-sec-new .skill-wrapper .tools-wrapper h3{font-size:1.5rem}}.portfolio-webs-sec{width:100%}.portfolio-webs-sec .portfolio-wrapper .subtitle{margin-bottom:30px}.portfolio-webs-sec .portfolio-wrapper .portfolio-items-box{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.portfolio-webs-sec .portfolio-wrapper .portfolio-items-box .portfolio-item{width:100%;border-radius:20px;overflow:hidden;box-shadow:4px 4px 4px #161616;transition:all .3s ease}.portfolio-webs-sec .portfolio-wrapper .portfolio-items-box .portfolio-item .portfolio-item-img{width:100%}.portfolio-webs-sec .portfolio-wrapper .portfolio-items-box .portfolio-item .portfolio-item-img img{width:100%;height:auto}.portfolio-webs-sec .portfolio-wrapper .portfolio-items-box .portfolio-item .card-info{padding:10px;text-align:center}.portfolio-webs-sec .portfolio-wrapper .portfolio-items-box .portfolio-item:hover{box-shadow:8px 8px 10px #161616;transform:translateY(-7px)}@media screen and (max-width:1250px){.portfolio-webs-sec .portfolio-wrapper .portfolio-items-box{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:700px){.portfolio-webs-sec .portfolio-wrapper .portfolio-items-box{grid-template-columns:repeat(1,1fr)}}.foot{width:100%;height:300px;padding:20px 30px;display:flex;align-items:center;flex-direction:column-reverse;background-image:url(../../svg/foot-wave.svg);animation:wave2 50s linear infinite}.foot .copyr,.foot .social{width:100%;margin-top:2rem;text-align:center}.foot .copyr h3,.foot .social h3{font-size:1.7rem;margin-bottom:.5rem}.foot .copyr h4{margin-top:.5rem}.foot .social .social-links a{margin:0 10px}.foot .social .social-links a i{font-size:25px;transition:all .2s}.foot .social .social-links a i:hover{text-shadow:0 0 7px #f9f9f9}@media screen and (min-width:660px){.top .nav-bar .menu .menu-link .link{font-size:3rem}.top .banner .title{font-size:2.5rem}.top .banner .scroll-down{font-size:1.5rem}}@media screen and (min-width:1200px){.top .nav-bar .menu{position:relative;flex-direction:row;height:100%;width:60%;clip-path:none;background-color:transparent}.top .nav-bar .menu .menu-link{opacity:1;transform:translate(0)}.top .nav-bar .menu .menu-link .link{font-size:1rem}.top .menu-icon{display:none}.top .side-nav{display:flex;transform:translateX(-50px)}.top .side-active{transform:translateX(0);animation:pulse 1s linear infinite}.top .banner .title{font-size:2.8rem}.top .sun-moon-btn{top:50%;transform:translateY(-50%)}}@media screen and (min-width:660px){.content .about-sec .bio-details .language-box,.content .about-sec .bio-details .likes-box{width:48%;margin:0}.content .skill-sec .skill-wrapper .tech-box{width:90%;margin:0 auto;grid-gap:50px}.content .skill-sec .skill-wrapper .skills-box .skill-item{width:90%}.content .skill-sec .skill-wrapper .skills-box .skill-item p{font-size:1.5rem}}@media screen and (min-width:1024px){.content .skill-sec .skill-wrapper .tech-box{grid-gap:80px}}@media screen and (min-width:1200px){.content .wrapper{width:80%}.content .about-sec .bio-img-box{margin-top:4rem}.content .about-sec .bio-box{width:60%}.content .about-sec .bio-box .bio-text{text-align:left}.content .skill-sec .skill-wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:flex-start}.content .skill-sec .skill-wrapper .tech-box{width:20%;grid-template-columns:repeat(2,1fr);grid-gap:50px;align-content:flex-start}.content .skill-sec .skill-wrapper .skills-box{width:70%}.content .skill-sec .skill-wrapper .skills-box .skill-item{text-align:left}.content .skill-sec .skill-wrapper .skills-box .skill-item p{font-size:1.3rem;line-height:2}}@media screen and (min-width:1200px){.foot{flex-direction:row}}@keyframes wave{0%{fill:#242424;transform:translateX(0)}50%{fill:#22b2f0}100%{fill:#242424;transform:translateX(-700px)}}@keyframes wave2{0%{background-position-x:0}100%{background-position-x:1440px}}@keyframes scroll-down{0%{transform:translate(-50%,0)}50%{transform:translate(-50%,5px)}100%{transform:translate(-50%,0)}}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(243,243,243,0)}25%{box-shadow:0 0 1px 1px rgba(243,243,243,.3)}100%{box-shadow:0 0 5px 10px rgba(243,243,243,0)}}@keyframes img-pulse{0%{box-shadow:0 0 0 0 rgba(243,243,243,0)}25%{box-shadow:0 0 1px 1px #f3f3f3}100%{box-shadow:0 0 5px 35px rgba(243,243,243,0)}}@keyframes icon{0%{transform:translateY(0)}25%{transform:translateY(-1.5px)}75%{transform:translateY(1px)}100%{transform:translateY(0)}}@keyframes bg-avatar{0%{background-position:0 0}50%{background-position:100% 100%}100%{background-position:0 0}}