@import "https://fonts.googleapis.com/css2?family=Fasthand&display=swap";@import "https://fonts.googleapis.com/css2?family=Gloock&display=swap";@import "https://fonts.googleapis.com/css2?family=Roboto&display=swap";#root,body{margin:0}img{object-fit:contain}html{scroll-behavior:smooth;overflow-x:hidden}section{scroll-margin-top:12vh}.AppHeader{background-color:var(--Color-Background);z-index:10;justify-content:space-between;align-items:center;height:12vh;padding-left:20px;padding-right:20px;display:flex;position:sticky;top:0;box-shadow:0 2px 4px #00000080}.LogoAndNameDiv{cursor:pointer;flex-direction:row;align-items:center;gap:10px;display:flex}.AppHeader>nav{flex-direction:row;align-items:center;gap:30px;display:flex}.NavText{cursor:pointer;transition:opacity .2s}.NavText:hover{opacity:.7}.ChangeLanguageDiv{cursor:pointer;border-radius:50%;width:30px;height:30px}.BurgerButton{cursor:pointer;background:0 0;border:none;padding:5px;display:none}.TrianglesDiv{aspect-ratio:93/69;pointer-events:none;z-index:2;width:clamp(38px,8vw,100px);position:absolute;top:5%;right:clamp(15px,5vw,70px)}.AboutTriangle{aspect-ratio:79/69;width:170%;height:auto;display:block;position:absolute;top:0;left:-30%}.AboutTriangleRotated{top:0;left:70%;transform:rotate(180deg)}.TrianglesBottomLeft{inset:auto auto 15% -2%}.WelcomeTrianglesDiv{aspect-ratio:93/69;pointer-events:none;z-index:1;width:clamp(38px,8vw,100px);position:absolute;top:calc(5% + 12vh);right:clamp(15px,5vw,70px)}.BigTitleForMobile{margin-bottom:0}.WelcomeSection{background-color:var(--Color-Background);text-align:center;flex-direction:row;justify-content:center;align-items:center;width:100%;height:88vh;display:flex;position:relative;overflow:hidden}.WelcomeLeftDiv{z-index:2;align-items:left;flex-direction:column;justify-content:space-between;width:50%;height:100%;margin-left:8%;display:flex;position:relative}.WelcomeTextDiv{align-items:left;flex-direction:column;justify-content:center;gap:20px;display:flex}.WelcomeButtonsDiv{flex-direction:row;gap:30px;margin-bottom:20px;display:flex}.WelcomeRightDiv{z-index:2;justify-content:center;align-items:end;width:50%;height:100%;display:flex;position:relative}.WelcomePicture{object-fit:contain;width:40%;height:auto}.DownArrow{cursor:pointer;z-index:3;margin-left:auto;margin-right:auto;transition:transform .2s;position:absolute;bottom:20px}.DownArrow:hover{transform:translateY(4px)}.AboutMeSection{background-color:var(--Color-Foreground);padding:5% 8% 10%;position:relative;overflow:hidden}.AboutMeTextDiv{flex-direction:column;justify-content:center;align-self:center;align-items:flex-start;gap:20px;width:40%;margin-top:4%;margin-left:auto;margin-right:auto;display:flex}.AboutMeName{color:var(--Color-Background);text-align:center;font-family:Fasthand,cursive;font-size:max(2.5vw,30px);position:absolute;bottom:6%;right:35%;rotate:-15deg}.WhatIDoSection{background-color:var(--Color-Background);padding:5% 8%;position:relative;overflow:hidden}.WhatIDoContainerDiv{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:50px 7%;margin-top:5%;display:grid}.WhatIDoCardDiv{background:radial-gradient(circle, #f7d558, var(--Color-Primary));border:1px solid var(--Color-Background);border-radius:12px;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;padding:20px 20% 20px 20px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 -4px 8px #00000080}.WhatIDoCardDiv:hover{background:radial-gradient(circle, #efd061, var(--Color-Primary))}.WhatIDoSkillsDiv{flex-flow:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.WhatIDoIconDiv{aspect-ratio:1;background-color:var(--Color-Background);border-radius:50%;justify-content:center;align-items:center;width:15%;display:flex;position:absolute;top:-3%;right:-2%}.MyWorkSection{background-color:var(--Color-Foreground);padding:5% 8%;position:relative;overflow:hidden}.MyWorkContainerDiv{flex-flow:wrap;justify-content:space-between;margin-top:5%;margin-left:5%;margin-right:5%;display:flex}.MyWorkCardDiv{border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:0;width:40%;height:100%;transition:transform .3s,box-shadow .3s;display:flex}.MyWorkCardDiv:hover{cursor:pointer;transform:scale(1.01)}.MyWorkCardImageDiv{border-top-left-radius:12px;border-top-right-radius:12px;justify-content:center;align-items:center;width:100%;height:auto;padding:20px 0;display:flex;overflow:hidden}.MyWorkCardInfoDiv{background-color:var(--Color-LightForeground);border-bottom-right-radius:12px;border-bottom-left-radius:12px;flex-direction:column;gap:10px;width:90%;padding:20px 5%;display:flex}.MyWorkCardInfoDiv>div{flex-direction:row;justify-content:space-between;align-items:center;display:flex}.MySkillsSection{background-color:var(--Color-Background);padding:5% 8%;position:relative;overflow:hidden}.MySkillsContainerDiv{grid-template-columns:repeat(4,1fr);justify-content:space-between;gap:50px;margin-top:5%;display:grid}.OneSkillDiv{flex-direction:column;justify-content:center;align-items:center;gap:30px;display:flex}.OneSkillDiv>div{background-color:var(--Color-Foreground);border-radius:50%;padding:20px;transition:transform .3s}.OneSkillDiv>div:hover{transform:scale(1.04)}.MyJourneySection{background-color:var(--Color-Foreground);padding:5% 8%;position:relative;overflow:hidden}.MyJourneyContainerDiv{flex-direction:column;gap:0;margin-top:5%;display:flex}.MyJourneyLineDiv{flex-direction:row;justify-content:space-between;align-items:center;margin-left:5%;margin-right:5%;display:flex}.MyJourneyLineDiv>img{width:20%}.MyJourneyLineDiv>div:not(.MyJourneyLine){background-color:var(--Color-Background);border-radius:12px;flex-direction:column;gap:10px;width:35%;margin-top:20px;margin-bottom:20px;padding:30px;display:flex}.MyJourneyLine{flex-direction:column;justify-content:space-between;align-items:center;gap:10px;width:1%;height:-webkit-fill-available;height:-moz-available;height:stretch;display:flex}.MyJourneyLineTop{background-color:var(--Color-Background);border-bottom-right-radius:12px;border-bottom-left-radius:12px;width:50%;height:100%}.MyJourneyLineCircle{aspect-ratio:1;background-color:var(--Color-Primary);border-radius:50%;width:100%}.MyJourneyLineBottom{background-color:var(--Color-Background);border-top-left-radius:12px;border-top-right-radius:12px;width:50%;height:100%}.ContactMeSection{background-color:var(--Color-Background);padding:5% 8%;position:relative;overflow:hidden}.ContactMeContainerDiv{flex-direction:row;justify-content:space-between;gap:30px;margin-top:2%;display:flex}.ContactMeTextDiv{flex-direction:column;gap:30px;width:60%;display:flex}.ContactMeInfoDiv{flex-direction:column;gap:20px;width:30%;display:flex}.ContactMeInfoDiv>div{cursor:pointer;flex-direction:row;align-items:center;gap:10px;transition:opacity .2s,transform .2s;display:flex}.ContactMeInfoDiv>div:hover{opacity:.75;transform:translate(4px)}section>.ThemedText{z-index:2;position:relative}section>:not(.WaveBackground):not(.TrianglesDiv):not(.DownArrow):not(.AboutMeName),.AppFooter>:not(.WaveBackground):not(.TrianglesDiv){z-index:1;position:relative}.AboutMeName{z-index:2;position:absolute}.AboutMeTextDiv,.WhatIDoContainerDiv,.MyWorkContainerDiv,.MySkillsContainerDiv,.MyJourneyContainerDiv,.ContactMeContainerDiv{z-index:2;position:relative}.AppFooter{background-color:var(--Color-Foreground);flex-direction:column;padding-top:2%;padding-left:5%;padding-right:5%;display:flex;position:relative;overflow:hidden}.FooterTopDiv{align-items:top;flex-direction:row;justify-content:space-between;display:flex}.FooterLeftDiv{align-items:left;flex-direction:column;gap:10px;display:flex}.FooterNavLink{cursor:pointer;transition:opacity .2s,transform .2s}.FooterNavLink:hover{opacity:.75;transform:translate(4px)}.FooterMiddleDiv{align-items:left;flex-direction:column;gap:10px;display:flex}.FooterMiddleDiv>div{cursor:pointer;flex-direction:row;align-items:center;gap:10px;transition:opacity .2s,transform .2s;display:flex}.FooterMiddleDiv>div:hover{opacity:.75;transform:translate(4px)}.FooterRightDiv{align-items:right;flex-direction:column;align-self:flex-end;gap:10px;display:flex}.FooterRightDiv>div{cursor:pointer;flex-direction:row;justify-content:right;gap:10px;display:flex}.FooterBigText{flex:none;align-self:stretch;width:100%;height:auto;margin-top:20px;display:block;position:relative;overflow:hidden;transform:none}@media (width<=768px){section{scroll-margin-top:10vh}.AppHeader{z-index:10;height:10vh;padding:0 20px;position:sticky;top:0}.BurgerButton{justify-content:center;align-items:center;padding:5px;display:flex}.AppHeader>nav{background-color:var(--Color-Background);z-index:100;flex-direction:column;align-items:center;gap:25px;width:100%;padding:30px 0;display:none;position:absolute;top:10vh;left:0;box-shadow:0 4px 8px #0003}.AppHeader>nav.open{display:flex}.WelcomeSection{box-sizing:border-box;flex-direction:column;justify-content:space-between;gap:30px;height:90vh;padding-top:10%;padding-left:5%;padding-right:5%;overflow-x:hidden}.WelcomeSection>div:not(.TrianglesDiv){width:100%}.TrianglesDiv{width:clamp(34px,12vw,60px);top:4%;right:5%}.WelcomeTrianglesDiv{width:clamp(34px,12vw,60px);top:3%;right:5%}.WelcomeLeftDiv{justify-content:center;align-items:center;gap:30px;height:auto;margin-left:0}.WelcomeLeftDiv>div:first-child{display:none}.WelcomeTextDiv{gap:15px;width:100%}.WelcomeTextDiv>div{flex-direction:column;gap:4px;display:flex}.WelcomeButtonsDiv{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;width:100%;margin-bottom:0}.WelcomeRightDiv{justify-content:center;align-items:center;width:100%;height:auto}.WelcomePicture{object-fit:contain;width:min(60vw,220px);height:auto}.DownArrow{width:35px;height:35px;margin:0;bottom:16px;left:50%;transform:translate(-50%)}.DownArrow:hover{transform:translate(-50%)translateY(4px)}.AboutMeSection,.WhatIDoSection,.MyWorkSection,.MySkillsSection,.MyJourneySection,.ContactMeSection{box-sizing:border-box;min-height:auto;padding:15% 6% 18%}section>.ThemedText{text-align:center;margin:0 0 32px;font-size:clamp(2rem,11vw,3.5rem);line-height:1.1}.AboutMeTextDiv{gap:16px;width:100%;margin:0}.AboutMeTextDiv p{font-size:clamp(.95rem,4vw,1.15rem);line-height:1.45}.AboutMeName{font-size:clamp(1.4rem,6vw,2.2rem);bottom:2%;right:12%}.TrianglesBottomLeft{display:none}.BigTitleForMobile{padding-bottom:50px}.WhatIDoContainerDiv{grid-template-rows:none;grid-template-columns:1fr;gap:50px;margin-top:0}.WhatIDoCardDiv{gap:14px;min-height:0;padding:12px 24% 12px 20px}.WhatIDoCardDiv p{font-size:clamp(.95rem,4vw,1.1rem);line-height:1.35}.WhatIDoIconDiv{width:15%;top:-5%;right:-3%}.WhatIDoSkillsDiv{justify-content:flex-start}.MyWorkContainerDiv{flex-direction:column;gap:30px;margin:0}.MyWorkCardDiv{width:100%}.MyWorkCardImageDiv{min-height:0;padding:10px 0}.MyWorkCardImageDiv img{object-fit:contain;width:50%!important}.MyWorkCardInfoDiv{box-sizing:border-box;width:100%;padding:16px 6%}.MyWorkCardInfoDiv p{font-size:clamp(.9rem,3.8vw,1.05rem);line-height:1.35}.MySkillsContainerDiv{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;margin-top:0}.OneSkillDiv{gap:12px}.OneSkillDiv>div{padding:14px}.OneSkillDiv p{text-align:center;font-size:clamp(.9rem,3.8vw,1.05rem)}.MyJourneyContainerDiv{gap:16px;margin-top:0}.MyJourneyLineDiv{grid-template-columns:26px 1fr;grid-template-areas:"line image""line content""line year";align-items:center;gap:12px 14px;margin:0;padding:4px 0 20px;display:grid;position:relative}.MyJourneyLineDiv:last-child{padding-bottom:0}.MyJourneyLineDiv>img{grid-area:image;justify-self:start;width:min(50%,130px)}.MyJourneyLineDiv>div:not(.MyJourneyLine){grid-area:content;gap:8px;width:auto;margin:0;padding:25px}.MyJourneyLineDiv>div:not(.MyJourneyLine) p{font-size:clamp(.9rem,3.7vw,1.05rem);line-height:1.35}.MyJourneyLineDiv>p{grid-area:year;justify-self:start;margin:0;font-size:clamp(1rem,4vw,1.25rem)}.MyJourneyLine{grid-area:line;align-self:stretch;width:8px;min-height:100%}.ContactMeContainerDiv{flex-direction:column;gap:28px;margin-top:0}.ContactMeTextDiv,.ContactMeInfoDiv{width:100%}.ContactMeTextDiv{gap:18px}.ContactMeTextDiv p,.ContactMeInfoDiv p{font-size:clamp(.95rem,4vw,1.1rem);line-height:1.4}.ContactMeInfoDiv{gap:16px}.ContactMeInfoDiv>div{overflow-wrap:anywhere;gap:12px}.ContactMeInfoDiv svg{flex:0 0 22px;width:22px;height:22px}.AppFooter{padding:12% 6% 0}.FooterTopDiv{flex-direction:column;gap:32px}.FooterLeftDiv,.FooterMiddleDiv,.FooterRightDiv{align-items:flex-start;width:100%}.FooterRightDiv{align-self:auto}.FooterRightDiv>div{justify-content:flex-start}.FooterBigText{flex:none;align-self:stretch;width:100%;height:auto;margin-top:20px;display:block;position:relative;overflow:hidden;transform:none}.FooterMiddleDiv svg,.FooterRightDiv svg{width:22px;height:22px}}.button{cursor:pointer;border:none;border-radius:12px;width:fit-content;padding:15px 35px;transition:box-shadow .3s;box-shadow:inset 0 -5px 5px #0000004d}.button:hover{box-shadow:inset 0 -5px 5px #00000080}.WaveBackground{--track-h:clamp(90px, 14vh, 180px);--band-h:clamp(130px, 22vh, 280px);--period:calc(var(--track-h) * 6);--intro-duration:2.8s;--intro-ease:cubic-bezier(.76, 0, .24, 1);pointer-events:none;z-index:0;position:absolute;inset:0;overflow:visible}.WaveBackground[data-direction=top]{transform:scaleY(-1)}.WaveBackground[data-direction=left]{transform:scaleX(-1)}.WaveSlider{will-change:transform;position:absolute}.WaveBackground[data-direction=bottom] .WaveSlider,.WaveBackground[data-direction=top] .WaveSlider{height:calc(100% + var(--band-h));top:0;left:0;right:0}.WaveBackground[data-direction=bottom]:not(.hasIntro) .WaveSlider,.WaveBackground[data-direction=top]:not(.hasIntro) .WaveSlider{transform:translateY(calc(100% - 2 * var(--band-h)))}.WaveBackground[data-direction=bottom].introPending .WaveSlider,.WaveBackground[data-direction=top].introPending .WaveSlider{transform:translateY(0)}.WaveBackground[data-direction=bottom].hasIntro .WaveSlider,.WaveBackground[data-direction=top].hasIntro .WaveSlider{animation:waveSlideInY var(--intro-duration) var(--intro-ease) forwards}@keyframes waveSlideInY{0%{transform:translateY(0)}to{transform:translateY(calc(95% - 2 * var(--band-h)))}}.WaveBackground[data-direction=right] .WaveSlider,.WaveBackground[data-direction=left] .WaveSlider{width:calc(100% + var(--band-h));top:0;bottom:0;left:0}.WaveBackground[data-direction=right]:not(.hasIntro) .WaveSlider,.WaveBackground[data-direction=left]:not(.hasIntro) .WaveSlider{transform:translateX(calc(100% - 2 * var(--band-h)))}.WaveBackground[data-direction=right].introPending .WaveSlider,.WaveBackground[data-direction=left].introPending .WaveSlider{transform:translate(0)}.WaveBackground[data-direction=right].hasIntro .WaveSlider,.WaveBackground[data-direction=left].hasIntro .WaveSlider{animation:waveSlideInX var(--intro-duration) var(--intro-ease) forwards}@keyframes waveSlideInX{0%{transform:translate(0)}to{transform:translateX(calc(70% - 2 * var(--band-h)))}}.WaveBackground[data-direction=bottom] .WaveSolid,.WaveBackground[data-direction=top] .WaveSolid{bottom:0;left:0;right:0;top:calc(var(--track-h) - 8px);background-color:var(--wave-color);position:absolute}.WaveBackground[data-direction=right] .WaveSolid,.WaveBackground[data-direction=left] .WaveSolid{top:0;bottom:0;right:0;left:calc(var(--track-h) - 8px);background-color:var(--wave-color);position:absolute}.WaveBackground[data-direction=bottom] .WaveTrack,.WaveBackground[data-direction=top] .WaveTrack{height:var(--track-h);position:absolute;top:0;left:0;right:0;overflow:hidden}.WaveBackground[data-direction=right] .WaveTrack,.WaveBackground[data-direction=left] .WaveTrack{width:var(--track-h);position:absolute;top:0;bottom:0;left:0;overflow:hidden}.WaveLayer{background-color:var(--wave-color);opacity:1;will-change:transform;position:absolute}.WaveBackground[data-direction=bottom] .WaveLayer,.WaveBackground[data-direction=top] .WaveLayer{width:calc(100% + var(--period));height:100%;-webkit-mask:var(--wave-tile-front,none) 0 0 / var(--period) 100% repeat-x;-webkit-mask:var(--wave-tile-front,none) 0 0 / var(--period) 100% repeat-x;mask:var(--wave-tile-front,none) 0 0 / var(--period) 100% repeat-x;bottom:0;left:0}.WaveBackground[data-direction=right] .WaveLayer,.WaveBackground[data-direction=left] .WaveLayer{width:100%;height:calc(100% + var(--period));-webkit-mask:var(--wave-tile-front,none) 0 0 / 100% var(--period) repeat-y;-webkit-mask:var(--wave-tile-front,none) 0 0 / 100% var(--period) repeat-y;mask:var(--wave-tile-front,none) 0 0 / 100% var(--period) repeat-y;top:0;left:0}@media (prefers-reduced-motion:reduce){.WaveBackground[data-direction=bottom] .WaveSlider,.WaveBackground[data-direction=top] .WaveSlider{transform:translateY(calc(100% - 2 * var(--band-h)));animation:none!important}.WaveBackground[data-direction=right] .WaveSlider,.WaveBackground[data-direction=left] .WaveSlider{transform:translateX(calc(100% - 2 * var(--band-h)));animation:none!important}.WaveLayer{animation:none!important}}