@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,600;1,400&display=swap";@import"https://fonts.googleapis.com/css2?family=Handjet:wght@400;600&display=swap";*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;border:none;outline:none;scroll-behavior:smooth;font-family:Poppins,sans-serif;text-transform:capitalize}:root{--bg-color: #1C1E27;--II-bg-color:#;--text-color:#fff;--main-color:#0ef}html{font-size:62.5%;overflow-x:hidden}body{background:var(--bg-color);color:var(--text-color)}section{min-height:10vh;padding:10rem 9% 2rem}.home{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;gap:5rem}.home-img img{width:35vh;animation:floatImage 4s ease-in-out infinite;border-radius:50%}@keyframes floatImage{0%{transform:translateY(0)}50%{transform:translateY(-2.6rem)}to{transform:translateY(0)}}.home-content h3{font-size:3.2rem;font-weight:700}.home-content h3:nth-of-type(2){margin-bottom:2rem}span{color:var(--main-color);font-size:4rem;text-wrap:wrap}.home-content h1{font-size:5.6rem;font-weight:700;line-height:1.3}.social-media .icon{width:4rem;height:4rem;border-radius:5px;color:var(--main-color);margin:10px;transition:.3s}.social-media .icon:hover{background:var(--main-color);color:var(--II-bg-color);box-shadow:0 0 1rem var(--main-color)}.btn{display:inline-block;padding:1rem 2.8rem;background:var(--main-color);border-radius:4rem;box-shadow:0 0 .7rem var(--main-color);font-size:1.7rem;color:var(--II-bg-color);letter-spacing:.1rem;font-weight:800;transition:.5s ease;margin:2rem}.btn:hover{box-shadow:none}.btn{transition:opacity .5s ease}.btn.hidden{opacity:0;pointer-events:none}.home-content .container .text{position:relative;color:#fff;font-size:3.6rem}.home-content .container #multiple:before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:var(--bg-color);border-left:2px solid var(--main-color);animation:animatemul 4s steps(12) infinite}@keyframes animatemul{40%,60%{left:100%}to{left:0%}}@media (max-width:1220px){html{font-size:55%}}@media (max-width:991px){.header{padding:2rem 3%}section{padding:10rem 3% 2rem}.footer{padding:2rem 3%}.skills{padding-bottom:7rem}.home{display:flex;flex-direction:column-reverse}.home-content h1{font-size:3.6rem}span{color:var(--main-color);font-size:3rem}}@media (max-width:768px){.home{flex-direction:column-reverse}.home-content h3{font-size:2.6rem}.home-content h2{font-size:5rem}.home-img{display:flex;margin-top:4rem;gap:4rem}}button{display:none;width:100%;padding:10px;background-color:#fff;color:#000;font-size:14px;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:all .8s ease-in-out}div.Card{width:330px;height:490px;background-color:#171721;cursor:pointer;border-radius:10px;box-shadow:0 0 12px 4px #0006;overflow:hidden;padding:26px 20px;display:flex;flex-direction:column;gap:14px;transition:all .5s ease-in-out}div.Card:hover{transform:translateY(-10px);box-shadow:0 0 50px 4px #0009;filter:brightness(1.1)}div.Card:hover button{display:block}img.Image{width:100%;height:180px;background-color:#fff;border-radius:10px;box-shadow:0 0 16px 2px #0000004d}div.Tags{width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:4px}span.Tag{font-size:12px;font-weight:400;color:#854ce6;background-color:#854CE6+15;padding:2px 8px;border-radius:10px}div.Details{width:100%;display:flex;flex-direction:column;gap:0px;padding:0 2px}div.Title{font-size:20px;font-weight:600;color:#b1b2b3;display:-webkit-box;max-width:100%;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}div.Date{font-size:12px;margin-left:2px;font-weight:400;color:#b1b2b3+80}@media only screen and (max-width: 768px){div.Date{font-size:10px}}div.Description{font-weight:400;color:#b1b2b3 + 99;overflow:hidden;margin-top:8px;display:-webkit-box;max-width:100%;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis}img.Avatar{width:38px;height:38px;border-radius:50%;margin-left:-10px;background-color:#fff;box-shadow:0 0 10px #0003;border:3px solid #171721}.Container{background:linear-gradient(343.07deg,#843bce0f 5.71%,#843bce00 64.83%);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1;align-items:center;clip-path:polygon(0 0,100% 0,100% 100%,100% 98%,0 100%)}.Wrapper{position:relative;display:flex;justify-content:space-between;align-items:center;flex-direction:column;width:100%;max-width:1350px;padding:10px 0 100px;gap:12px}.Desc{font-size:18px;text-align:center;max-width:600px;color:#b1b2b3}@media (max-width: 768px){.Desc{margin-top:12px;font-size:16px}}.Divider{width:1.5px;background:#854ce6}.CardContainer{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap}.container{display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1;align-items:center}.Wrapper{position:relative;display:flex;justify-content:space-between;align-items:center;flex-direction:column;width:100%;max-width:1100px;gap:12px}.title{font-size:42px;text-align:center;font-weight:600;margin-top:20px;color:#f2f3f4}@media (max-width: 768px){.title{margin-top:12px;font-size:32px}}.desc{font-size:18px;text-align:center;max-width:600px;color:#b1b2b3}@media (max-width: 768px){.desc{font-size:16px}}.skills-container{width:100%;display:flex;flex-wrap:wrap;margin-top:30px;gap:30px;justify-content:center}.skill{width:100%;max-width:500px;background:#171721;box-shadow:#175ce626 0 4px 24px;border-radius:16px;padding:18px 36px;transition:1s ease}.skill:hover{border:.1px solid #854CE6}@media (max-width: 768px){.skill{max-width:400px;padding:10px 36px}}@media (max-width: 500px){.skill{max-width:330px;padding:10px 36px}}.skill-title{font-size:28px;font-weight:600;color:#b1b2b3;margin-bottom:20px;text-align:center}.skill-list{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:20px}.skill-item{font-size:16px;font-weight:400;color:#f2f3f4;border:1px solid #F2F3F4;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.1s ease-in;height:8rem;overflow:hidden;padding:15px 3rem}.skill-details{display:flex;align-items:center;justify-content:center;gap:5px}.skill-item:hover{color:#854ce6}@media (max-width: 768px){.skill-item{font-size:14px;padding:8px 12px;height:6rem}.progress-graph{height:5px;font-size:10px;bottom:0%;margin:0}}@media (max-width: 500px){.skill-item{font-size:14px;padding:6px 12px;height:5rem}.progress-graph{height:2px;font-size:2px;margin:0}}.skill-image{width:24px;height:24px}.skill-item{position:relative;cursor:pointer}.progress-graph{position:absolute;bottom:15%;left:0;width:100%;height:6px;display:none;align-items:center;padding:0 2rem;margin:4px 0}.skill-item:hover .progress-graph{display:block}.progress{border-radius:5px;padding-left:5px;color:#fff;background-color:#854ce6}.Container{display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1;align-items:center}.Wrapper{position:relative;display:flex;justify-content:space-between;align-items:center;flex-direction:column;width:100%;max-width:1350px;padding:0 0 80px;gap:12px}.Title{font-size:42px;text-align:center;font-weight:600;margin-top:20px;color:#f2f3f4}@media (max-width: 768px){.Title{margin-top:12px;font-size:32px}}.ContactForm{width:95%;max-width:600px;display:flex;flex-direction:column;background-color:#1c1c27;padding:32px;border-radius:16px;box-shadow:#175ce626 0 4px 24px;margin-top:28px;gap:12px}.ContactTitle{font-size:24px;margin-bottom:6px;font-weight:600;color:#f2f3f4}.ContactInput{flex:1;background-color:transparent;border:1px solid #854CE6;outline:none;font-size:18px;color:#f2f3f4;border-radius:12px;padding:12px 16px}.ContactInput:focus{border:1px solid #f0f0f0}.ContactInputMessage{flex:1;background-color:transparent;border:1px solid #854CE6;outline:none;font-size:18px;color:#f2f3f4;border-radius:12px;padding:12px 16px}.ContactInputMessage:focus{border:1px solid #f0f0f0}.ContactButton{width:100%;text-decoration:none;text-align:center;background:linear-gradient(225deg,#8400ff,#e500ff);padding:13px 16px;margin-top:2px;border-radius:12px;border:none;color:#f2f3f4;font-size:18px;font-weight:600}
