html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    background-color: black;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
}


.plaatje-container {
    position: relative;
    width: 500px;
    height: 500px;
    border-radius: 18px;
}


/* ZACHTE GLOED */

.plaatje-container::after {
    content: "";

    position: absolute;
    inset: -25px;

    border-radius: 45px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff6600,
            #00ccff,
            #8a2be2,
            #ff0033,
            transparent
        );

    background-size: 300% 100%;

    animation: neonBewegen 6s linear infinite;

    filter: blur(35px);

    opacity: 0.7;

    z-index: 0;
}


.plaatje {
    position: relative;

    width: 500px;
    height: 500px;

    object-fit: cover;

    border-radius: 18px;

    z-index: 1;
}


/* GRADIENT BEWEEGT */

@keyframes neonBewegen {

    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }

}
/* =========================
   MOBIEL
   ========================= */

@media (max-width: 550px) {

    .plaatje-container {
        width: 90vw;
        height: calc(90vw / 1);
        border-radius: 18px;
    }

    .plaatje {
        width: 100%;
        height: 100%;
        border-radius: 18px;
    }
    .plaatje-container::after {
        inset: -15px;
        border-radius: 32px;

        filter: blur(25px);

        opacity: 0.65;
    }

}