body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; background-image: url('afbeeldingen/home-background.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #f0f0f0; display: flex; flex-direction: column; align-items: center; min-height: 100vh; color: #333; overflow-x: hidden; position: relative; opacity: 1; transition: opacity 0.5s ease-in-out; will-change: background-position; } header { background: #2196F3; color: #fff; padding: 0.5rem 0; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.15); width: 100%; user-select: none; } header h1 { margin: 0; padding: 0.75rem 0; color: #fff; font-size: clamp(1.75rem, 5vw, 2.5rem); text-shadow: 1px 1px 3px rgba(0,0,0,0.4); } .popup-overlay { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent; display: flex; justify-content: center; align-items: center; z-index: 1000; overflow: visible; padding: 0; box-sizing: border-box; width: auto; height: auto; } .popup { background: #fff; padding: 2rem; border-radius: 15px; text-align: center; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); animation: fadeIn 0.5s ease-in-out; max-width: 400px; width: 100%; box-sizing: border-box; margin: 0 auto; } .popup h2 { color: #333; margin-bottom: 1.5rem; font-size: clamp(1.25rem, 4vw, 1.75rem); } .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; font-size: 1.25rem; padding: 15px 30px; margin: 0.5rem; border-radius: 10px; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; box-shadow: 0 6px #802C11; min-width: 44px; min-height: 44px; user-select: none; text-align: center; flex: 1; max-width: 180px; } .popup .btn-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; } .btn.nl { background: #FF5722; box-shadow: 0 6px #802C11; } .btn.nl:hover, .btn.nl:focus { background: #E64A19; transform: scale(1.05); } .btn.fr { background: #42A5F5; box-shadow: 0 6px #21537B; } .btn.fr:hover, .btn.fr:focus { background: #2196F3; transform: scale(1.05); } .intro-text-seo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; aria-hidden: true; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }