@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap";:root{--darkBackground: #121212;--highlightedText: #03fd9b;--text: #ffffff;--selectedText: #df2e38}body::-webkit-scrollbar{width:4px}body::-webkit-scrollbar-thumb{background-color:#3a3a3aab;border-radius:7px}body::-webkit-scrollbar-thumb:hover{background-color:#00cc7d;cursor:pointer}body::-webkit-scrollbar-track{background-color:var(--darkBackground)}body{font-family:JetBrains Mono,monospace;background-color:var(--darkBackground);color:var(--text);scroll-behavior:smooth}::selection{background:var(--selectedText);color:#fff;padding:2px}.full{width:100%;margin:auto;display:flex;flex-direction:column;justify-content:center}.mainPage{width:100%;margin:0 auto}.education-title{font-size:26px;font-weight:700}.education-caption{font-size:16px;font-weight:200;color:#aeaeae;margin-bottom:30px;margin-top:30px;width:74%;line-height:2}.education-cards-container{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:30px;align-items:flex-start;height:360px;max-height:360px;overflow-y:scroll;overflow-x:hidden}.education-cards-container::-webkit-scrollbar{width:4px}.education-cards-container::-webkit-scrollbar-thumb{background-color:#3a3a3aab;border-radius:7px}.education-cards-container::-webkit-scrollbar-thumb:hover{background-color:#00cc7d}.education-cards-container::-webkit-scrollbar-track{background-color:var(--darkBackground)}@media screen and (max-width: 425px){.education-cards-container{justify-content:center}.education-caption{box-sizing:border-box;width:100%;padding-right:20px}}@media screen and (max-width: 360px){.education-caption{font-size:14px;margin:10px 0 20px}}@media screen and (max-width: 250px){.education-title{font-size:25px}}@media screen and (max-width: 290px){.education-course{font-size:14px;margin:0}}.education-card{background-color:#3a3b4185;max-width:270px;width:100%;box-sizing:border-box;padding:30px;border-radius:7px;transition:transform .5s box-shadow .5s;cursor:pointer}.education-card:hover{transform:translateY(-2px);transition-duration:.5s;box-shadow:0 10px 20px #00000052}.education-card:not(:hover){transform:translateY(2px);transition-duration:.5s}.education-year{color:var(--highlightedText);font-size:14px;padding-bottom:10px}.education-org{display:flex;align-items:center;color:#f5f5f585;font-size:14px;padding-top:10px}.education-org:before{width:5px;height:5px;content:"";display:inline-block;background-color:var(--highlightedText);margin-right:7px;border-radius:10px}.short-text{padding-top:30px}@media screen and (max-width: 345px){.education-card{box-sizing:border-box;margin:0 5px}}@media screen and (max-width: 290px){.education-caption{font-size:13px;margin:10px 0 20px}}@keyframes flicker{0%{color:#03e289}50%{color:#049058}to{color:#03e289}}.about-me{visibility:visible;max-width:680px;width:100%;max-height:600px;box-sizing:border-box}.about-me-title{font-size:26px;font-weight:700;box-sizing:border-box}.about-me-caption{font-size:16px;font-weight:200;color:#aeaeae;margin-bottom:20px;margin-top:20px;padding-right:16px;line-height:1.8}.about-me-card{display:flex;text-align:left;justify-content:space-between;width:96%;box-sizing:border-box;margin:2px;padding:5px}.about-me-info{text-align:left;width:50%;box-sizing:border-box;margin:10px 0;font-size:14px;color:#aeaeae;display:flex;align-items:center}.about-me-info-link{text-align:left;margin-left:15px;font-size:18px;color:#fff;font-weight:200;width:fit-content}.flicker{color:#03e289;animation:flicker 1.8s infinite linear}.flicker:hover{cursor:pointer}.link-hover:hover{color:var(--selectedText);cursor:pointer}@media screen and (max-width: 760px){.about-me-card{width:100%;justify-content:flex-start;gap:0px}.about-me-info{width:fit-content}.about-me-card{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}.about-me-container{display:flex;flex-direction:column;width:100%;justify-content:center;align-items:center}}@media screen and (max-width: 450px){.about-me-caption{box-sizing:border-box;width:100%;padding-right:20px}.about-me{box-sizing:border-box;width:100%}}@media screen and (max-width: 400px){.about-me-info-link{font-size:17px}}@media screen and (max-width: 350px){.about-me-info{font-size:13px}.about-me-info-link{font-size:15px;margin-left:8px}.about-me-caption{font-size:15px}}@media screen and (max-width: 310px){.about-me-info{font-size:12px}.about-me-info-link{font-size:14px;margin-left:8px}}@media screen and (max-width: 290px){.about-me-name{position:absolute;margin-bottom:30px;margin-left:10px}.about-me-info-link{margin-top:10px;margin-bottom:5px}.about-me-caption{font-size:14px}}@media screen and (max-width: 260px){.about-me-info-link{font-size:12px}.about-me-info{font-size:11px}.about-me-caption{font-size:13px}}.skills{visibility:visible;max-width:680px;width:100%;height:600px}.skills-title{font-size:26px;font-weight:700}.skills-caption{width:80%;font-size:16px;font-weight:200;color:#aeaeae;margin-bottom:20px;margin-top:20px;padding-right:16px;line-height:2}.skill-card{display:flex;flex-wrap:wrap;justify-content:flex-start;max-height:460px;height:fit-content;gap:30px;align-items:center;overflow-y:scroll;overflow-x:hidden;padding:5px}.skill-card::-webkit-scrollbar{width:4px}.skill-card::-webkit-scrollbar-thumb{background-color:#3a3a3aab;border-radius:7px}.skill-card::-webkit-scrollbar-thumb:hover{background-color:#00cc7d}.skill-card::-webkit-scrollbar-track{background-color:var(--darkBackground)}@media screen and (max-width: 425px){.skill-card{justify-content:center}.skills-caption{box-sizing:border-box;width:100%;padding-right:20px}}@media screen and (max-width: 310px){.skills-caption{font-size:15px}}@media screen and (max-width: 250px){.skills-caption{font-size:14px}}.skill-svg{padding:30px 40px;background-color:#3a3b4185;width:60px;border-radius:7px;transition:transform .5s box-shadow .5s}.skill-svg>svg{width:60px;height:60px;fill:#fff}.skill-svg:hover>svg,.skill-svg:hover>svg>g,.skill-svg:hover>svg>g>circle,.skill-svg:hover>svg>path{width:60px;height:60px;fill:var(--highlightedText)}.skill-svg:hover{transform:translateY(-2px);transition-duration:.5s;cursor:pointer;box-shadow:0 10px 20px #00000052}.skill-svg:not(:hover){transform:translateY(2px);transition-duration:.5s}.canva:hover>svg>path{fill:#1d1c22}.resume-container{width:100%;display:flex;justify-content:center;align-items:center;min-height:85vh;height:fit-content}.resume{display:flex;justify-content:center;flex-wrap:wrap;width:1254px;height:fit-content;box-sizing:border-box;margin-top:100px}.hero-info-options{width:440px;margin-left:20px;box-sizing:border-box;margin-bottom:20px}.hero-info{max-width:680px;width:100%;height:600px;margin-bottom:20px;margin-right:-10px;box-sizing:border-box}.resume-title{font-size:40px;font-weight:700}.resume-caption{font-size:16px;color:#aeaeae;width:80%;margin-bottom:30px;margin-top:30px;line-height:2}.hero-info-option{font-size:16px;background-color:#3e3e3e85;padding:12px 20px;margin:20px 15% 20px 0;border-radius:7px;text-align:center}.active-option{background-color:var(--highlightedText);color:var(--darkBackground);font-weight:700}.passive-option:hover{background-color:#404040;color:#fff;cursor:pointer}@media screen and (max-width: 1155px){.resume{justify-content:flex-start}.hero-info-options{width:100%}.hero-options-container{display:flex;justify-content:center;width:100%}.hero-info-option{box-sizing:border-box;width:25%;margin:5px 10px 5px 0;height:fit-content}.hero-info{margin-left:60px;margin-top:20px}}@media screen and (max-width: 1000px){.resume{margin-bottom:100px}}@media screen and (max-width: 756px){.hero-info{width:97%;margin:0 0 0 20px;box-sizing:border-box}}@media screen and (max-width: 690px){.hero-info{justify-content:flex-start}.hero-info-option{width:48%}.hero-options-container{justify-content:flex-start;flex-wrap:wrap;width:100%}}@media screen and (max-width: 545px){.hero-options-container{justify-content:flex-start;flex-wrap:wrap;width:100%}.hero-info-option{width:47%}}@media screen and (max-width: 470px){.resume{margin-left:20px}.resume-caption{width:95%}}@media screen and (max-width: 425px){.hero-info{margin:0 3px 20px}.hero-info-options{margin:0 0 20px;width:100%}}@media screen and (max-width: 400px){.hero-info-options{margin-left:0}.resume-caption{width:99%}.hero-info-option{width:46%}}@media screen and (max-width: 350px){.resume-title{font-size:35px}.resume-caption{font-size:14px;margin-bottom:20px;margin-top:10px}}@media screen and (max-width: 300px){.resume-title{font-size:30px}.resume-caption{font-size:13px}}@media screen and (max-width: 270px){.resume-title{font-size:26px}.resume-caption{font-size:13px}}.slider{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:100%;min-height:80vh;height:fit-content}.project-container{display:flex;justify-content:center;align-items:center;max-width:100%;width:100%;box-sizing:border-box;margin-bottom:20px;position:relative;overflow:hidden}.project{display:flex;background-color:#56565626;width:100%;max-width:1100px;border-radius:10px;height:530px}.project-info-container{width:55%;padding-top:10px;height:fit-content}.project-number{font-size:70px;font-weight:750;color:#303037;text-shadow:-1px -1px 0 white,1px -1px 0 white,-1px 1px 0 white,1px 1px 0 white}.project-title{font-size:35px;font-weight:700;margin:20px 0;overflow-x:hidden;text-overflow:ellipsis}.about-project{font-size:16px;color:#aeaeae;margin-bottom:20px;line-height:2;padding-right:10px;height:165px;overflow:hidden;text-overflow:ellipsis}.about-project,.project-no-title{padding-left:20px}.tags{padding-left:20px;display:flex;flex-wrap:wrap}@media screen and (max-width: 1000px){.project{flex-direction:column;height:fit-content}.project-info-container{width:100%;height:fit-content;max-height:70%}.about-project{height:fit-content}.project-number{font-size:50px}.project-title{padding:0 20px}.project-no-title{display:flex;align-items:center}.slider{margin-top:40px}}@media screen and (max-width: 600px){.project-info-container{height:fit-content}.project-title{margin:10px 0}.about-project{font-size:16px;line-height:1.6;margin-bottom:10px}}@media screen and (max-width: 440px){.project-info-container,.project{height:fit-content}.project-number{font-size:35px}.project-title{font-size:29px}.about-project{font-size:15px;line-height:1.5;margin-bottom:10px}}@media screen and (max-width: 400px){.project-info-container{height:fit-content}.project-number{font-size:30px}.project-title{font-size:22px}.about-project{font-size:14px;line-height:1.4}.tags{padding-left:10px}}@media screen and (max-width: 360px){.about-project{font-size:13px}}@media screen and (max-width: 300px){.project-container{width:100%}.project-container>div{height:fit-content;width:80%}}@keyframes slideOutRight{0%{transform:translate(0);opacity:1;visibility:visible}to{transform:translate(100%);opacity:0;visibility:hidden}}@keyframes slideOutLeft{0%{transform:translate(0);opacity:1;visibility:visible}to{transform:translate(-100%);opacity:0;visibility:hidden}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0;visibility:hidden}to{transform:translate(0);opacity:1;visibility:visible}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0;visibility:hidden}to{transform:translate(0);opacity:1;visibility:visible}}.animate-right{animation:slideOutRight .5s cubic-bezier(.4,0,.2,1) forwards}.animate-left{animation:slideOutLeft .5s cubic-bezier(.4,0,.2,1) forwards}.animate-in-right{animation:slideInRight .5s cubic-bezier(.4,0,.2,1) forwards}.animate-in-left{animation:slideInLeft .5s cubic-bezier(.4,0,.2,1) forwards}.change-project-arrow{display:flex;justify-content:center;align-items:center;box-sizing:border-box;height:73vh;padding:18px 10px;cursor:pointer;transition:opacity .3s ease}.change-project-arrow:hover{opacity:.7}.rotateLeftArrow{transform:rotate(180deg)}@media screen and (max-width: 500px){.change-project-arrow>svg{width:30px;height:30px}.change-project-arrow{padding:18px 0}}@media screen and (max-width: 300px){.change-project-arrow{max-width:10%;padding:35vh 0}}.tag{font-size:12px;color:var(--selectedText);border:1px solid var(--selectedText);padding:6px 10px;margin:5px 7px;border-radius:25px}.tag:hover{background-color:var(--selectedText);color:var(--darkBackground);cursor:pointer}@media screen and (max-width: 440px){.tag{font-size:10px;padding:5px 8px;margin:3px}}.project-links{display:flex;border-top:.3px solid rgba(80,80,80,.665);padding-top:20px;padding-left:20px;box-sizing:border-box;padding-bottom:10px;gap:15px;margin:20px 0;width:100%}.project-website-link,.project-github-link{display:block;background-color:#414141;padding:12px 13px 9px;border-radius:50px;transition:transform .5s box-shadow .5s}.project-website-link:hover,.project-github-link:hover{transform:translateY(-2px);transition-duration:.5s;background-color:#fff;cursor:pointer;box-shadow:0 10px 20px #0003}.project-website-link:hover .link-icon,.project-github-link:hover .link-icon{fill:var(--darkBackground)}.project-website-link:not(:hover),.project-github-link:not(:hover){transform:translateY(2px);transition-duration:.5s}@media screen and (max-width: 600px){.project-links{margin:10px 0}}@media screen and (max-width: 440px){.link-icon{width:25px;height:25px}}.project-image-container{display:flex;align-items:center;justify-content:center;width:45%;position:relative;overflow:hidden;border-top-left-radius:10px;border-bottom-left-radius:10px;box-sizing:border-box}.project-image{width:100%;height:100%;box-sizing:border-box;object-fit:cover;object-position:top}.masked-text{padding-top:20px;padding-left:20px;font-size:70px;text-align:center;font-weight:700;position:absolute;top:0;z-index:-1;color:#212121;text-shadow:-1px -1px 0 gray,1px -1px 0 gray,-1px 1px 0 gray,1px 1px 0 gray}@media screen and (max-width: 1000px){.project-image-container{width:100%;height:45vw;border-radius:15px 15px 0 0}.project-image{width:100%;border-top-left-radius:15x;border-top-right-radius:15px;border-bottom-left-radius:0;border-bottom-right-radius:0}.project{border-radius:15px}}.modern-hero-container{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5vh 2vw;box-sizing:border-box;background-color:#121212}.modern-hero-name{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;position:relative}.name-text{display:flex;flex-direction:column;align-items:center;text-align:center}.first-name,.last-name{font-size:clamp(60px,15vw,200px);font-weight:700;letter-spacing:clamp(10px,2vw,25px);color:#bbb;line-height:.95;position:relative;height:clamp(60px,15vw,190px);overflow:visible;width:100%}.first-name .letter{display:inline-block;opacity:0;transform:translateY(-50px);transition:opacity .8s ease-out,transform .8s cubic-bezier(.34,1.56,.64,1);position:relative;white-space:nowrap}.first-name .letter.visible{opacity:1;transform:translateY(0)}.last-name{opacity:0;transform:translateY(50px) scale(.95);transition:opacity .8s ease-out,transform 1s cubic-bezier(.18,1.3,.4,1);white-space:nowrap;transform-origin:center center}.last-name.visible{opacity:1;transform:translateY(0) scale(1)}@keyframes spinY{0%{transform:translate(-50%,-50%) scale(0) rotateY(720deg);opacity:0}70%{transform:translate(-50%,-50%) scale(1.1) rotateY(20deg);opacity:1}85%{transform:translate(-50%,-50%) scale(.95) rotateY(5deg);opacity:1}to{transform:translate(-50%,-50%) scale(1) rotateY(0);opacity:1}}.profile-image-container{width:clamp(60px,8vw,100px);height:clamp(90px,12vw,150px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);border-radius:clamp(30px,4vw,50px);border:2px solid rgb(187,187,187);display:flex;justify-content:center;align-items:center;z-index:2;background-color:#121212b3;opacity:0;perspective:1000px}.profile-image-container.visible{animation:spinY 1.5s cubic-bezier(.25,.1,.25,1) forwards}.profile-image{width:calc(clamp(60px,8vw,100px) - 10px);height:calc(clamp(90px,12vw,150px) - 10px);border-radius:calc(clamp(30px,4vw,50px) - 5px);background-color:#444;background-position:center;background-size:cover;backface-visibility:hidden;transition:transform .8s cubic-bezier(.18,1.3,.4,1)}.profile-image:hover{transform:scale(3)}.social-links{display:flex;justify-content:center;gap:clamp(5px,1vw,15px);margin-top:clamp(30px,5vh,60px)}.social-link{font-size:clamp(12px,1vw,14px);color:#888888a6;cursor:pointer;position:relative;padding-bottom:5px;letter-spacing:2px;display:flex;align-items:center;gap:8px;transition:transform .4s cubic-bezier(.25,.1,.25,1),color .3s ease,border-color .3s ease}.social-link svg{width:clamp(12px,1.2vw,16px);height:clamp(12px,1.2vw,16px);fill:#888888a6;transition:fill .3s ease}.social-link.github,.social-link.linkedin,.social-link.instagram,.social-link.fiverr{background-color:transparent;border:1.5px solid #8888883d;border-radius:50%;width:clamp(30px,3vw,40px);height:clamp(30px,3vw,40px);display:flex;align-items:center;justify-content:center;padding:0}.social-link:hover{color:#121212;border-color:#8888881c;transform:translateY(-5px);background-color:#8888881c}.social-link:hover svg{fill:#bbb}.social-link:after{display:none}.download-cv-button{position:absolute;top:clamp(15px,3vh,30px);right:clamp(15px,3vw,30px);background-color:#7f7f7f21;color:#bbb;border:none;border-radius:30px;padding:4px 44px 4px 2px;font-size:clamp(14px,1.5vw,18px);cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:space-between;overflow:hidden;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 4px 15px #0003;transition:transform .3s ease,box-shadow .3s ease}.download-cv-button-text{padding:15px 25px;position:relative;z-index:2}.download-cv-button .arrow-icon{background-color:#e6e6e6;color:#121212;width:clamp(40px,2.6vw,44px);height:clamp(40px,2.6vw,44px);border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:12px;z-index:1}.download-cv-button .arrow-icon svg{width:16px;height:16px;color:#121212;transition:transform .3s ease}.download-cv-button:hover .arrow-icon svg{animation:moveArrowSvg .6s cubic-bezier(.25,.1,.25,1)}.download-cv-button:not(:hover) .arrow-icon svg{animation:reverseArrowSvg .6s cubic-bezier(.25,.1,.25,1)}.download-cv-button:hover .arrow-icon-container{animation:fillColor .6s cubic-bezier(.25,.1,.25,1);width:230px;right:-10px;height:70px;border-radius:0}.download-cv-button:not(:hover) .arrow-icon-container{animation:reverseFillColor .6s cubic-bezier(.25,.1,.25,1);width:44px;right:10px;height:44px;border-radius:50%}.download-cv-button:hover .download-cv-button-text{color:#121212}.download-cv-button:not(:hover) .download-cv-button-text{color:#bbb}@keyframes moveArrowSvg{0%{transform:translate(0)}40%{transform:translate(10px);opacity:0}41%{transform:translate(-10px);opacity:0}42%{opacity:1}to{transform:translate(0)}}@keyframes fillColor{0%{width:44px;right:10px;height:44px;border-radius:50%}to{width:230px;right:-10px;height:70px;border-radius:0}}@keyframes reverseFillColor{0%{width:230px;right:-10px;height:70px;border-radius:0}to{width:44px;right:10px;height:44px;border-radius:50%}}@keyframes reverseArrowSvg{0%{transform:translate(0)}40%{transform:translate(-10px);opacity:0}41%{transform:translate(10px);opacity:0}42%{opacity:1}to{transform:translate(0)}}.location-indicator{position:absolute;bottom:clamp(15px,3vw,30px);left:clamp(15px,3vw,30px);display:flex;align-items:center;justify-content:center;gap:4px;color:#888888a6;font-family:Cinzel,serif;font-size:clamp(11px,1vw,14px);transition:all .3s ease;z-index:10}.location-indicator svg{width:clamp(12px,1vw,16px);height:clamp(12px,1vw,16px);fill:#888888a6}.location-indicator:hover{color:#ffffffe6}.location-indicator:hover svg{fill:#ffffffe6}@media screen and (max-width: 1000px){.modern-hero-name{flex-direction:column-reverse;gap:10px}.profile-image-container{position:static;transform:scale(0);opacity:0;border-width:1px;border-radius:90px;border-color:#888888a6;width:clamp(120px,16vw,200px);height:clamp(190px,24vw,300px);margin-bottom:0}.profile-image{transform:scale(2.3)}.profile-image:hover{transform:scale(4)}.social-links{margin-top:20px;gap:12px}.profile-image-container.visible{animation:mobileSpinY 1.5s cubic-bezier(.25,.1,.25,1) forwards}@keyframes mobileSpinY{0%{transform:scale(0) rotateY(720deg);opacity:0}70%{transform:scale(1.1) rotateY(20deg);opacity:1}85%{transform:scale(.95) rotateY(5deg);opacity:1}to{transform:scale(1) rotateY(0);opacity:1}}.name-text{margin-top:20px}.social-link.github,.social-link.linkedin,.social-link.instagram,.social-link.fiverr{width:28px;height:28px;border:1px solid #8888883d;color:#8888883d}.social-link svg{width:12px;height:12px;fill:#888888a6;transition:fill .3s ease}.social-link:hover{color:#8888883d;border-color:#8888881c;transform:translateY(-5px)}.social-link:hover svg{fill:#888}}@media screen and (min-width: 700px) and (max-width: 1000px){.profile-image-container{width:clamp(120px,17vw,200px);height:clamp(190px,26vw,300px)}}@media screen and (max-width: 500px){.social-link:hover{color:#8888881c;border-color:#8888881c;transform:translateY(0)}.social-link:hover svg{fill:#888888a6}}@media screen and (max-width: 500px){.download-cv-button{top:clamp(10px,2vh,20px);right:clamp(10px,2vw,20px);padding:2px 40px 2px 1px;font-size:clamp(12px,1.2vw,16px)}.download-cv-button-text{padding:12px 20px}.download-cv-button .arrow-icon{width:clamp(36px,2.4vw,40px);height:clamp(36px,2.4vw,40px);right:5px}.download-cv-button:hover .arrow-icon-container{animation:fillColor .6s cubic-bezier(.25,.1,.25,1);width:180px;right:-5px;height:50px;border-radius:0}.download-cv-button:not(:hover) .arrow-icon-container{animation:reverseFillColor .6s cubic-bezier(.25,.1,.25,1);width:36px;right:5px;height:36px;border-radius:50%}.download-cv-button:hover .arrow-icon-container{width:180px}@keyframes fillColor{0%{width:36px;right:5px;height:36px;border-radius:50%}to{width:180px;right:-5px;height:50px;border-radius:0}}@keyframes reverseFillColor{0%{width:180px;right:-5px;height:50px;border-radius:0}to{width:36px;right:5px;height:36px;border-radius:50%}}}@media screen and (max-width: 350px){.download-cv-button{padding-right:36px;font-size:11px}.download-cv-button-text{padding:10px 15px}.download-cv-button .arrow-icon{width:32px;height:32px;right:8px}.download-cv-button .arrow-icon svg{width:14px;height:14px}.download-cv-button:hover .arrow-icon-container{width:140px;height:50px}@keyframes fillColor{0%{width:32px;right:8px;height:32px;border-radius:50%}to{width:140px;right:-10px;height:50px;border-radius:0}}@keyframes reverseFillColor{0%{width:140px;right:-10px;height:50px;border-radius:0}to{width:32px;right:8px;height:32px;border-radius:50%}}}