@import "https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&display=swap";@keyframes h1InSlide{0%{color:#fff0;transform:translateY(-120%)}to{color:#fff;transform:translateY(0)}}@keyframes h2InSlide{0%{color:#fff0;transform:translateY(30%)}to{color:#fff;transform:translateY(0)}}@keyframes h2InSlide2{0%{color:#fff0;background-color:#0000;border:0 solid #fff0;transform:translateY(30%)}to{color:#fff;background-color:#0a0a0a4d;border:1px solid #ffffff1a;transform:translateY(0)}}@keyframes h2cardInSlide3{0%{color:#fff0;transform:translateY(30%)}to{color:#fff;transform:translateY(0)}}@keyframes h2cardInSlide4{0%{color:rgba(var(--color-rgba1));transform:translateY(30%)}to{color:rgba(var(--color-rgba2));transform:translateY(0)}}@keyframes h2cardInSlide{0%{color:rgba(var(--color-rgb), 0);transform:translateY(30%)}to{color:rgba(var(--color-rgb), 1);transform:translateY(0)}}@keyframes cardInSlide{0%{background-color:#fff0;border:0 solid #ffffff1a;transform:translateY(50%)}to{background-color:#ffffff03;border:1px solid #ffffff1a;transform:translateY(0)}}.font1{font-optical-sizing:auto;font-family:Merriweather Sans,sans-serif;font-style:normal;font-weight:300}.font2{font-optical-sizing:auto;font-family:Merriweather Sans,sans-serif;font-style:normal;font-weight:800}body{background-color:#0f0f0f}html,body{overflow-x:hidden}h1,h2{color:#fff;font-size:clamp(40px,8vw,70px)}.header1{color:#fff0;padding-top:30px;animation:10s cubic-bezier(.1,1,.1,1) forwards h1InSlide}.header2{color:#fff0;padding-top:15vh;padding-left:1vw;font-size:clamp(24px,5vw,40px);animation:5s cubic-bezier(.1,1,.1,1) 1s forwards h2InSlide}.header3{color:#fff0;padding-top:15vh;padding-left:1vw;font-size:clamp(24px,5vw,40px);animation:5s cubic-bezier(.1,1,.1,1) 1.8s forwards h2InSlide}.header4{color:#fff0;padding-top:15vh;padding-left:1vw;font-size:clamp(24px,5vw,40px);animation:5s cubic-bezier(.1,1,.1,1) 2.53s forwards h2InSlide}.content-layout{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:60px;max-width:1400px;margin:0 auto;padding:40px;display:flex}.left-side{flex-direction:column;flex:1;gap:20px;display:flex}.aboutme{text-align:right;box-sizing:border-box;flex-direction:column;flex:1;justify-content:flex-start;align-items:flex-end;max-width:500px;margin-left:auto;padding:20px;animation:5s cubic-bezier(.1,1,.1,1) 2.53s forwards h2InSlide2;display:flex}.cards{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:30px;padding:20px;display:flex;overflow:hidden}.card{--color-rgb:var(--card-color,255, 255, 255);text-align:center;cursor:pointer;background-color:#0000;border:1px solid #0000;padding:30px 40px;transition:background-color .3s ease-out,transform .3s ease-out,border-color .3s ease-out;overflow:hidden}.card:hover{background-color:rgba(var(--color-rgb), .15);border-color:rgba(var(--color-rgb), .4);transform:translateY(-8px)}.card h2{color:rgba(var(--color-rgb), 0);margin:0;font-size:clamp(20px,4vw,32px);animation:2s cubic-bezier(.1,1,.1,1) 1.5s forwards h2cardInSlide}@media (width<=768px){.header1,.header2{text-align:center;padding-left:0}.cards{margin:0 auto}}.skills-list{flex-direction:column;align-items:flex-start;gap:20px;display:flex}.skill-item{--color-rgb:var(--skill-color,255, 255, 255);cursor:pointer;opacity:0;background-color:#ffffff03;border:1px solid #ffffff1a;grid-template-columns:150px 1fr;align-items:center;gap:20px;width:500px;margin-left:5vh;padding:12px 20px;transition:background-color .3s ease-out,transform .3s ease-out;animation:2s cubic-bezier(.1,1,.1,1) 2s forwards skillFadeIn;display:grid;transform:scaleY(0)}.skill-item:hover{background-color:#ffffff12;transform:translateY(-5px)}.skill-name{color:#fff;text-align:left;font-size:clamp(16px,3vw,22px)}.progress-track{background-color:#ffffff1a;width:100%;height:10px;overflow:hidden}.progress-fill{background-color:rgb(var(--color-rgb));transform-origin:0;height:100%;transition:filter .3s ease-out,box-shadow .3s ease-out;animation:1.5s cubic-bezier(.1,1,.1,1) 2.1s forwards fillBar;transform:scaleX(0)}.skill-item:hover .progress-fill{box-shadow:0 0 12px rgba(var(--color-rgb), .7);filter:brightness(1.2)}@keyframes skillFadeIn{to{opacity:1;transform:scaleY(1)}}@keyframes fillBar{to{transform:scaleX(1)}}@media (width<=480px){.skill-item{grid-template-columns:1fr;gap:8px}.skills-list{margin:0 auto}}