@import"https://fonts.googleapis.com/css2?family=IM+Fell+Great+Primer&family=Source+Code+Pro:wght@400;600;700&display=swap";body{margin:0;font-family:Source Code Pro,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;transition:.6s ease-in-out;-webkit-tap-highlight-color:transparent}.row{display:flex;flex-direction:row}.FullArea{display:flex;justify-content:center;align-items:center;padding:35px;box-sizing:border-box;width:100%;min-height:100vh}img{image-rendering:smooth}.MainContainer{position:absolute;width:calc(100vw - 70px);height:calc(100vh - 70px);max-width:1400px;max-height:650px;box-shadow:0 0 20px #0000001a;border-radius:30px;background-color:#0000}.left-container{border-radius:30px;width:100vh;max-width:650px;height:100%}.right-container{height:100%;display:flex;flex:1;flex-direction:column;justify-content:space-between;box-sizing:border-box;padding:20px}header{display:flex;flex:1;max-height:40px;width:100%;justify-content:space-between;align-items:center}header p{margin:0}header b{color:#951010}.name-font{font-family:IM FELL Great Primer,serif;font-size:20px}.color-mode-button{display:flex;align-items:center;width:70px;height:30px;box-shadow:inset 0 1px 5px #0000001a;border-radius:200px;padding:5px;box-sizing:border-box}.color-mode-button:hover{cursor:pointer}.light-mode-active{background-color:#fffbd7}.dark-mode-active{background-color:#387788}.color-mode-button-inner-circle{width:25px;height:25px;border-radius:100px}.inner-circle-yellow{background-color:#f6e252}.inner-circle-gray{background-color:#e4e4e4}footer{display:flex;flex-direction:row;color:#b44d5a}footer p{margin:0 30px 0 0;font-weight:700}footer p:hover{cursor:pointer;text-decoration:underline}.page-title{font-weight:700;color:#354d79;font-size:40px}.page-title p{margin:0}.home-welcome-text{font-family:IM FELL Great Primer,serif;font-weight:400;color:#404b5a}.settings{display:flex;gap:10px;align-items:center}@media (max-width: 820px){.FullArea{display:flex;padding:20px;height:100%;min-height:min-content;justify-content:center;align-items:center;overflow-y:scroll}.MainContainer{position:relative;width:100%;height:auto;min-height:calc(100vh - 40px);max-width:100%;max-height:none;display:flex;flex-direction:column-reverse;justify-content:space-between}.left-container{width:100%;max-width:100%;min-width:min-content;height:min-content;border-radius:30px 30px 0 0}.right-container{width:100%;min-height:35vh;padding:20px 15px;border-radius:0 0 30px 30px;align-items:start;justify-content:space-between}header{flex-direction:row;align-items:center;max-height:60px;justify-content:space-between}header>div:first-child{width:100%}header>div:last-child{display:flex;justify-content:flex-end}.settings{width:min-content;flex-direction:column}.menu p{font-size:12px;margin:0 6px 0 0}footer{flex-wrap:wrap;gap:10px;justify-content:center}footer p{margin:0 15px 10px 0;font-size:14px}.page-title{font-size:28px}.color-mode-button{width:60px;height:28px}.color-mode-button-inner-circle{width:22px;height:22px}.name-font{font-size:16px}.mobile-tag{margin-top:4px;font-size:14px}.home-welcome-text{font-size:24px}}@keyframes rotate-phone{0%{transform:rotate(-90deg)}40%{transform:rotate(0)}75%{transform:rotate(0)}to{transform:rotate(-90deg)}}.rotate-icon{animation:rotate-phone 4s ease-in-out infinite}.lightToDark-animation{animation:lightToDark-background-keyframes .3s ease-in forwards}.darkToLight-animation{animation:darkToLight-background-keyframes .3s ease-in forwards}.activate-button-animation{animation:activate-color-button .3s ease-in forwards}.deactivate-button-animation{animation:deactivate-color-button .3s ease-in forwards}.photo-animation{animation:photo-keyframes 5s ease-in-out infinite alternate}.circle1-animation{animation:circle1-keyframes 5s ease-in-out infinite alternate,circle-size-keyframes 3s ease-in-out infinite alternate}.circle2-animation{animation:circle2-keyframes 6s ease-in-out infinite alternate,circle-size-keyframes 2s ease-in-out infinite alternate}.circle3-animation{animation:circle3-keyframes 5.5s ease-in-out infinite alternate,circle-size-keyframes 3.5s ease-in-out infinite alternate}.circle4-animation{animation:circle4-keyframes 4s ease-in-out infinite alternate,circle-size-keyframes 2s ease-in-out infinite alternate}.sea-wave-animation{animation:sea-wave-keyframes 3s ease-in-out infinite alternate}.good-morning-animation{animation:good-morning-keyframes .4s ease-in forwards}.good-night-animation{animation:good-night-keyframes .4s ease-in forwards}.cloud-animation{animation:cloud-keyframes 12s ease-in infinite;opacity:0}.delay4-animation{animation-delay:4s}.delay2-animation{animation-delay:2s}.slide-in-background-animation{animation:background-slide-in-keyframes 1s ease-in-out forwards}.slide-out-background-animation{animation:background-slide-out-keyframes 1s ease-in-out forwards}.project-container-fade-in-animation{animation:good-morning-keyframes 5.8s ease-in-out forwards;animation-delay:.8s}.project-title-fade-in-animation{animation:good-morning-keyframes .8s ease-in-out forwards;animation-delay:1.2s}.project-title-fade-out-animation{animation:good-night-keyframes .8s ease-in-out forwards}.page-out-transition{animation:good-night-keyframes .4s ease-in forwards}.page-in-transition{animation:good-morning-keyframes .4s ease-in forwards}@media (max-width: 820px){.activate-button-animation{animation:mobile-activate-color-button .3s ease-in forwards}.deactivate-button-animation{animation:mobile-deactivate-color-button .3s ease-in forwards}}@keyframes lightToDark-background-keyframes{0%{background-color:#fff}to{background-color:#323232}}@keyframes darkToLight-background-keyframes{0%{background-color:#323232}to{background-color:#fff}}@keyframes activate-color-button{0%{margin-left:0}to{margin-left:37px}}@keyframes deactivate-color-button{0%{margin-left:37px}to{margin-left:0}}@keyframes mobile-activate-color-button{0%{margin-left:0}to{margin-left:28px}}@keyframes mobile-deactivate-color-button{0%{margin-left:28px}to{margin-left:0}}@keyframes photo-keyframes{0%{transform:scale(1)}to{transform:scale(1.05)}}@keyframes circle-size-keyframes{0%{transform:scale(1)}to{transform:scale(.5)}}@keyframes circle1-keyframes{0%{margin-left:-150px;margin-top:-20px}to{margin-left:-90px;margin-top:-100px}}@keyframes circle2-keyframes{0%{margin-left:-100px;margin-top:80px}to{margin-left:-170px;margin-top:100px}}@keyframes circle3-keyframes{0%{margin-left:100px;margin-top:-80px}to{margin-left:170px;margin-top:-55px}}@keyframes circle4-keyframes{0%{margin-left:100px;margin-top:70px}to{margin-left:170px;margin-top:85px}}@keyframes sea-wave-keyframes{0%{transform:translate(-5px)}to{transform:translate(15px)}}@keyframes good-morning-keyframes{0%{opacity:0%}to{opacity:100%}}@keyframes good-night-keyframes{0%{opacity:100%}to{opacity:0%}}@keyframes cloud-keyframes{0%{opacity:0%;transform:translate(0)}20%{opacity:100%}80%{opacity:100%}to{transform:translate(-120px);opacity:0%}}@keyframes background-slide-in-keyframes{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes background-slide-out-keyframes{0%{transform:translate(0)}to{transform:translate(-100%)}}.dark-background{background-color:#323232}.white-shadow-container{box-shadow:0 0 20px #ffffff1f}.language-selector{position:relative;z-index:1000}.language-selector-button{display:flex;align-items:center;gap:6px;border:none;border-radius:20px;padding:8px 12px;font-size:14px;cursor:pointer;font-weight:500;transition:opacity .2s ease,transform .2s ease}.language-selector-button:hover{opacity:.9;transform:scale(1.05)}.language-selector-flag{font-size:16px;line-height:1}.language-selector-text{font-weight:600}.language-selector-arrow{font-size:10px;transition:transform .3s ease;margin-left:2px}.language-selector-arrow.open{transform:rotate(180deg)}.language-selector-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;border-radius:12px;border:1px solid;box-shadow:0 4px 12px #00000026;overflow:hidden;animation:dropdown-fade-in .2s ease}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.language-selector-option{display:flex;align-items:center;gap:10px;padding:10px 15px;cursor:pointer;transition:all .2s ease;font-size:14px}.language-selector-option:hover{opacity:.8}.language-selector-option.active span:not(.language-selector-flag){font-weight:600;text-decoration:underline}.projects-language-selector{position:absolute;top:20px;right:20px;z-index:1000}.projects-language-selector .language-selector-dropdown{right:0}@media (max-width: 820px){.language-selector-button{padding:6px 10px;font-size:13px}.language-selector-flag{font-size:14px}.language-selector-dropdown{min-width:130px;right:0}.language-selector-option{padding:8px 12px;font-size:13px}.projects-language-selector{top:15px;right:15px}}.AboutContainer{display:flex;flex-direction:column;justify-content:center;width:calc(100vw - 70px);height:calc(100vw - 70px);border:1px solid;border-radius:30px;padding:40px;box-sizing:border-box;max-width:650px;max-height:650px}.about-photo{display:flex;align-items:center;justify-content:center;width:100%;height:200px}.about-photo img{border-radius:100%;width:180px;height:180px}.about-text p{font-size:18px}.about-floating-circle{position:absolute;border-radius:20px}.circle1{background-color:#b44d5a}.circle2{background-color:#e3a400;z-index:1}.circle3{background-color:#6a8ed0}@media (max-width: 820px){.AboutContainer{width:100%;height:auto;min-height:calc(100vh - 200px);max-width:100%;max-height:none;padding:25px}.about-photo{height:150px;margin-bottom:20px}.about-photo img{width:120px;height:120px}.about-text p{font-size:16px;line-height:1.6}.about-text h1{font-size:24px}.about-floating-circle{display:none}}.circle4{background-color:#354d79}.ContactContainer{width:calc(100vw - 70px);height:calc(100vw - 70px);border:1px solid;border-radius:30px;padding:40px;box-sizing:border-box;max-width:650px;max-height:650px}.ContactContainer h1{margin-top:0}.ContactContainer p{font-size:18px}.ContactContainer form{display:flex;flex-direction:column;height:calc(100% - 145px);justify-content:space-around}.ContactContainer input[type=text]{width:100%;height:50px;margin-bottom:25px;box-sizing:border-box;padding:10px;outline:none;border:1px solid #B8B8B8;transition:border .3s ease,box-shadow .3s ease}.ContactContainer textarea{width:100%;height:200px;box-sizing:border-box;padding:10px;margin-bottom:25px;outline:none;resize:none;border:1px solid #B8B8B8;transition:border .3s ease,box-shadow .3s ease}.ContactContainer input[type=submit]{width:150px;height:50px;display:flex;justify-content:center;align-items:center;background-color:#354d79;border-style:none;border-radius:2px;align-self:center;color:#fff;font-weight:700;font-size:18px;font-family:Source Code Pro,monospace;transition:background-color .3s ease,transform .2s ease,opacity .3s ease}.ContactContainer input[type=submit]:hover{cursor:pointer}.ContactContainer input[type=text]:focus{border:1px solid #354D79}.ContactContainer textarea:focus{border:1px solid #354D79}@keyframes errorFadeIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes errorFadeOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-10px)}}.error-message{animation:errorFadeIn .3s ease-out forwards}.error-message.fade-out{animation:errorFadeOut .3s ease-out forwards}@media (max-width: 820px){.ContactContainer{width:100%;height:auto;min-height:calc(100vh - 200px);max-width:100%;max-height:none;padding:25px}.ContactContainer h1{font-size:24px}.ContactContainer p{font-size:16px}.ContactContainer form{height:auto;gap:15px;justify-content:flex-start}.ContactContainer input[type=text]{height:45px;margin-bottom:15px;font-size:12px}.ContactContainer textarea{height:150px;margin-bottom:15px;font-size:12px}.ContactContainer input[type=submit]{width:100%;height:48px;margin-top:10px}}.HomeContainer{width:100%;height:100%;border-radius:30px}.home-wrapper{position:absolute;border-radius:30px;width:calc(100vh - 70px);max-width:650px;height:calc(100vh - 70px);max-height:650px}.home-wrapper img{padding:20px;box-sizing:border-box;width:100%}.home-wrapper path[class=window-light]{transition:fill .5s ease}.sky{z-index:-1}.stars-hidden{opacity:0%}.stars-shown{opacity:100%}.light-sky{background-image:linear-gradient(180deg,#a4dfeb,#ccf7ff 41.67%,#fff 86.98%)}.dark-sky{background-image:linear-gradient(180deg,#0c4551,#156c7c 41.67%,#29d1f0 86.98%)}.dark-fog{z-index:2;background-image:linear-gradient(180deg,#0000 35.48%,#0000004f 59.38%,#00000014)}@media (max-width: 820px){.home-wrapper{position:absolute;width:100%;max-width:100%;height:auto;aspect-ratio:1 / 1;border-radius:30px}.home-sky-mobile{height:auto}.home-wrapper img{padding:10px;object-fit:contain}.HomeContainer{height:max-content;height:auto;aspect-ratio:1 / 1}}.project-container{position:absolute;top:0;width:100%;height:400vh}.project-light-background{background-image:linear-gradient(180deg,#c3f1fa,#72cdcd 98.96%)}.project-dark-background{background-image:linear-gradient(180deg,#4b527f,#8c5a7b 98.96%)}.hide-objects{visibility:hidden}.project-wrapper{display:flex;flex-direction:column;justify-content:center;width:100%;height:75%;box-sizing:border-box;padding:35px}.project-wrapper b{font-size:30px}.back-home{padding:35px;box-sizing:border-box}.back-home b:hover{cursor:pointer;text-decoration:underline}.projects-container{display:flex;flex-direction:column;position:absolute;top:0;z-index:2;margin-top:100vh}.backtotop-container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:70vh;text-align:center;box-sizing:border-box;padding:30vh 0 15px;font-size:14px}.backtotop-button{display:flex;width:fit-content;flex-direction:column;align-items:center}.backtotop-button:hover{cursor:pointer;text-decoration:underline}.backtotop-button img{width:35px}.backtotop-button b{font-size:30px}.project-index{position:fixed;top:50%;transform:translateY(-50%) translate(100%);right:30px;width:50px;max-height:50px;overflow:hidden;z-index:100;border-radius:8px;box-shadow:0 4px 12px #00000026;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1);opacity:0;pointer-events:none}.project-index.show-index{transform:translateY(-50%) translate(0);opacity:1;pointer-events:all}.project-index.visible{width:280px;max-height:70vh;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),max-height .3s cubic-bezier(.4,0,.2,1)}.project-index:not(.visible){width:50px;max-height:50px;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1) .05s,max-height .3s cubic-bezier(.4,0,.2,1) .05s}.index-toggle{background:none;border:none;font-size:18px;cursor:pointer;padding:15px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease;width:100%}.index-toggle:hover{transform:scale(1.1)}.index-position-toggle{display:none}.project-index-list{padding:10px 0;opacity:0;visibility:hidden;transform:translate(20px);transition:opacity .15s ease,visibility 0s linear .15s,transform .15s ease;overflow-y:auto;max-height:calc(70vh - 50px)}.project-index.visible .project-index-list{opacity:1;visibility:visible;transform:translate(0);transition:opacity .2s ease .15s,visibility 0s linear 0s,transform .2s ease .15s}.project-index:not(.visible) .project-index-list{opacity:0;visibility:hidden;transform:translate(20px);transition:opacity .15s ease 0s,visibility 0s linear .15s,transform .15s ease 0s}.project-index-item{display:flex;align-items:center;padding:10px 15px;cursor:pointer;font-size:14px;white-space:nowrap;transition:all .2s ease;gap:10px;position:relative}.project-index-item:hover{background-color:#8080801a;padding-left:20px}.project-index-item.active{font-weight:600;padding-left:20px}.project-index-item.active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background-color:var(--highlight-color);border-radius:0 2px 2px 0}.project-index-icon{font-size:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.project-index::-webkit-scrollbar{width:6px}.project-index::-webkit-scrollbar-track{background:transparent}.project-index::-webkit-scrollbar-thumb{background:#8080804d;border-radius:3px}.project-index::-webkit-scrollbar-thumb:hover{background:#80808080}@media (max-width: 820px){.project-container{height:auto}.back-home{padding:20px;position:absolute;top:22px}.back-home b{font-size:20px}.backtotop-container{height:50vh;padding:20vh 0 15px}.backtotop-button b{font-size:24px}.backtotop-button img{width:30px}.project-index{top:auto;bottom:30px;width:48px;max-height:48px;overflow:hidden;z-index:100;border-radius:8px;box-shadow:0 4px 12px #00000026;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),max-height .3s cubic-bezier(.4,0,.2,1),right .4s cubic-bezier(.4,0,.2,1);opacity:0;pointer-events:none;right:20px;transform:translateY(0) translate(100%);transform-origin:bottom right}.project-index.index-right{right:20px;transform-origin:bottom right}.project-index.index-left{right:calc(100vw - 20px);transform-origin:bottom left}.project-index.show-index{transform:translateY(0) translate(0);opacity:1;pointer-events:all}.project-index.visible{width:240px;max-height:60vh}.project-index:not(.visible){width:48px;max-height:48px}.index-header{display:flex;align-items:center;justify-content:space-between;width:100%}.index-toggle{width:48px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}.index-toggle svg{width:24px;height:24px}.index-position-toggle{width:48px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .2s ease}.index-position-toggle:hover{opacity:.7}.project-index-item{font-size:13px;padding:8px 12px}.project-index-icon{width:18px;min-width:18px}.project-index-list{max-height:calc(60vh - 48px)}.projects-container{margin-top:100vh;padding:0 15px}.project-wrapper{margin-top:calc((50vh - 20px)*-1);padding:20px}.project-wrapper b{font-size:24px}}@media (max-width: 480px){.project-index-item{padding:6px 10px}.project-index-item:hover{background-color:transparent;padding:6px 10px}.project-index-item.active{padding:6px 10px 6px 14px}.project-index.index-right{right:15px;left:auto}.project-index.index-left{left:15px;right:15px}.project-index{bottom:20px;width:44px;max-height:44px}.project-index.visible{width:200px;max-height:60vh}.project-index:not(.visible){width:44px;max-height:44px}.index-toggle{width:44px;height:44px}.index-toggle svg{width:22px;height:22px}.index-position-toggle{width:44px;height:44px}.project-index-item{font-size:12px;padding:6px 10px}.project-index-list{max-height:calc(55vh - 44px)}}.ProjectDisplayContainer{width:100%;height:100vh;min-height:730px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}.display-title-container{display:flex;flex-direction:column;align-items:center}.project-name{display:flex;align-items:center;justify-content:center;text-align:center;height:50px;padding:5px 25px;background-color:#fff;margin-top:24px;font-size:30px}.project-about-text{width:550px;text-align:center}.project-about-text p{margin:0 0 10px}.browser-wrapper{width:600px;height:376px;box-shadow:0 0 10px #0000001a}.browser-header{display:flex;align-items:center;width:100%;height:30px;background-color:#fff;border-radius:10px 10px 0 0}.browser-dots{width:15px;height:15px;border-radius:20px;padding:5px;box-sizing:border-box;margin-left:10px}.browser-dot-red{background-color:#ed655a}.browser-dot-yellow{background-color:#e1c14c}.browser-dot-green{background-color:#72be47}.browser-image{width:100%;height:336px;background-color:gray}.browser-image img{width:100%;height:336px;object-fit:cover;object-position:top}.browser-footer{width:100%;height:10px;background-color:#fff;border-radius:0 0 10px 10px}.mobile-wrapper{display:flex;justify-content:center;align-items:flex-end;width:600px;height:376px}.phone-container{width:211px;height:376px;background:#fafafa;box-shadow:0 0 10px #0000001a;border-radius:10px;padding:10px;box-sizing:border-box}.phone-position{z-index:2;margin-right:-20px}.phone-scale-down{width:180px;height:320px}.phone-image{width:100%;border-radius:10px;object-fit:cover;object-position:center}.duo-project-wrapper{display:flex;align-items:flex-end;justify-content:flex-end}.browser-wrapper-scaled-down{width:478px;height:300px;margin-left:10px;box-shadow:0 0 10px #0000001a}.browser-header-scaled-down{width:100%;height:24px}.browser-dots-scaled-down{width:10px;height:10px}.browser-image-scaled-down{width:100%;height:266px;background-color:gray}.browser-footer-scaled-down{width:100%;height:10px}.scale-down{transform:scale(.8)}@media (max-width: 820px){.ProjectDisplayContainer{min-height:auto;padding:30px 15px;justify-content:center;gap:25px}.project-name{font-size:22px;padding:5px 15px;height:auto}.project-about-text{width:100%;max-width:450px}.project-about-text p{font-size:15px}.browser-wrapper{width:100%;max-width:450px;height:auto}.browser-image{height:auto;aspect-ratio:16/9}.browser-image img{height:100%}.mobile-wrapper{width:100%;max-width:450px;height:auto;align-items:center;align-items:end}.phone-container{width:180px;height:320px;margin:0}.phone-position{margin-right:-20px;z-index:1}.phone-scale-down{width:150px;height:270px}.duo-phone-mobile{width:150px;height:210px!important}.browser-header{height:20px}.browser-dots{width:10px;height:10px}.browser-dots-scaled-down{width:8px;height:8px}.browser-wrapper-scaled-down{width:100%;max-width:350px;height:auto;margin-left:0}.browser-image-scaled-down{height:auto;aspect-ratio:16/9}.scale-down{transform:scale(1)}}@media (max-width: 480px){.project-name{font-size:18px;padding:5px 10px}.project-about-text p{font-size:14px}.phone-container{width:150px;height:270px}.phone-scale-down{width:130px;height:230px}}