:root                           {
    --grootte-midden-upload-foto:400px;
}

@keyframes pulseren {
    from            { opacity:0.25;background-size:50% auto; }
    to              { opacity:0.5;background-size:65% auto; }
}

*                                           { box-sizing:border-box;margin:0;padding:0;list-style:none;user-select:none;outline:none; }

body                                        { overflow:hidden;font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif; }
header                                      { width:100%;position:absolute;top:30px;font-size:60px;mix-blend-mode:difference;color:#fff;display:flex;justify-content:center;align-items:center;text-transform:uppercase;z-index:2; }
main                                        { display:grid;grid-template-columns:repeat(2,1fr);height:100vh; }

main>section                                { position:relative;display:flex;justify-content:center;align-items:center; }
main>section .overlay                       { position:absolute;width:600px;aspect-ratio:1;background-position:center center;background-repeat:no-repeat;left:calc(50% - 300px);top:calc(50% - 300px);pointer-events:none;opacity:0.25;background-size:50% auto; }
main>section.laden .overlay                 { animation-name:pulseren;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:600ms;animation-direction:alternate; }
main>section.tonen .overlay                 { display:none; }
main>section .tekst                         { opacity:0;font-size:50px;line-height:60px;text-align:center;transition:all 10ms ease-in-out;filter:blur(5px); }
main>section.tonen .tekst                   { opacity:1;transition:all 500ms ease-in-out;filter:blur(0px); }
main>section:nth-of-type(1)                 { background-color:#f0f0f0;color:#222;padding:100px 250px 100px 50px; }
main>section:nth-of-type(1) .overlay        { background-image:url("../images/angel.png"); }
main>section:nth-of-type(2)                 { background-color:#222;color:#f0f0f0;padding:100px 50px 100px 250px; }
main>section:nth-of-type(2) .overlay        { background-image:url("../images/demon.png"); }

main>aside                                  { position:absolute;mix-blend-mode:difference;width:var(--grootte-midden-upload-foto);aspect-ratio:1;border-radius:50%;left:calc(50% - (var(--grootte-midden-upload-foto) + 20px) / 2);top:calc(50% - (var(--grootte-midden-upload-foto) + 20px) / 2);box-sizing:content-box;background-color:#000;border:10px solid #000; }
main>aside input                            { border:0px;line-height:110%;font-size:35px;text-align:center;width:var(--grootte-midden-upload-foto);aspect-ratio:1;background-color:transparent;font-weight:700;text-transform:lowercase;color:#f0f0f0; }