.open{display:block!important}.top-main{background-image:var(--gradient__header);min-height:100vh;padding-top:8rem}.wrapper__top-main{display:flex;align-items:center;justify-content:space-between}.left__top-main,.right__top-main{flex-basis:50%}.left__top-main,.open-text{flex-direction:column;display:flex}.left__top-main{gap:2rem}.top-main__text,.top-main__title{color:var(--primary__black)}.version-header{min-height:35px;font-size:14px;min-width:110px}.top-main__title{font-size:76px;font-family:var(--bold-font),serif;font-weight:600;max-width:520px;line-height:100px}.top-main__text{font-size:20px;max-width:500px;opacity:.8}.cta-index-header{display:flex;align-items:center;justify-content:start;margin-top:2rem;gap:1rem}.cta-index-header a{margin:0}html.dark .cta-index-header a:last-child{color:#fff}.right__top-main{position:relative}.top-main__image{max-width:690px;animation:4s infinite translate-img}.top-main__img-1{max-width:220px;position:absolute;left:-10%}.top-main__img-1::before{content:"";position:absolute;top:50%;left:50%;width:20%;height:20%;transform:translate(-50%,-50%);background-color:#000}.top-main__img-2{position:absolute;max-width:240px;bottom:-8%;right:-13%}@keyframes translate-img{50%{transform:translateY(-30px)}}.middle-main{padding:3rem 0 8rem;background-image:var(--gradient__main)}.terminal{min-height:320px;direction:ltr;background:var(--primary__bc-grey);padding:30px;border-radius:12px;color:#d0d2da;box-shadow:0 0 40px rgba(0,255,145,.3);font-size:1.3rem;transition:2s;position:relative;background:#0d1117;overflow:hidden}.terminal__matrix-img{height:100%;position:absolute;inset:0;width:100%;object-fit:cover;opacity:0;visibility:hidden;transition:.4s}.button-animate,.code-line,.js-code,.terminal-content{position:relative}.button-animate,.code-line,.js-code{width:fit-content}.active-matrix{visibility:visible;opacity:.115;animation:6s steps(6,end) forwards matrixGlitch}@keyframes matrixGlitch{0%,20%,40%,60%,80%{opacity:.1;transform:scale(1.01) translate(1px,-1px) skew(.5deg)}10%,30%,50%,70%,90%{opacity:.12;transform:scale(1.005) translate(-1px,1px) skew(-.5deg)}100%{opacity:0;transform:none}}.terminal-content{z-index:1}.terminal-events{transition:3s;transform:rotateX(360deg)}.code-line svg{width:18px;height:18px;fill:var(--green__code)}.code-line{align-items:baseline!important;color:var(--green__code);animation:6s steps(2,end) infinite glitch;animation-delay:4s}.code-line__no-animation{animation:unset}@keyframes glitch{5%{transform:translate(40px,60px);color:#5e5f64}10%{transform:translate(0,2px)}15%{transform:translate(2px,0)}20%{transform:scale(.98)}25%{transform:translate(1px,-2px)}30%{transform:translate(0);color:var(--green__code)}100%{transform:translate(0)}}.terminal__code-wrapper{font-family:monospace}.button-animate{margin-top:1.5rem;color:#fff}.js-code{margin-top:.7rem}.button-animate,.code-line,.js-code{display:flex;align-items:flex-start;gap:.5rem;color:var(--green__code)}.button-animate,.js-code{min-height:32px}.button-animate::after,.js-code::after{content:"";position:absolute;display:block;background-color:rgba(0,255,145,.8);height:100%;width:2px;top:50%;right:-4px;transform:translateY(-50%);animation:.75s step-end infinite typingMode}.fa-face-sad-cry{color:#ff8c00;z-index:2;position:absolute;top:2px;left:0;animation:2s linear infinite translate-emoji;transform-origin:center}@keyframes translate-emoji{50%{transform:translateX(850%) scale(1)}}.rotating-btn-wrapper{width:fit-content;margin-top:1rem;position:relative;opacity:0;pointer-events:none;transform:translateY(-100%);transition:.5s linear;color:var(--green__code)}.rotating-btn{color:inherit;position:relative;padding:12px 24px;border:none;border-radius:8px;box-shadow:0 0 4px #000;background:0 0;font-size:16px;cursor:pointer;z-index:1;overflow:hidden}.js-ball,.webstorm-wrapper p{box-shadow:var(--inset-shadow)}.rotating-btn::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:var(--green__code);animation:5s linear infinite rotateGradient;z-index:-1}.rotating-btn::after{content:"";position:absolute;inset:2px;background-color:#111;border-radius:6px;z-index:-1}.active{transform:translateY(0);opacity:1;pointer-events:all}.un-active{position:absolute;animation:4s forwards unActive}@keyframes unActive{100%{visibility:hidden;opacity:0;pointer-events:none}}@keyframes moveGradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes rotateGradient{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes typingMode{100%,from,to{background-color:transparent}50%{background-color:rgba(0,255,145,.8)}}.open-text{padding-top:1.5rem;position:absolute;opacity:0;visibility:hidden;pointer-events:none;transition:3s ease-in-out;gap:1.5rem}.active-text{position:unset;opacity:1;pointer-events:all;visibility:visible}.open-text__p-wrapper{display:flex;gap:.4rem}.about-skills{position:relative;margin:3rem 0 4rem}.about-skills__img-wrapper{left:5px;top:5px}.about-skills-wrapper{opacity:0;padding:2rem 1rem}.about-skills-wrapper-animate{animation:1.4s forwards fadeInUp}@keyframes fadeInUp{from{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}.about-skills__title-wrapper{max-width:800px;place-self:center;text-align:center;margin:auto}.about-skills__title-wrapper h4{margin-bottom:.5rem}.about-skills__title{line-height:28px;margin-top:1.5rem}.about-skills__list{max-width:800px;margin:6rem auto}.bottom-main{color:var(--primary__gery-header);padding-bottom:2rem;background-color:var(--background)}.webstorm-wrapper{text-align:center;display:flex;flex-direction:column;gap:3rem;align-items:center;padding-top:2rem}.webstorm-wrapper h2{font-size:26px}.note-editor{overflow:hidden;position:relative}.note-editor img{width:100%;max-height:360px;border-radius:34px}#js-ball-container{bottom:2.5%;right:1%;position:absolute;display:flex;justify-content:center;align-items:flex-start}.js-ball{opacity:0;visibility:hidden;width:50px;height:50px;background-color:#a5c9bd;border-radius:50%;font-family:FontAwesome,serif;font-weight:700;color:#3d4150;display:flex;align-items:center;justify-content:center}.js-ball-animate{animation:10ms linear 2.99s forwards jsAppear,2.2s ease-out 3s forwards jsBounce,1s ease-in-out 5.6s forwards jsRoll,.8s ease-in-out 6.7s forwards jsSettle}@keyframes jsAppear{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}@keyframes jsBounce{0%{transform:translateY(-200px)}100%,20%,50%,74%,90%{transform:translateY(0)}35%{transform:translateY(-80px)}62%{transform:translateY(-40px)}82%{transform:translateY(-20px)}95%{transform:translateY(-8px)}}@keyframes jsRoll{0%{transform:translateX(0) rotate(0)}25%{transform:translateX(-100%) rotate(-200deg)}50%{transform:translateX(-180%) rotate(-300deg)}75%{transform:translateX(-250%) rotate(-450deg)}100%{transform:translateX(-300%) rotate(-600deg)}}@keyframes jsSettle{from{transform:translateX(-300%) rotate(-600deg)}to{transform:translateX(-300%) rotate(0)}}.code-css,.code-html,.code-js{visibility:hidden;pointer-events:none;opacity:0;position:absolute;direction:ltr;font-family:'Font Awesome 6 Free',serif;font-size:11px;padding:8px 10px;border-radius:18px;display:inline-block;white-space:nowrap;transition:1s;border:none;background-blend-mode:soft-light}.code-html{color:#b6495e;left:23%;top:42%;transform:translateX(-150%)}.code-css{color:#4970b6;left:17%;top:52%;transform:translateX(130%);transition-delay:1s}.code-js{color:#a58f31;bottom:30%;left:16%;transform:translateY(270%);transition-delay:2s}.back-to-inset{opacity:1;visibility:visible;pointer-events:all;transform:translate(0,0)}.webstorm-wrapper span{margin:1.6rem 0 0;font-size:14px}.go-to__about-site span,.webstorm-wrapper p{margin-top:1rem;line-height:2rem;max-width:800px;font-size:18px}.webstorm-wrapper p{padding:2rem}.webstorm-coding-wrapper img{width:100%}.webstorm-css-coding,.webstorm-html-coding{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;max-width:100%;transition:2.5s;z-index:1}.webstorm-js-coding img{display:block;margin:0 auto;max-width:60%;transition:.4s;z-index:2;position:relative}.webstorm-coding-wrapper{padding:15rem 0 18rem;position:relative}.webstorm-coding-wrapper.show-html .webstorm-html-coding{opacity:1;transform:translate(0,20%);max-width:70%}.webstorm-coding-wrapper.show-css .webstorm-css-coding{opacity:1;transform:translate(-100%,-100%);max-width:70%}.go-to__about-site{text-align:center;place-self:center;background-color:#2f4f4f;padding:2rem;border-radius:12px;margin:2rem auto;color:#fff}.go-to__about-site span{margin-bottom:2rem;display:block;text-align:center;justify-self:center;margin-left:auto;margin-right:auto}.go-to__about-site a{color:#fff;justify-self:center}.go-to__about-site a:hover{color:#fff;background-color:#343538}.call-to-action__CTA-X{margin-top:3rem}@media only screen and (max-width:1700px){.top-main__image{max-width:600px}.top-main__img-1,.top-main__img-2{max-width:160px}.top-main__img-1{left:0}.top-main__img-2{right:0}}@media only screen and (max-width:1450px){.open-text{gap:.7rem;font-size:1.2rem}}@media only screen and (min-width:1400px){.text-box-grey-index{margin:0!important}}@media only screen and (max-width:1400px){.about-skills,.top-main__title{margin-top:2rem}.top-main__img{max-width:550px}.top-main__img-1{left:-10%}.top-main__img-2{bottom:0}.wrapper__top-main{gap:6rem;flex-direction:column-reverse}.cta-index-header{justify-content:center;gap:2rem}.cta-index-header a{flex-basis:50%}.version-header{align-self:center}.left__top-main{text-align:center}}@media only screen and (max-width:1332px){.open-text{gap:1rem}.open-text__p-wrapper{font-size:1.1rem}}@media only screen and (max-width:1230px){.open-text__p-wrapper{font-size:1rem}}@media only screen and (max-width:1100px){.webstorm-coding-wrapper{padding:9rem 0 15rem}.webstorm-coding-wrapper.show-css .webstorm-css-coding{opacity:1;transform:translate(-100%,-114%)}.webstorm-coding-wrapper.show-html .webstorm-html-coding{opacity:1;transform:translate(0,10%)}}@media only screen and (max-width:780px){.webstorm-coding-wrapper{padding:5rem 0 12rem}}@media only screen and (max-width:760px){.top-main__img-1{max-width:120px;left:0}.top-main__img-2{bottom:-2%}}@media only screen and (max-width:620px){.top-main__image{max-width:460px}.top-main__img-1{top:-6%}.top-main__img-2{bottom:-6%}.about-skills__title{margin-top:3rem}}@media only screen and (max-width:600px){.go-to__about-site span{max-width:400px!important;display:block;justify-self:center}}@media only screen and (max-width:570px){.button-animate,.js-code{min-height:20px;font-size:1rem}}@media only screen and (max-width:550px){.webstorm-coding-wrapper{padding:5rem 0 8rem}}@media only screen and (max-width:500px){.about-skills__title:last-child{font-size:14px}}@media only screen and (max-width:480px){.top-main{min-height:auto;padding-bottom:2rem}.top-main__image{max-width:340px}.top-main__img-1,.top-main__img-2{max-width:110px}.top-main__img-1{top:-13%}.top-main__img-2{bottom:-6%}.top-main__title{line-height:60px}.top-main__text{font-size:20px}.button-animate,.js-code{font-family:'dana medium',serif}}@media only screen and (max-width:430px){.top-main__image{max-width:300px}.top-main__img-1{top:-16%}.top-main__text{font-size:18px}.terminal{font-size:1.1rem}.webstorm-coding-wrapper{padding:5rem 0}.webstorm-wrapper p{font-size:15px}.webstorm-wrapper{font-size:13px}.code-css,.code-html,.code-js{font-family:'dana medium',serif;font-size:.8rem}.code-html{left:28%}.code-js{bottom:28%;left:24%}.code-css{left:25%}}@media only screen and (max-width:380px){.cta-index-header{flex-direction:column-reverse}.top-main__image{max-width:260px}.top-main__img-1{max-width:90px;top:-20%}.top-main__img-2{bottom:-12%}.rotating-btn-wrapper{place-self:center;margin-top:2.5rem}.button-animate,.js-code{min-height:16px;font-size:.8rem}.go-to__about-site a,.rotating-btn{font-size:.8rem}.webstorm-wrapper p{padding:1rem .5rem}.code-html{top:41%;left:26%}.code-js{left:21%}.code-css{top:51%;left:23%}.js-ball{width:45px;height:45px}.go-to__about-site span{font-size:15px}}@media only screen and (max-width:350px){.top-main__text{font-size:16px;font-weight:500}.code-css{left:21%}.code-html{top:40%;left:25%}.code-js{left:19%}#js-ball-container{bottom:2.7%}.js-ball{width:40px;height:40px}}@media only screen and (max-width:330px){.top-main__image{max-width:220px}.top-main__img-2{max-width:80px}.terminal-wrapper{font-size:1rem}.top-main__img-1{top:-26%}.code-js{left:16%;bottom:27%}.code-css{left:18%;top:50%}.code-html{left:23%}}@media only screen and (max-width:320px){.button-animate,.js-code{font-size:.7rem;letter-spacing:.025rem}#js-ball-container{bottom:3%}.js-ball{width:38px;height:37px}}