*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;list-style:none;scroll-behavior:smooth;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,monospace}:root{--background: rgb(15, 15, 15);--second-background: rgb(15, 15, 15);--background-pattern: linear-gradient( 135deg, rgba(15, 15, 15, .08) 0%, rgba(17, 17, 17, .08) 100% ), url("data:image/svg+xml;utf8,<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='40' height='40' fill='none'/><circle cx='20' cy='20' r='2' fill='rgba(255,76,76,0.15)'/><circle cx='0' cy='0' r='2' fill='rgba(250,116,116,0.12)'/><circle cx='40' cy='40' r='2' fill='rgba(72,27,114,0.12)'/></svg>");background-size:cover,40px 40px;background-repeat:no-repeat,repeat;background-attachment:fixed}body{min-height:100vh;background-color:var(--background);background-image:var(--background-pattern)}nav{position:fixed;top:0;width:100%;padding:2em 15%;display:flex;align-items:center;justify-content:space-between;background-color:#0f0f0fcc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000}ul{display:flex;align-items:center;gap:3em}nav ul a{color:#fff;opacity:.7;transition:.2s ease-in-out}nav ul a:hover{opacity:1}.logo{font-size:2em;font-weight:800;color:#fff;opacity:.8;transition:.2s ease-in-out}.logo span{color:#fff;font-family:Courier New,Courier,monospace}.logo:hover{opacity:1}.btn{padding:.5em 1em;color:#fff;font-weight:500;letter-spacing:1px;border-radius:.5em;font-size:1.1em;border:2px solid #fff;cursor:pointer;transition:.3s ease-in-out}.btn:hover{background-color:#fff;color:var(--background)}span{background:linear-gradient(to right,#7a2e39,#ad6262);-webkit-background-clip:text;background-clip:text;color:transparent}#menu{color:#fff;font-size:3em;display:none}section{width:100%;padding:5% 15%}#home{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2em;padding-top:7em;color:#fff}#home img{width:18vw;border-radius:50%;margin-top:3em}.info-box{display:flex;flex-direction:column;text-align:center;gap:.5em;max-width:600px}.info-box h1{font-size:4em;font-weight:500}.info-box h3{font-size:2em;font-weight:400}.infobox p{opacity:.7}.custom-map-container{position:relative;width:100%;max-width:450px;margin:2rem auto 0;border-radius:1rem;box-shadow:0 10px 40px #0000004d,0 4px 15px #0003,0 0 0 1px #ff4c4c33;background:#181818cc;overflow:hidden;border:2px solid rgba(255,76,76,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.custom-map-container:hover{transform:translateY(-5px);box-shadow:0 15px 50px #0006,0 6px 20px #0000004d,0 0 0 1px #ff4c4c66;border-color:#ff4c4c80}.custom-map-container:after{content:"📍 Almere, Nederland";position:absolute;bottom:0;left:0;right:0;background:linear-gradient(135deg,#181818f2,#282828f2);color:#fff;padding:.75rem;text-align:center;font-size:.9em;font-weight:500;letter-spacing:.5px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,76,76,.2);z-index:2}.custom-map-iframe{width:100%;height:280px;border:none;border-radius:0;filter:grayscale(.2) contrast(1.1) brightness(.9) saturate(1.2) hue-rotate(10deg);background:#1a1a1a;display:block;transition:filter .3s ease}.custom-map-container:hover .custom-map-iframe{filter:grayscale(.1) contrast(1.15) brightness(1) saturate(1.3) hue-rotate(5deg)}.btn-box{display:flex;gap:2em}.btn-box .btn:nth-of-type(2){background-color:#fff;color:var(--background)}.btn-box .btn:nth-of-type(2):hover{background-color:var(--background);color:#fff}::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#7a2e39,#ad6262)}#about{background-color:var(--second-background);display:flex;align-items:center;justify-content:center;padding-top:7em;gap:5em}#about h2{font-size:2em}#about img{width:30vw;border-radius:1em}.about-box{display:flex;flex-direction:column;align-items:left;gap:2em}.about-box h1{font-size:4em}.about-box h2{font-size:2.5em}.about-box h3{font-size:5em}.about-box p{opacity:.8;color:#fff}.skills{display:flex;text-align:left;align-items:flex-start;gap:10em}.skills span{font-family:Courier New,Courier,monospace;color:#fff;background:transparent}.skills h1{font-size:2em;color:#fff;opacity:.8}.skills ul{font-weight:500;display:flex;flex-direction:column;color:#fff;opacity:.8;align-items:baseline}.skills ul li span{display:flex;align-items:center;gap:.5em;font-size:1.3em;transition:.3s ease-in-out;color:#fff}.skills ul li span:hover{transform:translate(10px);color:#ff4c4c}.skills ul li i{font-size:1.2em}.skill-item{position:relative}.skill-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:15px;background-color:#181818f2;color:#fff;padding:8px 12px;border-radius:6px;font-size:.9em;white-space:nowrap;opacity:0;visibility:hidden;transition:all .3s ease;border:1px solid rgba(255,76,76,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.skill-tooltip:before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:#181818f2}.skill-item:hover .skill-tooltip{opacity:1;visibility:visible;transform:translateY(-50%) translate(5px)}.skills-toggle{display:flex;justify-content:left;gap:1em;margin-bottom:2em}.toggle-btn{padding:.7em 1.5em;background-color:transparent;color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:.5em;cursor:pointer;transition:all .3s ease;font-family:inherit;font-size:1em;display:flex;align-items:center;gap:.5em}.toggle-btn:hover{border-color:#ff4c4cb3;transform:translateY(-2px)}.toggle-btn.active{background:linear-gradient(to bottom,#ff4c4c,#fa7474);border-color:#ff4c4c;color:#fff}.skills.hidden{display:none}#about-box{font-size:2.5em}#projects{background-color:var(--background);background-image:var(--background-pattern)}.header{text-align:center;font-size:4em;margin:.5em 0}.projects-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2em}.box{border:3px solid rgb(49,49,49);border-radius:.5em;display:flex;flex-direction:column;justify-content:center;overflow:hidden;object-fit:cover;padding:3em;gap:2em;color:#fff;cursor:pointer;transition:.3s ease-in-out}.box:hover{border:3px solid rgb(100,100,100)}.box p{opacity:.8}.box h1{font-size:2em}.box img{min-width:25px;border-radius:.5em}.modal-container{display:fixed;pointer-events:none;position:fixed;opacity:0;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.modal-container.show{pointer-events:auto;opacity:1}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#181818f2;border-style:solid;padding:2em;border-radius:1em;width:80vw;max-width:500px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;border-color:#646464}.modal p{margin-bottom:1em;opacity:.8}.modal-close{position:absolute;top:15px;right:15px;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;width:35px;height:35px;transition:all .3s ease}.modal-close:hover{background-color:#ffffff1a;transform:scale(1.1)}#contact{background-color:var(--second-background)}form{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2em}form .input-box{display:flex;flex-direction:column;align-items:baseline;gap:1em}.input-box span{font-size:1.5em}.input-box input{align-items:center}form input{color:#fff;font-size:1em;padding:1em 3em;border:none;background-color:transparent;outline:none;font-weight:500;letter-spacing:1px;border-radius:.5em;font-size:1.1em;border:1.5px solid #fff;transition:.3s ease-in-out;text-align:center}form input:focus{border-color:#faebd7}form button.btn{background-color:transparent;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:.5em}form button.btn:hover{background-color:#fff;color:var(--background)}.h-captcha{opacity:0;max-height:0;overflow:hidden;transition:all .3s ease-in-out;transform:translateY(-10px)}.h-captcha.show{opacity:1;max-height:100px;transform:translateY(0)}footer{display:flex;align-items:center;justify-content:center;gap:10em;bottom:0;background-color:var(--background);background-image:var(--background-pattern);width:100%;padding:5em 15%}.col-left{display:flex;flex-direction:column;gap:1em}.col-box{display:flex;align-items:center;gap:1em}.col-box i{font-size:2em}.col-box span{font-size:1.2em}.col-box span.text{color:#fff;background:transparent}.col-right{display:flex;flex-direction:column;gap:1em;color:#fff;max-width:500px}.col-right span{font-size:1.3em}.col-right .social-icons{display:flex;align-items:baseline;justify-content:left;gap:1em}.col-right .social-icons a{color:inherit;text-decoration:none;transition:.2s ease-in-out}.col-right .social-icons i{font-size:2em;transition:.2s ease-in-out;cursor:pointer}.social-icons a:hover,.social-icons i:hover{background:linear-gradient(to bottom,#7a2e39,#ad6262);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transform:scale(1.1)}@media (max-width: 968px){section{padding:8em 15%}nav .btn{display:none}#menu{display:block}.nav-links{position:absolute;top:100%;right:0;width:100%;padding:1em 3em;color:#fff;display:flex;flex-direction:column;text-align:center;background:#000000e6;display:none}.nav-links a{margin:2em 0;display:block;font-size:1.5em;color:#fff}.nav-links.active{display:block}#home h1{font-size:4em}#home h3{font-size:2em}#home img{width:24vw}#about{flex-direction:column}#about img{width:32vw}#about h1{font-size:3em}#about ul{font-size:1em}}@media (max-width: 768px){#home h1{font-size:2.5em}#home h3{font-size:1.5em}#home img{width:32vw}#about .skills{gap:3em}#projects .header,#contact .header{font-size:3em}#contact .input-box span{font-size:1.2em}.input-box input{padding:.5em 1em;text-align:center}footer{flex-direction:column;gap:5em;align-items:baseline}}@media (max-width: 600px){nav{padding:1em 5%}.logo{font-size:1.5em}section{padding:6em 3% 2em}#home{padding-top:6em;gap:1.5em}#home img{width:50vw;margin-top:1em}.info-box h1{font-size:2em}.info-box h3{font-size:1em}.btn-box{flex-direction:column;gap:1em;width:100%;align-items:stretch}.btn{font-size:1em;width:100%;text-align:center}#about{flex-direction:column;gap:2em;padding-top:4em}#about img{width:80vw;margin:0 auto}.about-box h1,.about-box h2{font-size:2em}.skills{flex-direction:column;gap:2em}.projects-container{grid-template-columns:1fr;gap:1em}.box{padding:1em;gap:1em}.box h1{font-size:1.2em}.box img{width:100%;min-width:unset}.modal{width:95vw;max-width:95vw;padding:1em}.header{font-size:2em}form .input-box span{font-size:1em}form input{font-size:1em;padding:.5em 1em;width:90vw;max-width:100%}footer{flex-direction:column;gap:2em;padding:2em 5%;align-items:flex-start}.col-right{max-width:100%}}