@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";*{font-family:Roboto,sans-serif;box-sizing:border-box;margin:0;padding:0;--primary: #000;--secondary: #18181b;--border: #3f3f4666;--title: rgb(244 244 245);--subtitle: rgb(161 161 170);--bgHeader: rgb(39, 39, 42);--blue: #36adfc;--icon-hover: #d4d4d8;--container-padding: 4rem}html{scroll-behavior:smooth}body{background-color:#000}.container{width:97%;margin:0 auto;background-color:var(--secondary);border:2px solid var(--border);padding:0 var(--container-padding)}ul{list-style:none}a{text-decoration:none}h1{color:var(--title)}p{color:var(--subtitle)}.header{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:1.2rem;color:var(--title);width:50%;margin:0 auto;margin-bottom:3rem}.header h4{color:var(--title);border:1px solid #232943;padding:5px;font-size:.8rem;margin-bottom:1rem}.header .headerh2{margin-bottom:1rem;display:flex;align-items:center}.header .headerh2 svg{font-size:1.9rem}.header .headerh2 h2{font-size:1.9rem;margin-left:1.3rem}.header p{line-height:1.7rem;text-align:center}.divider{border-bottom:2px solid var(--border);width:calc(100% + var(--container-padding) + var(--container-padding));margin:3rem 0 3rem calc(-1 * var(--container-padding))}.to-top{background-color:var(--blue);border-radius:50%;width:2.6rem;height:2.6rem;position:fixed;z-index:10;bottom:2rem;right:3%;border:1px solid rgba(255,255,255,.2)}.to-top:hover{background-color:#5fbdfccc}::-webkit-scrollbar{width:.8rem}::-webkit-scrollbar-track{border:7px solid #292c3b;box-shadow:inset 0 0 2.5px 2px #00000080;border-radius:4px;background-color:#d4d4d8}::-webkit-scrollbar-thumb{background:var(--blue);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#555}@media (max-width: 1000px){.container{--container-padding: 1.7rem;width:98%;padding:0 var(--container-padding)}.divider{--container-padding: 1.7rem;width:calc(100% + var(--container-padding) * 2);margin-left:calc(var(--container-padding) * -1)}}@media (max-width: 767px){.to-top{opacity:.6;width:2.2rem;height:2.2rem;right:3%}}@media (max-width: 600px){.container{--container-padding: 1rem;width:99%;padding:0 var(--container-padding)}.divider{--container-padding: 1rem;width:calc(100% + var(--container-padding) * 2);margin-left:calc(var(--container-padding) * -1)}}@media (max-width: 424px){.header{width:90%}.header .headerh2 h2{font-size:1rem}}section.main-section{color:#fff}.left-section{display:flex;align-items:center;justify-content:space-between}section.main-section .left-section .email label,section.main-section .left-section .message label{color:var(--subtitle)}section.main-section .left-section .email #email-inp,section.main-section .left-section .message #message-inp{all:unset;background-color:#3f3f4626;border:1px solid rgb(63 63 70);width:16rem;padding:.5rem 1rem;margin-left:1rem;border-radius:5px;transition:.3s;font-size:1.1rem;caret-color:#fff}section.main-section .left-section .email #email-inp:hover,section.main-section .left-section .message #message-inp:hover,section.main-section .left-section .email #email-inp:focus,section.main-section .left-section .message #message-inp:focus{cursor:pointer;border:1px solid var(--blue);box-shadow:4px 4px 10px #82c3ee,-4px -4px 10px #82c3ee}section.main-section .left-section .message{display:flex;align-items:center;margin:1.5rem 0}section.main-section .left-section .message #message-inp{min-height:9rem;resize:vertical}section.main-section .left-section button{background-color:#24252e;color:var(--title);padding:.75rem 2rem;text-align:center;font-size:1.05rem;border-radius:5px;transition:.3s;border:1px solid rgb(63 63 70)}section.main-section .left-section button:hover{scale:.97;box-shadow:4px 4px 10px #82c3ee,-4px -4px 10px #82c3ee}.animation-section{display:flex;align-items:center}@media (max-width: 1120px){.contact-animation{height:230px!important}}@media (max-width: 900px){.left-section{flex-direction:column-reverse;gap:1.4rem}}@media (max-width: 767px){section.main-section .text .header h1{font-size:1.4rem!important}section.main-section .header svg{margin-right:.6rem;font-size:1.6rem}.done-animation{height:100px!important}section.main-section .left-section .email,section.main-section .left-section .message{display:flex;flex-direction:column;align-items:flex-start}section.main-section .left-section .email #email-inp,section.main-section .left-section .message #message-inp{margin-left:0;padding:.7rem 0;margin-top:1rem}section.main-section .left-section .submit{text-align:center}}footer{display:flex;justify-content:center;align-items:center;padding-bottom:1.9rem}@keyframes modurAnimation{0%{transform:scale(0)}60%{transform:scale(1.2)}to{transform:scale(1)}}.main{position:sticky;top:0;left:0;z-index:100}header{width:calc(100% + var(--container-padding) * 2);margin-left:calc(-1 * var(--container-padding));display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20;background-color:#0f111799;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:1rem 2rem;border-bottom:1px solid rgba(255,255,255,.05);@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@keyframes spin{0%{--angle: 0deg}to{--angle: 360deg}}}header h3{color:var(--blue)}header .show-modul{display:none}header nav{padding:10px}header nav ul{display:flex}header nav ul li{padding:0 10px}header nav ul li a{color:#fff}header .talk-btn{position:relative;color:#fff;background-color:var(--blue, #3498db);padding:.4rem 1rem;border-radius:8px;border:none;font-size:1rem;cursor:pointer}header .talk-btn:after,header .talk-btn:before{content:"";position:absolute;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background:conic-gradient(from var(--angle),#ff4545,#00ff99,#006aff,#ff0095,#ff4545);z-index:-1;padding:10px;border-radius:8px;animation:spin 2s linear infinite}header .talk-btn:before{filter:blur(1.5rem);opacity:.5}header .talk-btn:hover{opacity:.8;transition:.4s}header .show-modul{background-color:var(--bgHeader);height:2.4rem;width:2.4rem;border-radius:50%;color:var(--subtitle);border:1px solid rgba(244,165,96,.249)}header .show-modul:hover{color:var(--title);border:1px solid rgb(244,165,96)}header .close-modul{color:var(--subtitle);font-size:1.5rem;transition:.2s}header .close-modul:hover{color:#dc143c;rotate:-360deg;transform-origin:center center}header .modul{position:fixed;top:0;right:0;bottom:0;left:0;z-index:21;background-color:#282830e8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}header .modul ul{animation:modurAnimation .77s 1;width:75%;margin-left:auto;margin-right:auto;margin-top:2rem;border-radius:1rem;padding:1rem 2rem;background-color:var(--secondary)}header .modul ul li{border-bottom:1px solid var(--border);padding-bottom:.77rem;padding-top:.5rem}header .modul ul li a{color:#fff;font-size:1rem}header .modul ul li:last-child{border:none}header .modul ul li:first-child{border:none;text-align:end}button{border:none;outline:none;background-color:transparent;cursor:pointer}a:hover:not(.talk-btn),.ul-modul a:hover{color:var(--blue);transition:.3s}@media (max-width: 1000px){header{--container-padding: 1.7rem;width:calc(100% + var(--container-padding) * 2);margin-left:calc(-1 * var(--container-padding))}}@media (max-width: 767px){header .show-modul{display:block}header nav{display:none}header h3{font-size:14px}}@media (max-width: 600px){header{--container-padding: 1rem;width:calc(100% + var(--container-padding) * 2);margin-left:calc(-1 * var(--container-padding))}}@media (max-width: 380px){header h3{font-size:11px}}.hero-main{padding:40px 0 0;display:flex}.img-div{padding:30px 0}.img-div img{width:180px;border:2px solid var(--blue);border-radius:50%}.verifi-icon{color:var(--blue)}.text h1{font-size:2.85rem;line-height:3.3rem;margin-bottom:2rem;color:var(--title)}.text p{color:var(--subtitle);font-size:.9rem;line-height:2;margin-bottom:2rem}.text .me{color:var(--blue)}.icons-group a{color:var(--subtitle);transition:.3s}.icons-group a svg{margin:0 10px}.icons-group a svg:hover{color:var(--icon-hover);cursor:pointer;font-size:1.7rem;transition:.3s}.icons-group a .insta:hover{color:#c13584}.icons-group a .face:hover{color:#4267b2}.icons-group a .linked:hover{color:#0a66c2}.icons-group a .git:hover{color:#000}.button-group{margin-top:1rem;display:flex;align-items:center;gap:10px}.button-group a{width:15.3rem;padding:.6rem;border-radius:7px}.button-group a button{padding:.6rem;border-radius:7px}.button-group a button:hover{box-shadow:4px 4px 10px #82c3ee,-4px -4px 10px #82c3ee}.button-group a:first-child button{width:100%;background:#1886d0;color:#fff;display:flex;align-items:center;justify-content:center;gap:3px}.button-group a:first-child button:hover{background:#075183;color:#fff}.button-group a:last-child button{color:#0a79c2;border:1px solid;width:100%}.button-group a:last-child button:hover{color:#0a79c2;background:#26263f}.right-div{display:flex;align-items:center}.dev-animation{width:300px}@media (max-width: 900px){.dev-animation{width:250px}}@media (max-width: 767px){.hero-main{flex-direction:column}.dev-animation{width:100%}.text h1{font-size:1.7rem!important}.icons-group a svg{margin:0 5px}}@media (max-width: 424px){.button-group{flex-direction:column}}main{display:flex;flex-direction:column;gap:2rem}main section.left-section{display:flex;justify-content:center;gap:1rem}main section.left-section button{background-color:#24252e;color:#fff;width:11rem;padding:.75rem 0;text-align:center;font-size:1.05rem;opacity:.5;border-radius:5px;transition:.3s}main section.left-section button:hover{opacity:1}main section.left-section button.active{opacity:1;font-weight:700;letter-spacing:.6px;padding:.8rem 0;border:1px solid var(--blue)}section.right-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}section.right-section article{display:flex;flex-direction:column;justify-content:space-between;min-width:300px;border:1px solid rgba(93,188,252,.3);border-radius:5px;transition:.3s;background-image:linear-gradient(#ffffff0d,#ffffff0d);overflow:hidden}section.right-section article:hover{border:1px solid var(--blue);box-shadow:2px 2px 10px 1px #36adfc,-2px 2px 10px 1px #36adfc}section.right-section article img{width:100%;border-radius:5px}section.right-section article .box{padding:1rem .4rem;align-self:flex-end}section.right-section article p{font-size:.8rem;margin-top:.7rem;margin-bottom:1.1rem;line-height:1.3rem}section.right-section article div.icons{display:flex;align-items:center;justify-content:space-between}section.right-section article div.icons div.two-icons{display:flex;align-items:center;gap:11px}section.right-section article div.icons div.two-icons svg{color:var(--subtitle)}section.right-section article div.icons div.two-icons svg:hover{font-size:1.7rem;color:var(--icon-hover);cursor:pointer}section.right-section article div.icons div.one-icon a{display:flex;align-items:center;font-size:.9rem;color:var(--blue);margin-right:12px}@media (max-width: 767px){main section.left-section button{width:7rem;padding:.8rem 0;font-size:.9rem}}@media (max-width: 374px){main section.right-section{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}section.right-section article{min-width:250px}}:root{--skill-hover-color: transparent}#skills .skills-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));justify-items:center;row-gap:1.2rem}#skills .skills-section .border-div{border:2px solid #5dbcfc24;padding:1.2rem;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}#skills .skills-section .div-img{border-radius:50%;width:110px;height:110px;display:flex;align-items:center;justify-content:center}@keyframes rotate{0%{transform:rotate(5deg)}25%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}to{transform:rotate(5deg)}}#skills .skills-section .div-img:hover{animation:colorHover 2s ease-in-out infinite}#skills .skills-section .div-img img{width:4rem;height:4rem}#skills .skills-section .div-img:hover img{animation:rotate .5s ease-in-out;filter:saturate(250%)}@keyframes colorHover{0%,to{background-color:transparent}50%{background-color:var(--skill-hover-color)}}.HTML5{--skill-hover-color: rgba(232, 84, 43, .675);filter:saturate(100%)}.CSS{--skill-hover-color: rgba(77, 152, 243, .662);filter:saturate(100%)}.JavaScript{--skill-hover-color: #f7de00a7;filter:saturate(100%)}.TypeScript{--skill-hover-color: rgba(60, 120, 198, .648);filter:saturate(100%)}.Bootstrap{--skill-hover-color: #8815fbb8;filter:saturate(100%)}.React\.Js{--skill-hover-color: #63c9c0a8;filter:saturate(100%)}.GitHub{--skill-hover-color: #0000009f;filter:saturate(100%)}.Next\.Js{--skill-hover-color: #00000085;filter:saturate(100%)}.Redux{--skill-hover-color: #5a3992a9;filter:saturate(100%)}.Tailwind{--skill-hover-color: #62bfe7a3;filter:saturate(100%)}#skills .skills-section h4{color:var(--title);text-align:center}@media (max-width: 500px){#skills .skills-section{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.border-div{width:120px}}.main-div{display:flex;justify-content:space-between;align-items:flex-start}.my-info h3{margin-bottom:1rem}.me{color:var(--blue)}.links h3{color:#fff;margin-bottom:1.3rem}.links ul li{margin-bottom:1rem}.links ul li a{color:var(--subtitle);margin-bottom:1rem}.contact h3{margin-bottom:1rem;color:#fff}@media (max-width: 767px){.main-div{flex-direction:column;gap:40px}}.sections{display:flex;justify-content:space-between;align-items:center;gap:1.5rem}.sections .left-sec{padding:1.7rem;border-radius:10px;border:1px solid #074063;width:50%;line-height:1.7rem}.sections .left-sec h2{color:var(--blue)}.sections .left-sec p:not(:first-of-type){color:#fff}.sections .left-sec p:not(:first-of-type) span{color:var(--blue);font-weight:700;font-size:19px}.sections .left-sec p{margin-top:1.2rem}.sections .left-sec:hover{box-shadow:5px 5px 40px var(--blue),-5px -5px 40px var(--blue)}.sections .right-sec{width:40%}.sections .right-sec div{position:relative}.sections .right-sec div:after{content:"";width:40px;height:calc(100% + 60px);background-color:var(--blue);top:-30px;left:80%;position:absolute;border-radius:5px}.sections .right-sec img{width:100%;border-radius:10px;position:relative;z-index:10}@media (max-width: 767px){.sections{flex-direction:column-reverse;gap:50px}.sections .right-sec{width:60%}.sections .left-sec{width:100%}}