:root{--jet: hsl(0, 0%, 22%);--onyx: hsl(240, 1%, 17%);--eerie-black-1: hsl(240, 2%, 13%);--eerie-black-2: hsl(240, 2%, 12%);--smoky-black: hsl(0, 0%, 7%);--white-1: hsl(0, 0%, 100%);--white-2: hsl(0, 0%, 98%);--light-gray: hsl(0, 0%, 84%);--light-gray-70: hsla(0, 0%, 84%, .7);--sky-blue-crayola: hsl(190, 82%, 72%);--shadow-1: -4px 8px 24px hsla(0, 0%, 0%, .25);--shadow-2: 0 16px 30px hsla(0, 0%, 0%, .25);--ff-poppins: "Poppins", sans-serif}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%}body{background:var(--smoky-black);font-family:var(--ff-poppins);color:var(--light-gray)}a{text-decoration:none;color:inherit}.background{min-height:100vh;background:var(--smoky-black);display:flex;justify-content:center;align-items:flex-start;padding:60px 40px}.layout{display:grid;grid-template-columns:300px 1fr;gap:24px;max-width:1200px;width:100%;align-items:start}.sidebar{width:300px;display:flex;justify-content:center}.sidebar-card{width:100%;max-width:280px;background:var(--eerie-black-2);border:1px solid var(--jet);border-radius:20px;padding:24px;color:var(--white-2);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:16px;height:fit-content;position:sticky;top:60px}.content-card{flex:1;background:var(--eerie-black-2);border:1px solid var(--jet);border-radius:20px;padding:32px;box-shadow:var(--shadow-1);display:flex;flex-direction:column}.navbar{display:flex;gap:24px;margin-bottom:30px}.navbar a{font-size:.85rem;font-weight:500;color:var(--light-gray-70);padding-bottom:4px;transition:color .2s ease,border-color .2s ease}.navbar a.active{color:var(--sky-blue-crayola);border-bottom:2px solid var(--sky-blue-crayola)}h1,h2,h3{color:var(--white-2)}.page-title{font-size:1.5rem;margin-bottom:20px}.page-text{font-size:.9rem;line-height:1.6;color:var(--light-gray)}@media(max-width:900px){.layout{flex-direction:column}.sidebar{width:100%;position:relative}}.sidebar-header{text-align:center}.avatar{width:120px;height:120px;border-radius:20px;object-fit:cover;background:var(--onyx);box-shadow:var(--shadow-1)}.title{font-size:.75rem;color:var(--light-gray-70)}.separator{width:100%;height:1px;background:var(--jet);margin:20px 0}.sidebar-info p{font-size:.7rem;color:var(--light-gray-70);margin-bottom:4px}.sidebar-info span{display:block;font-size:.85rem;margin-bottom:12px}.sidebar-social{display:flex;justify-content:center;gap:18px;margin-top:8px}.sidebar-social a{font-size:.8rem;color:var(--sky-blue-crayola)}.sidebar{height:100vh;display:flex;justify-content:center;position:sticky;top:0}.sidebar-card{background:#1e1e1e;border-radius:28px;padding:32px 24px;height:fit-content;color:#fff;display:flex;flex-direction:column;align-items:center}.avatar-box img{width:120px;height:120px;border-radius:20px;object-fit:cover;object-position:center 20%}.sidebar-name{margin-top:20px;font-size:1.8rem;font-weight:600}.sidebar-role{margin-top:10px;padding:6px 14px;background:#2b2b2b;border-radius:14px;font-size:.85rem;color:#ddd}.sidebar-separator{width:100%;height:1px;background:#333;margin:24px 0}.sidebar-info{width:100%;list-style:none;padding:0}.sidebar-info li{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:.9rem}.sidebar-socials{display:flex;gap:14px;justify-content:center}.sidebar-socials a{width:38px;height:38px;background:#2b2b2b;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}.sidebar-socials a:hover{background:#3a3a3a;transform:translateY(-2px)}.sidebar-socials svg{width:16px;height:16px;fill:#fff}.article-title{font-size:1.5rem;margin-bottom:20px}.about-text{font-size:.9rem;line-height:1.6;color:var(--light-gray);margin-bottom:40px}.about-text p{margin-bottom:14px}.highlights{margin-bottom:40px}.highlights-title{margin-bottom:16px}.highlights-list{display:flex;gap:16px;list-style:none;padding:0;margin:0}.highlights-item{flex:1;background:var(--eerie-black-1);border-radius:12px;padding:18px;text-align:center;border:1px solid var(--jet)}.service-item-title{font-size:1.8rem;color:var(--sky-blue-crayola)}.service-item-text{font-size:.75rem;letter-spacing:1px;color:var(--light-gray-70)}.showcase-header{margin-bottom:16px}.showcase-posts-list{display:grid;grid-template-columns:1fr 1fr;gap:18px;list-style:none;padding:0;margin:0}.showcase-post-item a{display:block;background:var(--eerie-black-1);border-radius:12px;padding:18px;border:1px solid var(--jet);transition:all .2s ease}.showcase-post-item a:hover{transform:translateY(-4px);border-color:var(--sky-blue-crayola)}.showcase-item-title{margin-bottom:8px}.showcase-text{font-size:.85rem;line-height:1.5;color:var(--light-gray)}.article-title{font-size:1.5rem;margin-bottom:30px}.timeline{margin-bottom:40px}.title-wrapper{display:flex;align-items:center;gap:14px;margin-bottom:28px}.icon-box{width:36px;height:36px;border-radius:10px;background:var(--eerie-black-1);border:1px solid var(--jet);display:grid;place-items:center;color:var(--sky-blue-crayola)}.icon-box svg{width:18px;height:18px;display:block}.timeline-list{position:relative;list-style:none;padding:0;margin:0 0 0 55px}.timeline-list:before{content:"";position:absolute;left:-30px;top:8px;bottom:8px;width:2px;background:var(--jet)}.timeline-item{position:relative}.timeline-item:not(:last-child){margin-bottom:35px}.timeline-item:before{content:"";position:absolute;left:-34px;top:6px;width:8px;height:8px;background:var(--sky-blue-crayola);border-radius:50%;box-shadow:0 0 0 4px var(--eerie-black-2)}.timeline-item-title{margin-bottom:6px}.timeline-list span{display:block;margin-bottom:8px;font-size:.85rem;color:var(--sky-blue-crayola)}.timeline-text{font-size:.9rem;line-height:1.6;color:var(--light-gray)}.skills-title{margin-bottom:20px}.skills-list{display:flex;flex-direction:column;gap:16px}.skills-item{display:flex;flex-direction:column;gap:6px}.title-wrapper data{margin-left:auto;font-size:.8rem;color:var(--light-gray-70)}.skill-progress-bg{width:100%;height:8px;background:var(--jet);border-radius:6px}.skill-progress-fill{height:100%;background:var(--sky-blue-crayola);border-radius:6px}.portfolio-posts{margin-top:10px}.portfolio-posts-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}.portfolio-post-item a{display:block;background:var(--eerie-black-1);border-radius:12px;padding:20px;border:1px solid var(--jet);transition:all .2s ease}.portfolio-post-item a:hover{transform:translateY(-4px);border-color:var(--sky-blue-crayola)}.portfolio-content{display:flex;flex-direction:column;gap:6px}.portfolio-category{font-size:.75rem;color:var(--sky-blue-crayola);font-weight:500}.portfolio-item-title{font-size:1rem}.portfolio-text{font-size:.85rem;line-height:1.5;color:var(--light-gray)}@media(max-width:700px){.portfolio-posts-list{grid-template-columns:1fr}}.contact-details-wrapper{margin-bottom:30px;background:var(--eerie-black-1);border:1px solid var(--jet);border-radius:16px;padding:24px}.contact-info-list{display:flex;flex-direction:column;gap:20px}.contact-info-list li{display:flex;gap:14px;align-items:flex-start}.contact-info-list .icon-box{width:36px;height:36px;border-radius:10px;background:var(--eerie-black-2);border:1px solid var(--jet);display:flex;align-items:center;justify-content:center}.contact-text{color:var(--white-2)}.contact-text:hover{color:var(--sky-blue-crayola)}.contact-form-box{background:var(--eerie-black-1);border:1px solid var(--jet);border-radius:16px;padding:24px}.form-title{margin-bottom:20px}.contact-form{display:flex;flex-direction:column;gap:20px}.input-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-input{background:var(--eerie-black-2);border:1px solid var(--jet);border-radius:10px;padding:12px 14px;color:var(--white-2);font-size:.9rem}.form-input:focus{outline:none;border-color:var(--sky-blue-crayola)}textarea.form-input{min-height:120px;resize:vertical}.form-btn{align-self:flex-start;background:var(--eerie-black-2);border:1px solid var(--jet);border-radius:10px;padding:12px 18px;color:var(--white-2);font-size:.9rem;cursor:pointer;transition:all .2s ease}.form-btn:hover{border-color:var(--sky-blue-crayola);color:var(--sky-blue-crayola)}@media(max-width:700px){.input-wrapper{grid-template-columns:1fr}}