:root {
    --color-50: #f1f9fe;
    --color-100: #e2f2fc;
    --color-200: #bee5f9;
    --color-300: #8ad1f4;
    --color-400: #45b7eb;
    --color-500: #1d9eda;
    --color-600: #0f7fba;
    --color-700: #0d6597;
    --color-800: #0f557d;
    --color-900: #134767;
    --color-950: #0c2e45;
}

.bg-vakanzi-50 { background-color: var(--color-50); }
.bg-vakanzi-100 { background-color: var(--color-100); }
.bg-vakanzi-200 { background-color: var(--color-200); }
.bg-vakanzi-300 { background-color: var(--color-300); }
.bg-vakanzi-400 { background-color: var(--color-400); }
.bg-vakanzi-500 { background-color: var(--color-500); }
.bg-vakanzi-600 { background-color: var(--color-600); }
.bg-vakanzi-700 { background-color: var(--color-700); }
.bg-vakanzi-800 { background-color: var(--color-800); }
.bg-vakanzi-900 { background-color: var(--color-900); }
.bg-vakanzi-950 { background-color: var(--color-950); }


[x-cloak] {
    display: none !important;
}

.font-fallback {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.bunny.net/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap);
}

.bubble {
    position: absolute;
    width: 20px; /* Test met grotere maat */
    height: 20px;
    background-color: rgba(255, 255, 255, 0.3); /* Helderblauwe kleur voor zichtbaarheid */
    border-radius: 50%;
    pointer-events: none; /* Geen muisinteractie */
    animation: bubble-up 2s linear forwards;
    z-index: 1000; /* Voor alle andere elementen */
}

/* Animatie voor het bewegen van de bubbels */
@keyframes bubble-up {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-150px) scale(0.5);
        opacity: 0;
    }
}

.custom-cursor {
    position: absolute;
    font-size: 48px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1000;
    transition: opacity 0.2s ease;
}

body {
    cursor: none;
}

a:hover ~ .custom-cursor {
    opacity: 0;
}