@import"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Stylish&display=swap";@import"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sora:wght@100..800&family=Stylish&display=swap";*{font-family:Poppins,sans-serif;overflow-x:hidden}:root{--nav-font-color: #111827;--background-color: #fff;--dark-color: #000000;--about-text-title-color: #666666;--box-shadow-color: #CED4DA;--about-me-text-color: #374151;--skill-title-color: #0F0F10;--skill-text-color: #4B5563;--icon-background-color: #E5E7EB;--pagination-color: #D9D9D9}.nav-text{color:var(--nav-font-color);font-size:20px;font-weight:700;padding:2px 100px}.head-container{height:100vh;display:flex;justify-content:center;align-items:center;gap:20%}.title span:nth-child(1){color:var(--dark-color);font-size:60px;display:block;margin:-18px 0}.title span:nth-child(2){color:var(--nav-font-color);font-size:60px;font-weight:700}.about-me-title{padding:0 0 20px}.about-me-title p{color:var(--dark-color);font-size:18px;font-weight:400}.about-me-title span{color:var(--about-text-title-color);display:block}.btn{width:147.765625px;height:48px;border-radius:30px;background-color:var(--dark-color);color:var(--background-color);border:2px solid var(--dark-color);font-weight:400;font-size:16px;cursor:pointer}.img-container img{width:320px;height:320px;object-fit:contain;border-radius:50%;border:2px solid var(--icon-background-color);background-color:var(--icon-background-color)}.pagination-container{display:flex;align-items:center;flex-direction:column;gap:10px;padding:10px 30px;position:fixed;right:0}.pagination-dot{width:10px;height:10px;background-color:var(--pagination-color);border-radius:50%;cursor:pointer;transition:transform .2s ease}.pagination-dot.active{background-color:var(--dark-color)}.pagination-dot:hover{transform:scale(1.3)}.pagination-container img{width:24px;height:24px;cursor:pointer;transition:transform .2s ease}.pagination-container img:hover{transform:translateY(3px)}.middle-section{display:flex;align-items:center;flex-direction:column}.about-me{width:60%;box-shadow:0 0 8px 4px var(--box-shadow-color);border-radius:16px;border:2px solid var(--box-shadow-color);display:flex;align-items:center;padding:25px;opacity:0;transform:translate(-100px,-100px) rotate(-10deg);animation:boxAnimation 1.2s ease-out .2s forwards}@keyframes boxAnimation{to{opacity:1;transform:translate(0) rotate(0)}}.about-me p{color:var(--about-me-text-color);font-size:16px;font-weight:400;text-align:justify;text-justify:inter-character}.skill-container{padding:100px 0}.skills{display:flex;align-items:center;justify-content:center;gap:40px;padding:15px}.skill{display:flex;align-items:center;justify-content:center;flex-direction:column;width:206px;box-shadow:0 0 8px 4px var(--box-shadow-color);height:140px;border-radius:16px;border:2px solid var(--box-shadow-color);gap:12px;transform:translate(-100px,-100px) rotate(-10deg);animation:boxAnimation 1.2s ease-out .2s forwards}.skill-title{display:flex;align-items:center;justify-content:center;padding:20px 0}.skill-title h2{color:var(--skill-title-color);font-size:30px;font-weight:400}.skill span{color:var(--skill-text-color);font-family:Sora,sans-serif;font-size:14px;font-weight:400}.footer-title{display:flex;align-items:center;justify-content:center}.footer{height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:50px;padding:70px 0}.footer-title span{color:var(--skill-title-color);font-size:36px;font-weight:400;font-family:Space Grotesk,sans-serif}.footer-title span:before{content:"";position:absolute;height:4px;width:80px;background-color:var(--dark-color);margin:70px}form{display:flex;flex-direction:column}.form{padding:10px 20px;display:flex;flex-direction:column}input{width:428px;height:52px;border-radius:12px;border:2px solid var(--background-color);box-shadow:0 0 8px 4px var(--box-shadow-color)}label{font-size:14px;font-weight:400;font-family:Space Grotesk,sans-serif;color:var(--about-me-text-color);padding:14px 0}textarea{width:428px;height:148px;border-radius:12px;border:2px solid var(--background-color);box-shadow:0 0 8px 4px var(--box-shadow-color);margin:5px 0 20px}.submit-btn{width:428px;height:56px;border-radius:12px;border:2px solid var(--dark-color);background-color:var(--dark-color);color:var(--background-color);font-size:16px;font-weight:400;font-family:Space Grotesk,sans-serif;margin:20px 0;cursor:pointer}.information-container{width:375px;height:400px;border:2px solid var(--background-color);box-shadow:0 0 8px 4px var(--box-shadow-color);border-radius:16px;padding:0 30px}.information-box{display:flex;flex-direction:column;gap:35px}.information{display:flex;align-items:center;gap:15px}.information span{font-size:14px;font-weight:400;font-family:Space Grotesk,sans-serif;color:var(--skill-text-color)}.information p{margin:0;font-size:16px;font-weight:400;font-family:Space Grotesk,sans-serif;columns:var(--skill-title-color)}.information-title{padding:25px 0}.information-title span{font-size:20px;font-weight:400;font-family:Space Grotesk,sans-serif;color:var(--skill-title-color)}.information img{width:30px;height:30px;border-radius:50%;background-color:var(--icon-background-color);padding:10px}.social-link-container{padding:50px 0 20px;display:flex;flex-direction:column;gap:20px}.scoial-link-title span{font-size:14px;font-weight:400;font-family:Space Grotesk,sans-serif;color:var(--skill-text-color)}.social-link{display:flex;align-items:center;gap:20px}.social-link img{width:30px;height:30px;background-color:var(--icon-background-color);border-radius:50%;padding:10px}@media (min-width: 700px) and (max-width: 1024px){.img-container img{width:240px;height:240px}.img-container{right:70px}.about-me{width:90%}.skills{display:grid;grid-template-columns:1fr 1fr}.footer{flex-direction:column}}@media screen and (max-width: 700px){.nav-text{padding:2px 40px}.head-container{padding:0 10px;gap:0;flex-direction:column;flex-flow:column-reverse}.img-container img{width:220px;height:220px}.middle-section{padding:60px 0}.about-me{width:80%}.skills{display:grid;grid-template-columns:1fr 1fr;gap:25px}.skill{width:130px;height:115px}.footer{flex-direction:column}input{width:285px;height:45px}textarea{width:285px;height:140px}.submit-btn{width:300px;height:55px}.information-container{width:250px;height:385px}}
