@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap";.hero-section,.hero-section .outside-container{height:85vh;max-height:750px;box-sizing:border-box}.relative-container{position:relative}.hero-section .inside-container{height:100%}.inside-container.flex-center{gap:30px!important}.flex-center.skill-topic{gap:10px!important}.hero-section .BE-letters{background-color:var(--darker-grey);opacity:1;position:absolute;width:53%;height:100%;top:0;left:47%;overflow:hidden}.hero-section .BE-letters img{object-fit:cover;object-position:center center;height:100%;width:100%}.hero-content{position:relative;z-index:2000}.text h1{margin-top:5%;margin-bottom:40px}.text p{font-family:Source Code Pro,monospace;font-size:1.3rem}.text p span{color:var(--primary-medium);font-size:1.1rem}.text button{margin:40px 0 80px}.socials{display:flex;gap:5px;bottom:20px;position:absolute;z-index:2001}.socials a{text-decoration:none;color:#fff;font-size:30px;transition:color .25s ease}.socials a:hover{color:var(--primary)}.hero-container-image{height:100%;width:100%;position:absolute;box-sizing:border-box;z-index:5}.hero-section .hero-container-image .me-groot{position:absolute;width:50%;height:100%;bottom:0;right:0;overflow:hidden;display:flex;z-index:5}.hero-section .me-groot img{object-fit:cover;height:100%;width:auto;max-height:750px;object-position:100% 25%;transform:scale(1.05)}.hero{font-weight:800;font-size:5.6rem;line-height:1.1}.line{display:block}.word{display:inline-block;will-change:transform,opacity}@media(min-width:1600px){.hero-section .BE-letters{max-width:625px}}@media(max-width:1600px){.hero-content{max-height:unset}.hero{font-size:5.2rem}.hero-section .BE-letters img{height:110%}}@media(max-width:1024px){.socials{justify-content:left;bottom:20px}.hero-container-image{border-bottom:1px solid white}.hero-section,.hero-section .outside-container{height:fit-content;box-sizing:border-box}.hero-container{min-height:fit-content;max-height:unset}.hero-content{width:100%}.hero-content .text p{font-size:1.1rem}.hero-content .text h1{margin-top:10px;margin-bottom:45px;font-size:3.8rem}.hero-content .text button{width:auto;margin-bottom:130px}.hero-section .gradient,.hero-section .hero-container-image .me-groot{display:none}.hero-section .BE-letters{left:70%}.hero-section .BE-letters img{object-fit:cover;object-position:left;transform:scale(2) translate(20%) translateY(10%)}.hero{font-weight:800;font-size:5.8rem!important;line-height:1.1}}@media(max-width:765px){.text p:first-of-type{display:none}.hero-content{width:100%}.socials{justify-content:left}.hero-section .BE-letters{background-color:transparent;left:78%;opacity:1}.hero-section .BE-letters img{object-fit:cover;object-position:left;width:100%;transform:scale(.93) translate(-3%) translateY(-5%);opacity:.9}.hero{font-weight:800;font-size:5.2rem!important;line-height:1.1}.hero-section,.hero-section .outside-container{height:calc(95dvh - 60px);min-height:80vh;max-height:unset}.hero-content .text h1{margin-top:4dvh}.hero-container{height:calc(95dvh - 60px);min-height:fit-content;max-height:unset}.hero-section .outside-container{padding:60px 13%}}.about-section{position:relative;background-image:url(/background/portfolio_window_bgdark_3.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;border-bottom:1px solid white}.about-section p{width:740px;text-align:center;margin-bottom:20px}.skills-tabs{display:flex;justify-content:center;align-items:center;gap:50px;height:100%}.skills-tabs .skills-buttons{width:25%}.skills-tabs .skills-content{width:75%;min-height:440px}.skills-tabs .skills-buttons{display:flex;flex-direction:column;justify-content:space-between;gap:30px;height:100%}.skills-tabs button{background:transparent;color:#fff;display:flex;align-items:center;text-align:left;gap:15px;padding:0}.skills-tabs button p{font-size:.9rem}.skills-tabs button span i{font-size:19.2px}.skills-tabs button span{display:flex;justify-content:center;align-items:center;background-color:var(--dark-grey);padding:10px;aspect-ratio:1/1}.skills-tabs .skills-content{display:flex;background-color:var(--darker-grey)}.skills-tabs .skills-content .content-text{width:55%;padding:40px}.skills-tabs .skills-content .content-image{width:45%}.skills-tabs .skills-content .content-image img{object-fit:cover;width:100%;height:100%}.skills-tabs .skills-content .skills-since{font-family:Source Code Pro,monospace;color:var(--primary);font-size:.8rem}.skills-tabs .skills-content .skills-products{color:var(--primary);font-style:italic;margin-top:14px;margin-bottom:40px;font-size:.8rem}.skills-tabs .skills-content .skills-tools{font-size:.8rem;margin-top:40px;margin-bottom:10px}.badges{display:flex;flex-wrap:wrap;gap:10px 5px}.badges .tool-badge{display:flex;justify-content:center;align-items:center;gap:6px;width:fit-content;padding:10px 10px 10px 12px;font-size:.75rem;background-color:var(--primary);color:var(--black)}.badges .tool-badge svg{width:16px;height:16px}.tool-badge svg{fill:currentColor}.tool-badge[data-type=framework]{background-color:#c4afe4!important;color:var(--primary-dark)!important}.tool-badge[data-type=tooling],.tool-badge[data-type=database]{background-color:#303531!important;color:#c6c6c6!important}.tool-badge:hover{filter:brightness(1.1);cursor:pointer}.profiel-container-relative{position:relative}.profiel-letters{position:absolute;bottom:0;left:0;opacity:.1;width:45%;transform:translateY(60px) translate(-60px) scale(115%)}.experience-section{margin-top:60px}.experience-tabs{display:flex;gap:15px;margin-bottom:50px}.experience-tabs button{color:#fff;background-color:transparent;padding:0;font-size:1rem;font-weight:800}.experience-cards{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;width:100%;gap:15px;position:relative;z-index:5;margin-bottom:50px}.experience-cards .experience-card{flex:1;min-width:0;min-height:180px;background-color:var(--darker-grey);padding:20px 30px 30px;border-left:2px var(--primary) solid}.experience-cards .experience-card .date{font-family:Source Code Pro,monospace;color:var(--primary);font-size:.8rem}.experience-cards .experience-card .title{font-weight:600;font-size:1rem;padding-bottom:20px}.experience-cards .experience-card .description{font-size:.7rem;line-height:1.3rem}.experience-cards .experience-card .description span{color:var(--primary);font-style:italic}.experience-cards .experience-card .location{font-size:.7rem;color:#7d8493}@media(max-width:1024px){.skills-tabs{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px}.skills-tabs .skills-buttons,.skills-tabs .skills-content{width:100%}.skills-tabs .skills-buttons{flex-direction:row;flex-wrap:wrap;gap:20px}.skills-tabs .skills-buttons button{width:45%}.experience-cards .experience-card{flex:1 1 100%;box-sizing:border-box}.profiel-letters{transform:translateY(-10px) translate(-10px) scale(1.8)}}@media(max-width:765px){.skills-tabs .skills-buttons button{width:auto}.skills-tabs .skills-buttons{gap:10px;padding-top:0}.skills-tabs .skills-buttons p,.skills-tabs .skills-content .content-image{display:none}.skills-tabs .skills-content .content-text{width:100%;padding:40px}.profiel-letters{transform:translateY(-40px) translate(50px) scale(2.5)}.profiel-section .outside-container{padding-bottom:80px!important}}.projects-section{position:relative;background-color:#121418}.projects-section .images-container{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.images-container .project-card{aspect-ratio:4/3;position:relative;overflow:hidden;cursor:pointer}.images-container .project-card .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.project-card:hover .overlay{opacity:1}.project-name{color:#fff;font-size:1.2rem;line-height:1.8rem;text-align:center;padding:0 60px;font-weight:400}.images-container .project-card .project-image{object-fit:cover;width:100%;height:100%}.images-container .project-card .project-image img{width:100%;height:100%}.popup-bg{position:fixed;inset:0;padding-left:150px;background-color:#090a0ff5;display:flex;align-items:center;justify-content:center;z-index:2002}.popup{background-color:var(--darker-grey);max-width:1000px;margin:60px;width:100%;padding:0;position:relative;display:flex}.popup .col1,.popup .col2{width:calc(50% - 60px)}.popup img{object-fit:cover;width:100%;height:100%}.popup .col2 .actions{display:flex;flex-direction:column;align-items:center;gap:25px;position:absolute;right:0;top:0}.popup-close{cursor:pointer;background-color:var(--dark-grey);color:var(--primary);padding:0;width:60px;height:60px;font-size:18px;margin-bottom:5px}.link-icon a,.link-icon span{color:#fff;fill:currentColor}.link-icon{padding-right:5px;width:28px}.link-icon a:hover,.link-icon span:hover{color:var(--primary);cursor:pointer}.link-icon:last-child{width:23px}.popup .col2 .popup-content{width:80%;padding:100px 70px 90px}.popup .col2 .popup-content .accent{padding-right:5px;color:#9396a9}.popup .col2 .popup-content .category{font-family:Source Code Pro,monospace;color:var(--primary);font-size:.8rem;padding-bottom:10px}.popup .col2 .popup-content .project-name{text-align:left;font-size:1.9rem;line-height:2.6rem;font-weight:600;padding:0 0 30px}.popup .col2 .popup-content .project-description{padding-bottom:0}.popup .col2 .popup-content .project-group{padding-top:12px;font-size:.8rem}.popup .col2 .popup-content .badges{padding-top:30px}.popup .col2 .popup-content .project-group a{text-decoration:none;color:var(--primary)}.popup .col2 .popup-content .project-group a:hover{text-decoration:underline}.popup .col2 .popup-content .tool-badge{background-color:var(--primary)!important;color:var(--black)!important}.copied-tooltip{position:absolute;bottom:-30px;left:50%;transform:translate(-50%);background:var(--primary);border-radius:30px;color:#fff;padding:4px 10px;font-size:.75rem;pointer-events:none;opacity:.9}@media(max-width:1024px){.projects-section .images-container{grid-template-columns:repeat(2,1fr)}.images-container .project-card .overlay{display:none}.popup-bg{padding-left:0}.popup{max-width:80%;margin:0}}@media(max-width:765px){.projects-section .images-container{grid-template-columns:repeat(1,1fr)}.images-container .project-card .overlay{display:flex;opacity:1}.popup-bg{z-index:99999}.popup{flex-direction:column;max-width:80%;max-height:100%;background-color:var(--darker-grey)}.popup .col1{width:100%;padding-top:60px;height:20vh}.popup .col2{width:100%}.popup .col2 .actions{width:100%;flex-direction:row-reverse;background-color:var(--black);border-bottom:1px solid white}.popup-close{background-color:var(--darker-grey);color:#fff;border-left:1px solid white;margin-bottom:0}.popup .col2 .popup-content{padding:50px 10%}.popup .col2 .popup-content .category{padding-bottom:5px}.popup .col2 .popup-content .project-name{font-size:1.3rem;line-height:2rem}.popup .col2 .popup-content .project-group{display:none}.popup .col2 .popup-content .project-description{padding-bottom:0;word-break:normal;-webkit-hyphens:auto;hyphens:auto}.popup .col2 .popup-content .tool-badge{background-color:var(--primary)!important;color:var(--black)!important;font-size:.7rem}}.contact-section .outside-container{position:relative;overflow:hidden}.contact-section .outside-container .contact-letters{position:absolute;left:45%;height:100%;width:55%;transform:translate(2.5%) scale(105%);object-fit:cover;object-position:left center;pointer-events:none;opacity:.1;z-index:1}.contact-section .outside-container .inside-container{display:flex;gap:0;position:relative;z-index:2}.contact-section .outside-container .inside-container .contact-info{width:45%;padding:60px 0}.contact-section .outside-container .inside-container .contact-form-col{width:55%}.contact-section .outside-container .inside-container .contact-info h2,.contact-section .outside-container .inside-container .contact-info h3{text-align:left}.contact-section .outside-container .inside-container .contact-info p{padding-bottom:60px;max-width:90%}.contact-section .outside-container .inside-container .contact-info a{text-decoration:none;color:#fff;display:flex;align-items:center;width:fit-content;gap:10px;margin-bottom:20px;transition:all .25s ease-in-out}.contact-section .outside-container .inside-container .contact-info a:hover{color:var(--primary)}.contact-section .outside-container .inside-container .contact-info i{color:var(--primary);font-size:1.5rem;text-align:left}.contact-section .outside-container .inside-container .contact-info a:nth-of-type(2) i{color:var(--primary);font-size:1.3rem;padding-right:4px}.contact-form-col{display:flex;align-items:center;justify-content:flex-end;padding:60px 0}.contact-form-col .contact-form{width:100%;padding:0 0 0 60px;display:flex;flex-direction:column;gap:30px}.contact-form-col .contact-form .form-group{display:flex;flex-direction:column;gap:10px}.contact-form-col .contact-form .form-group label{font-size:.85rem}.contact-form-col .contact-form .form-group input,.contact-form-col .contact-form .form-group textarea{font-size:.9rem;background-color:var(--darker-grey);color:#fff;border:1px solid var(--grey);padding:.7rem .9rem;font-family:inherit;transition:border-color .2s ease,box-shadow .2s ease}.contact-form-col .contact-form .form-group textarea{resize:vertical;line-height:1.5;min-height:13.5rem}.contact-form-col .contact-form .form-group input:focus,.contact-form-col .contact-form .form-group textarea:focus{outline:none;border-color:var(--primary)}.snackbar{display:flex;align-items:center;gap:14px;position:fixed;bottom:30px;right:30px;background-color:var(--primary);background-color:#4cae4c;color:#fff;padding:12px 24px;font-weight:500;font-size:.9rem;z-index:100}.snackbar.error{background-color:#d9534f}.snackbar .close-btn{cursor:pointer;font-weight:600;color:#fff;background-color:transparent;padding:0;font-size:1.2rem;flex-shrink:0}.snackbar span{flex:1}.snackbar .close-btn:hover{color:#fff;opacity:.5}.spinner{width:10px;height:10px;border:3px solid rgba(255,255,255,.3);border-top:3px solid white;border-radius:50%}.submit-btn{display:flex;align-items:center;justify-content:center;gap:.5rem}.error{opacity:.5;font-size:.8rem}@media(max-width:1024px){.contact-section .outside-container .contact-letters{transform:translate(22.5%) scale(1.2);object-fit:cover;pointer-events:none;opacity:.1}.contact-form-col .contact-form{padding-left:100px}.snackbar{top:90px;bottom:unset;left:30%;right:30%}}@media(max-width:765px){.contact-section .outside-container .inside-container{flex-direction:column;gap:0}.contact-section .outside-container .inside-container .contact-info{width:100%;padding:0}.contact-section .outside-container .inside-container .contact-info p{max-width:100%}.contact-section .outside-container .inside-container .contact-form-col{width:100%}.contact-section .outside-container .contact-letters{bottom:0;left:0;width:100%;height:auto;transform:scale(1.3) translateY(50px) translate(10%)}.contact-form-col .contact-form{padding:0}.snackbar{height:fit-content;justify-content:space-between;top:60px;left:0;right:0}}.navbar-mobile{display:none}.navbar-desktop{background-color:var(--black);border-right:1px solid white;position:fixed;top:0;left:0;height:100%;width:150px;padding:40px 0 50px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-sizing:border-box;z-index:9999}.navbar-desktop .nav-top{display:flex;flex-direction:column;align-items:center}.navbar-desktop .nav-top img{width:90%;margin-bottom:50px}.navbar-desktop .nav-top ul{list-style:none;display:flex;flex-direction:column;position:relative;text-transform:capitalize}.navbar-desktop .nav-top li{padding:20px 0}.navbar-desktop a,.mobile-menu a{font-size:1rem;color:#fff;text-decoration:none;transition:color .25s ease}.navbar-desktop a:hover{color:var(--primary)}.navbar-desktop a.active,.mobile-menu a.active{color:var(--primary);font-weight:700}.navbar-desktop .nav-top .indicator{position:absolute;right:-45px;width:4px;background-color:var(--primary);border-top:20px solid var(--black);border-bottom:20px solid var(--black);border-radius:none;transition:top .5s ease-out,height .5s ease-out}.navbar-desktop .cv a{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.9rem}@media(max-width:1024px){.navbar-desktop{display:none}.navbar-mobile{display:block;width:100%;position:fixed;top:0;left:0;z-index:9999}.nav-top-mobile{position:fixed;top:0;left:0;z-index:1000;width:100%;box-sizing:border-box;display:flex;justify-content:space-between;background-color:var(--black);border-bottom:1px solid white;align-items:center;height:60px;padding:0 3%}.nav-top-mobile img{height:40%}.hamburger{width:23px;height:28px;position:relative;background:none;border:none;cursor:pointer;padding:0}.hamburger span{position:absolute;left:0;width:100%;height:2px;background:#fff;transition:all .3s ease}.hamburger span:nth-child(1){top:4px}.hamburger span:nth-child(2){top:13px}.hamburger span:nth-child(3){top:22px}.hamburger.open span:nth-child(1){transform:rotate(45deg);top:13px}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:rotate(-45deg);top:13px}.mobile-menu{position:fixed;top:59px;z-index:999;height:100%;width:100%;box-sizing:border-box;padding-bottom:15dvh;background-color:var(--black);display:flex;flex-direction:column;align-items:center;justify-content:center}.mobile-menu ul{list-style:none;display:flex;flex-direction:column;align-items:center;gap:50px;margin-bottom:80px;text-transform:capitalize}.mobile-menu a{font-size:1.1rem;width:100%}.mobile-menu .cv a{background-color:var(--primary);padding:10px 50px;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px}.mobile-menu .cv a svg{width:20px;height:20px}}@media(max-width:765px){.nav-top-mobile{padding:0 8%}}.intro-loader{position:fixed;inset:0;background:#000;z-index:20000;display:flex;align-items:center}.be-svg{position:absolute;top:40px;left:40px;width:70vw;height:100vh;overflow:visible;transform:translateY(-300px) translate(-50px);animation:blink-le 1.4s infinite both}@keyframes blink-le{0%{opacity:.6}50%{opacity:.2}to{opacity:.6}}.be-svg path{vector-effect:non-scaling-stroke}.transition{position:fixed;inset:0;pointer-events:none;z-index:20001}.transition .panel{position:fixed;top:0;left:0;width:100%;height:100vh;transform:translate(-100%);z-index:9999}.panel.white{background:var(--darker-grey)}.loader-line-container{width:6px;height:100%;background:var(--black);border-radius:3px;overflow:hidden;display:flex;justify-content:center;align-items:center;z-index:1000000}.loader-line{width:100%;height:100%;background:var(--primary);transform-origin:center;transform:scaleY(0);transition:transform .12s ease-out}.loader-percentage{position:fixed;bottom:30px;right:60px;font-family:Montserrat,monospace;font-size:8rem;color:var(--dark-grey);pointer-events:none;z-index:20002;-webkit-user-select:none;user-select:none}@media(max-width:1024px){.loader-percentage{display:none}.be-svg{position:absolute;top:0;left:0;width:100vh;height:100vh;overflow:hidden;animation:blink-le 1.4s infinite both;transform:translate(-60px) scale(1.15)}@keyframes blink-le{0%{opacity:.2}50%{opacity:.1}to{opacity:.2}}.loader-line-container{width:100%;height:6px;bottom:0;left:50%;transform:translate(-50%);position:fixed;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;background:var(--black);border-radius:0}.loader-line{height:100%;width:100%;background:var(--primary);transform-origin:left center;transform:scaleX(0);transition:transform .12s ease-out}}:root{--primary: #B689F2;--primary-light: #EADCF4;--primary-medium: #5D467C;--primary-dark: #260651;--grey: #353941;--dark-grey: #24272C;--darker-grey: #17191D;--black: #090A0F}*{font-family:Montserrat,system-ui,Avenir,Helvetica,Arial,sans-serif;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--black);color:#fff}.main-content{margin-left:150px;width:calc(100% - 150px)}h1{font-size:4rem}h2{font-size:2.2rem;text-align:center;margin-bottom:60px}h3{font-size:.9rem;text-align:center;color:var(--primary);margin-bottom:10px}h4{font-size:1.2rem;margin-bottom:30px}p{font-size:.9rem;line-height:1.6rem}button{background-color:var(--primary);border:1px solid transparent;padding:12px 18px;border-radius:0;font-weight:500;cursor:pointer;transition:all .2s ease}button:disabled{opacity:.3;color:#fff;cursor:not-allowed}button:hover:not(:disabled){filter:brightness(1.1)}.button-primary{color:#fff;background-color:var(--darker-grey);border-left:2px solid var(--primary);padding:15px 20px;font-weight:600;font-size:.9rem;cursor:pointer;outline:none;position:relative;overflow:hidden;transition:all .3s ease}.button-primary:hover{background-color:var(--primary)}.button-primary:disabled{background-color:var(--darker-grey);color:var(--black);font-weight:600;cursor:not-allowed}.skills-section.outside-container{padding-top:15px;padding-bottom:15px;background-color:var(--black)}.skills-section .inside-container{gap:10px;justify-content:flex-start;justify-content:space-between}.skill-topic{color:#fff;opacity:.8!important;gap:15px;font-weight:400;font-size:.8rem!important;transition:all .25s ease-in-out;transform:translateY(0) scale(.9)!important}.skill-topic:hover{opacity:1;color:var(--primary);transform:translateY(-5px) scales(105%)!important;cursor:pointer}.skill-topic div{display:flex;justify-content:center;align-items:center;gap:10px;aspect-ratio:1/1;transition:all .25s ease-in-out}.skill-topic:hover div{opacity:1}.skill-topic i{font-size:20px;display:flex;align-items:center;justify-content:center}.skill-topic svg{height:22.5px}.mirror{transform:scaleY(-1)}.flex-center{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:20px}.flex-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.outside-container{display:flex;justify-content:center;align-items:center;padding:60px 10%}.inside-container{width:100%;max-width:1250px}.white-border{border-top:1px solid white;border-bottom:1px solid white}.about-section .outside-container,.profiel-section .outside-container,.projects-section .outside-container{padding:110px 10%}.outside-container.footer-container{padding-top:30px;padding-bottom:50px;position:relative;background-color:var(--black);border-bottom:0}.outside-container .inside-container.footer{display:flex;flex-direction:row!important;justify-content:space-between}.outside-container .footer div{display:flex;flex-direction:row;gap:5px}.outside-container .footer div i{color:#fff;font-size:20px}.outside-container .footer div i:hover{color:var(--primary)}@media(max-width:1024px){.main-content{margin-top:60px;margin-left:0;width:100%}.skill-topic{width:45%;justify-content:flex-start;opacity:1!important;color:#fff}.skills-section.outside-container{padding-top:40px;padding-bottom:40px}.skills-section .inside-container{justify-content:space-between}}@media(max-width:765px){.skills-section{display:none}.skill-topic{width:100%;flex-direction:column;justify-content:center;align-items:center;text-align:center}.skill-topic i{font-size:24px;padding:10px}.skill-topic svg{height:50.5px}.flex-between{gap:40px}h2{font-size:1.9rem;text-align:center;margin-bottom:60px}p{font-size:.9rem}.about-section .outside-container,.profiel-section .outside-container,.projects-section .outside-container,.contact-section .outside-container{padding:120px 14%}.skills-section .inside-container{gap:60px 10px}.outside-container .inside-container.footer{flex-direction:column-reverse!important;gap:20px;justify-content:center;align-items:center;text-align:center}.outside-container .inside-container.footer div{display:none}}