/* page-load animation */
body {
    opacity: 0;
    transition: opacity 1s;

    overflow: hidden;
}

/* parent container van img */
.task-header {
    position: relative;

    width: 100vw;
    height: 32rem;

    margin-top: 2rem;
    overflow: hidden;
}

/* img child */
.task-header > img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);

    height: 100%;
    width: auto;

    opacity: 30%;
}

/* lap tekst */
.task-article {
    position: absolute;
    left: 50%;
    bottom: 25%;
    transform: translate(-50%);

    width: 16.125rem;
}

.arrow {
    color: white;
    outline: 1px solid white;
    background: none;

    padding: 0.8rem 0.9rem;
    border-radius: 9999rem;

    border: none;

    /* positioneren */
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translate(-50%);  
    z-index: 1; 

    cursor: pointer; 
}

/* bluemesh */
.bluemesh {
    position: absolute;
    top: -7em;
    right: -7em;

    filter: blur(4em);
    opacity: 80%;
}

/* layout responsive voor telefoon */
@media only screen and (max-width: 600px) {
    .task-header {
        margin-top: 8rem;
        height: 24rem;
    }

    .task-header > img {
        left: -8rem;
        transform: none;
    }
}