body{scrollbar-width:none;height:100%;margin:0}::-webkit-scrollbar{display:none}:root{--bg-main-color:#02080b;--text-main-color:#fff;--text-muted-color:#868686;--accent-color:#90c370;--muted-color:#868686}::selection{background:var(--accent-color);color:#000}.sectionHeadInfo{text-transform:uppercase;color:var(--accent-color);text-align:center;padding-top:50px;font-family:jetbrains mono,monospace;font-size:20px}.sectionHeadline{text-align:center;text-transform:uppercase;margin-bottom:70px;font-size:80px}.headlineFitter{color:var(--accent-color);font-family:inter,sans-serif}.headlineContent{color:var(--text-main-color);font-family:jetbrains mono,monospace;font-weight:700}#skills{position:sticky;top:0}#about,#contact{position:relative}.heroSection{height:100vh;position:relative;overflow:hidden}.layer{pointer-events:none;width:100%;height:100%;position:absolute;left:0}.nameContainer{width:fit-content;height:fit-content;font-family:jetbrains mono,monospace;position:absolute;top:30%;left:8%}.greeting{color:var(--text-muted-color);margin:0;padding-left:20px;font-size:36px}.name{color:var(--text-main-color);margin:0;font-size:96px;font-weight:500}.nameDivider{background:var(--accent-color);width:100px;height:2px;margin-left:20px}.txt{width:400px;color:var(--text-muted-color);padding-left:20px;font-size:24px}.scroll{color:var(--text-muted-color);flex-direction:row;justify-content:center;align-items:center;gap:10px;font-family:jetbrains mono,monospace;display:flex;position:absolute;top:80%;left:17%}.scrollImg{width:28px;animation:2s infinite ArrowJump}.scrollSpan{font-size:20px}@keyframes ArrowJump{0%{transform:translateY(0)}20%{transform:translateY(10px)}40%{transform:translateY(0)}60%{transform:translateY(10px)}80%{transform:translateY(0)}}.quoteSection{background:var(--bg-main-color);width:100%;height:fit-content;padding:200px 0 250px;position:relative}.quoteMask{margin-left:8%;overflow:hidden}.quoteMask span{transition:transform .7s ease-out;display:inline-block;transform:translateY(200%)}.quoteMask.show span{transform:translateY(0%)}.quote{color:var(--text-muted-color);justify-self:center;margin-right:40px;font-family:inter,sans-serif;font-size:90px;font-weight:700}.quote.show{transform:translateY(0)}.quote strong{color:var(--text-main-color);font-weight:700}.quote em{color:var(--accent-color);font-weight:700}.skillsSection{width:100%;height:960px;position:relative}.skills{grid-template-rows:50% 30px 40%;grid-template-columns:1fr 30px 1fr;justify-self:center;width:70%;height:65%;margin-top:3%;display:grid}.gridElement{opacity:0;background:#050b0e;border:1px solid #80808080;border-radius:15px;flex-direction:column;gap:20px;padding:15px;transition:all .1s ease-in-out;display:flex;transform:translateY(40px)}.gridElement.show:hover{border:1px solid #808080e6;transform:scale(1.01)}.gridElement.show:hover .skillCardSpacer{background:var(--accent-color)}.gridElement.show{opacity:1;transform:translateY(0)}#el1{grid-area:1/1/2/2}#el2{grid-area:1/3/2/4}#el3{grid-area:3/1/4/2}#el4{grid-area:3/3/4/4}.gridElementHeader{text-transform:uppercase;color:var(--text-muted-color);flex-direction:row;align-items:center;gap:20px;font-family:Jetbrains Mono,monospace;font-size:40px;font-weight:200;display:flex}.skillCardSpacer{background-color:#80808080;width:75px;height:2px;transition:all .2s ease-in-out}.gridElementContent{flex-wrap:wrap;gap:10px 20px;display:flex}.skill{color:var(--text-main-color);cursor:default;flex-direction:row;align-items:center;gap:7px;padding:10px 20px;font-family:Jetbrains Mono,monospace;font-size:18px;transition:all .1s ease-in-out;display:flex}.skill:hover{background:#ffffff0f;border-radius:10px;transform:translateY(-2px)}.aboutSection{background:var(--bg-main-color);border-top:1px solid var(--muted-color);height:1080px}.content{justify-content:center;gap:50px;height:80%;margin-top:50px;display:flex}.img-card{border:1px solid #868686;border-radius:20px;justify-content:center;align-items:center;width:600px;height:830px;display:flex;overflow:hidden}.img-card img{width:100%;height:100%;transition:all .5s}.img-card img:hover{transform:scale(1.1)}.about-card{width:700px;height:80%;padding:32px;position:relative;overflow:hidden}.line{background:var(--accent-color);width:100px;height:2px;margin:20px 0}.about-card span{text-transform:uppercase;color:var(--text-main-color);font-family:jetbrains mono,monospace;font-size:56px;font-weight:200}.about-card em{text-transform:uppercase;color:var(--accent-color);font-family:jetbrains mono,monospace;font-size:56px;font-style:normal;font-weight:600}.about-card p{word-spacing:5px;color:var(--text-muted-color);font-family:Inter,sans-serif;font-size:20px;font-weight:300}.about-card strong{color:var(--text-main-color)}.formula-btn{justify-content:center;margin-top:20px;display:flex}.formula-btn img{width:30px;height:30px}.formula-btn span{color:var(--text-muted-color);font-family:Inter,sans-serif;font-size:18px;font-weight:300}.formula-btn button{text-align:center;width:40%;height:fit-content;color:var(--text-main-color);cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;justify-self:center;gap:5px;padding-right:10px;font-family:Inter,sans-serif;font-size:20px;font-weight:600;transition:all .1s ease-in-out;display:flex}.formula-btn button:hover{color:var(--accent-color)}.formula-btn button:hover path{stroke:var(--accent-color);transform:translate(5px)}.formula-btn button:active{transform:scale(.98)}.formula-btn button path{transition:all .1s}.imgBase{width:20px;height:20px}.imgShow{opacity:0;width:20px;height:20px;margin-left:-30px;transition:opacity .3s}.projectsSection{border-top:1px solid var(--muted-color);background:#02080b;width:100vw;height:fit-content;min-height:900px;padding-bottom:50px;position:relative}.projects{flex-direction:column;justify-content:space-around;justify-self:center;align-items:center;gap:50px;width:80%;height:auto;margin-top:2%;display:flex}.project1,.project2,.project3{width:100%;transition:all .1s ease-in-out}:is(.project1,.project2,.project3):not(.active){cursor:pointer}:is(.project1,.project2,.project3):not(.active):hover{transform:scale(1.02)}.projectWrapper{flex-direction:row;justify-content:space-between;display:flex}.projectInfo{text-transform:uppercase;color:var(--muted-color);font-family:Jetbrains mono,sans-serif;font-size:15px;font-weight:400}.projectName{text-transform:uppercase;color:var(--text-main-color);font-family:Inter,sans-serif;font-size:40px;font-weight:500}.projectContent{opacity:0;justify-content:space-around;align-items:center;width:100%;height:0;transition:all .5s;display:flex;overflow:hidden}.projectContent.active{opacity:1;justify-content:space-around;align-items:center;width:100%;height:500px;display:flex}.imgSlider{aspect-ratio:16/9;border-radius:15px;width:50%;overflow:hidden}.imgDescription{aspect-ratio:16/9;border:1px solid red;width:40%}.projectLine{background:var(--muted-color);width:100%;height:2px}.projectLineImg{background:var(--bg-main-color);opacity:1;justify-self:center;width:30px;height:20px;margin-top:-9px;padding:0 5px;display:flex;position:absolute}.projectLineImg.active{opacity:0;background:var(--muted-color);width:100%;height:2px}.tools{align-items:center;gap:10px;display:flex}.tool{width:auto;height:fit-content;color:var(--text-muted-color);border-radius:10px;align-items:center;gap:5px;padding:5px 10px;font-family:jetbrains mono,monospace;font-size:15px;font-weight:500;display:flex}*,:before,:after{box-sizing:border-box}.imgSliderImg{object-fit:cover;flex-grow:0;flex-shrink:0;width:100%;height:100%;transition:translate .3s ease-in-out;display:block}.imgSliderBtnLeft{all:unset;cursor:pointer;position:absolute;top:45%;left:0}.imgSliderBtnRight{all:unset;cursor:pointer;position:absolute;top:45%;right:0}.imgSliderArrow{width:30px;height:30px;transition:all .1s ease-in-out}.imgSliderArrow:hover{transform:scale(1.2)}.imgSliderSlider{background:var(--muted-color);cursor:pointer;border:none;border-radius:5px;outline:none;width:40px;height:5px;transition:all .1s ease-in-out}.contactSection{background:var(--bg-main-color);border-top:1px solid var(--muted-color);width:100%;height:90vh}.hook{width:100%;height:200px;color:var(--text-main-color);font-family:Inter,sans-serif;font-size:64px;font-weight:700}.hook em{color:var(--accent-color)}.containerWrapper{justify-content:space-between;justify-self:center;width:80%;margin-top:6%;margin-bottom:3%;display:flex}.containerLeft{flex-direction:column;gap:20px;width:45%;height:fit-content;display:flex}.contactItemSpacer{background:#80808080;width:90%;height:1px}.contactItem{color:var(--text-main-color);align-items:center;gap:10px;font-family:Inter,sans-serif;font-size:30px;font-weight:400;display:flex}.contactItem p{color:var(--text-muted-color);text-transform:uppercase;margin:0;font-family:Jetbrains Mono,monospace;font-size:16px;font-weight:400}.contactItem span{color:var(--text-main-color);font-family:Inter,sans-serif;font-size:22px;font-weight:400}.contactItem img{background:#3f3f3f1a;border:1px solid #80808080;border-radius:10px;width:60px;height:60px;padding:15px}.contactInfo{border:1px solid var(--muted-color);background:#3f3f3f4d;border-radius:15px;width:100%;height:80%}.containerSpacer{background:#80808080;width:1px}.containerRight{flex-direction:column;justify-content:space-between;gap:10px;width:45%;display:flex}.inputGroupSpan{text-transform:uppercase;color:var(--text-muted-color);margin-bottom:5px;padding-left:15px;font-family:jetbrains mono,monospace;font-size:16px}.containerRight input,.containerRight textarea{background:#3f3f3f1a;border:1px solid #80808080;border-radius:15px;width:100%;margin-top:5px;padding-left:15px;font-family:inter,sans-serif;font-size:16px;transition:all .3s}.containerRight input:focus,.containerRight textarea:focus{border:1px solid #fff}.inputGroup{width:100%;position:relative}.inputGroup input{color:#fff;outline:none;height:60px;font-size:16px}.inputGroup textarea{color:#fff;outline:none;height:167px;padding-top:15px;font-size:16px}.contactFormularSubmitButton{text-align:center;width:20%;height:fit-content;color:var(--text-main-color);cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;justify-self:center;gap:5px;padding-right:10px;font-family:Inter,sans-serif;font-size:20px;font-weight:600;transition:all .1s ease-in-out;display:flex}.contactFormularSubmitButton:hover{color:var(--accent-color)}.contactFormularSubmitButton:hover path{stroke:var(--accent-color);transform:translate(5px)}.contactFormularSubmitButton:active{transform:scale(.98)}.contactFormularSubmitButton path{transition:all .1s ease-in-out}.footerSection{background:var(--bg-main-color);border-top:1px solid var(--muted-color);justify-content:center;align-items:center;width:100%;height:100px;display:flex;position:absolute}.footerItem1,.footerItem2,.footerItem3{width:30%}.footerItem2{flex-direction:column;align-items:center;display:flex}.footerItem2 p{color:var(--text-muted-color);cursor:pointer;margin:0;font-family:inter,sans-serif;font-size:16px;font-weight:400}.footerItem3{justify-content:end;display:flex}.footerSection span{color:var(--text-main-color);font-family:inter,sans-serif;font-size:16px;font-weight:400}.linkIcons svg{color:#fff;cursor:pointer;padding-right:10px;transition:all .3s}.linkIcons svg:hover{color:var(--accent-color)}.scrollUpImg{cursor:pointer;width:28px;animation:2s infinite ArrowJump;rotate:180deg}
