@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:wght@400;500;700&display=swap";*{padding:0;margin:0;box-sizing:border-box}body{background-color:#000;padding:2rem 4rem}@media only screen and (max-width: 699px){body{padding:1rem}}.poppins{font-family:Poppins,serif!important}.opensans{font-family:Open Sans,sans-serif!important}.stroke-white{-webkit-text-fill-color:transparent;-webkit-text-stroke-width:1.2px;-webkit-text-stroke-color:#f7f8fa;-webkit-text-stroke-border:dotted}.stroke-black{-webkit-text-fill-color:transparent;-webkit-text-stroke-width:1.2px;-webkit-text-stroke-color:#212121}.logo{font-size:50px;font-weight:400;letter-spacing:.2rem;margin-bottom:2rem;color:#f7f8fa}.container{display:flex;gap:2rem}.nav-container{width:20%;position:relative}.nav{width:18%;height:max-content;padding:2rem;border-radius:.5rem;border:1px dotted #f7f8fa;position:fixed;transition:top .3s ease}.nav.scrolled{top:2rem}.nav ul li{list-style:none;margin-bottom:1rem;letter-spacing:.1rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-decoration:none}.nav ul li:last-child{margin-bottom:0!important}.contaier{width:80%}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.selectedFont{color:#f7f8fa}.not-selectedFont{color:#b3b3b3}.selected{width:20px;height:20px;border:1px dotted #f7f8fa;border-spacing:10px;border-radius:50%;animation:rotate 2s linear infinite;margin-right:-.5rem}.not-selected{width:5px;height:5px;background-color:#b3b3b3;border-radius:50%}.section{width:100%;padding:1rem;color:#f7f8fa;border-radius:.5rem;box-shadow:#63636333 0 2px 8px;margin-bottom:2rem;border:1px dotted #f7f8fa}.section-wrapper{display:flex}.about-left img{width:250px;height:250px;border-radius:50%;margin:2rem}.about-right{margin-top:1rem}.about-me{font-family:Poppins,serif;position:relative;margin-top:3rem;color:#f7f8fa}.about-me:after{content:"About Me";width:max-content;position:absolute;left:0;bottom:-5px;font-size:40px;-webkit-text-fill-color:transparent;-webkit-text-stroke-width:1.2px;-webkit-text-stroke-color:#b3b3b3;font-family:Poppins,serif;opacity:.5;font-weight:700}.about-head{color:#f7f8fa;font-family:Poppins,serif;margin:1rem 0;text-transform:uppercase;font-size:20px}.about-skills{color:#f7f8fa;font-family:Poppins,serif;margin:1rem 0;text-transform:uppercase;font-size:15px;display:flex;gap:1rem}.about-skills p{border:1px dotted #f7f8fa;padding:1rem;border-radius:.5rem}.about-intro{font-family:Poppins,serif;color:#f7f8fa;text-align:justify;padding:0 2rem 1rem}.portfolio,.services,.resume,.contact{padding:2rem;font-family:Poppins,serif}.portfolio-head,.services-head,.resume-head,.contact-head{font-family:Poppins,serif;position:relative;margin-top:3rem;color:#f7f8fa}.portfolio-head:after{content:"PORTFOLIO";width:max-content;position:absolute;left:0;bottom:-5px;font-size:40px;-webkit-text-fill-color:transparent;-webkit-text-stroke-width:1.2px;-webkit-text-stroke-color:#b3b3b3;font-family:Poppins,serif;opacity:.5;font-weight:700}.portfolio-header,.services-header,.contact-header{margin:1rem 0;color:#f7f8fa}.portfolio-desc,.services-desc,.contact-desc{margin-bottom:1rem;color:#f7f8fa}.portfolio-items{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}.portfolio-items-link{border:1px dotted #f7f8fa}.portfolio-items-image{width:100%;height:100%}.services-head:after{content:"SERVICES";width:max-content;position:absolute;left:0;bottom:-5px;font-size:40px;-webkit-text-fill-color:transparent;-webkit-text-stroke-width:1.2px;-webkit-text-stroke-color:#b3b3b3;font-family:Poppins,serif;opacity:.5;font-weight:700}.services-list{margin-bottom:1rem}.services-item{display:flex;align-items:start;gap:2rem;padding:1rem 0;border-bottom:1px dotted}.services-item:last-child{border-bottom:none}.services-index{font-size:45px;font-weight:700;-webkit-text-fill-color:transparent;-webkit-text-stroke-width:1.2px;-webkit-text-stroke-color:#f7f8fa}.resume-head:after{content:"RESUME";width:max-content;position:absolute;left:0;bottom:-5px;font-size:40px;-webkit-text-fill-color:transparent;-webkit-text-stroke-width:1.2px;-webkit-text-stroke-color:#b3b3b3;font-family:Poppins,serif;opacity:.5;font-weight:700}.resume-heading{display:flex;align-items:center;justify-content:space-between}.resume-cv{padding:.5rem;background-color:transparent;border:1px dotted #f7f8fa;border-radius:.3rem;font-family:Poppins,serif;cursor:pointer;color:#fff;margin-top:1rem}.contact-head:after{content:"CONTACT";width:max-content;position:absolute;left:0;bottom:-5px;font-size:40px;-webkit-text-fill-color:transparent;-webkit-text-stroke-width:1.2px;-webkit-text-stroke-color:#b3b3b3;font-family:Poppins,serif;opacity:.5;font-weight:700}.contact-data{padding:5px 15px;border-radius:20px;margin:.5rem .5rem .5rem 0;text-decoration:none;color:#f7f8fa;font-family:Poppins,serif;width:max-content;font-weight:400;font-size:16px;display:inline-block;border:1px dotted #f7f8fa}@media only screen and (max-width: 699px){.logo{font-size:40px;width:100%}.nav,.nav-container{display:none}.contaier{width:100%;display:flex;flex-direction:column;gap:2rem}.section-wrapper{display:block;margin:0;padding:0}.about-left img{width:150px;height:150px;border-radius:50%;margin:0;padding:0}.about-head h2{font-size:18px;margin-bottom:.3rem}.about-skills{display:flex;flex-direction:column;text-align:center}.about-intro{padding:0;text-align:start}.portfolio,.services,.contact{padding:0}.portfolio-header,.services-header,.contact-header{font-size:18px}.portfolio-desc,.services-desc,.contact-desc{font-size:14px}.portfolio-items{display:grid;grid-template-columns:1fr}.services-index{font-size:20px}.services-item-data h2{font-size:18px}.services-item-data p{font-size:14px}.resume-cv{margin-top:1.5rem}}.education{position:relative;padding:10px 0;width:80%}.education-item{display:flex;align-items:center;margin:20px 0}.education-dot{width:12px;height:12px;background-color:#212121;border-radius:50%;margin-right:20px}.education-content{border-left:1px dotted #ddd;padding:1rem 1.5rem}.education-date{display:inline-block;padding:5px 15px;border-radius:20px;margin-bottom:.5rem;border:1px dotted}.education-title{font-size:1.5rem;font-weight:600;margin:5px 0}.education-university{color:#777;font-size:1rem}@media only screen and (max-width: 699px){.education{width:100%}.education-title{font-size:16px}.education-university,.education-date{font-size:12px}}.timeline{position:relative;padding:10px 0;width:80%}.timeline-item{display:flex;align-items:center;margin:20px 0}.timeline-dot{width:12px;height:12px;background-color:#212121;border-radius:50%;margin-right:20px}.timeline-content{border-left:1px dotted #ddd;padding:1rem 1.5rem}.timeline-date{display:inline-block;padding:5px 15px;border-radius:20px;margin-top:.5rem;border:1px dotted}.timeline-title{font-size:1.5rem;font-weight:600;margin:5px 0}.timeline-university{color:#777;font-size:1rem}@media only screen and (max-width: 699px){.timeline{width:100%}.timeline-title{font-size:16px}.timeline-university,.timeline-date{font-size:12px}}