/* styles.css */

/* Algemene stijlen voor het hele document */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Stijlen voor het hoofdtekstelement (h1) */
h1 {
    font-size: clamp(1.5em, 5vw, 3em);
    margin-bottom: 10px;
    color: black;
    animation: colorChange 2s ease-in-out 0.5s forwards; /* Animatie voor kleurverandering met 1 seconde vertraging */
}

/* Stijlen voor het span-element binnen h1 (puntje) */
span {
    opacity: 0;
    color: black;
    position: relative;
    animation: moveDot 3s ease-in-out 1s forwards; /* Animatie voor het bewegen van het puntje met 1 seconde vertraging */
}

/* Stijlen voor het afbeeldingselement (img) */
img {
    max-width: 100%;
    height: auto;
    opacity: 0;
    animation: fadeIn 2s ease-in 4s forwards; /* Animatie voor vervagen met 4 seconden vertraging */
}

/* Keyframes voor de kleurveranderingsanimatie */
@keyframes colorChange {
    from {
        color: black;
    }
    to {
        color: #55ab26; /* Doelkleur na kleurverandering */
    }
}

/* Keyframes voor het bewegen van het puntje */
@keyframes moveDot {
    from {
        left: 100%;
        opacity: 0;
    }
    to {
        left: 0px;
        opacity: 1;
    }
}

/* Keyframes voor het vervagen van de afbeelding */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}