/* Exact accent colours supplied by Vriendenkring Kerkelanden. */
:root {
  --friend-red:#FF0000;
  --friend-orange:#FF7A00;
  --friend-yellow:#FFE500;
  --friend-lime:#9EFF00;
  --friend-turquoise:#00F0FF;
  --friend-blue:#0D00FF;
  --friend-purple:#9E00FF;
  --friend-pink:#FA00FF;
}
.activity:nth-child(8n+1):after,.team-member:nth-child(8n+1) .team-avatar:after{background:var(--friend-red)}
.activity:nth-child(8n+2):after,.team-member:nth-child(8n+2) .team-avatar:after{background:var(--friend-orange)}
.activity:nth-child(8n+3):after,.team-member:nth-child(8n+3) .team-avatar:after{background:var(--friend-yellow)}
.activity:nth-child(8n+4):after,.team-member:nth-child(8n+4) .team-avatar:after{background:var(--friend-lime)}
.activity:nth-child(8n+5):after,.team-member:nth-child(8n+5) .team-avatar:after{background:var(--friend-turquoise)}
.activity:nth-child(8n+6):after,.team-member:nth-child(8n+6) .team-avatar:after{background:var(--friend-blue)}
.activity:nth-child(8n+7):after,.team-member:nth-child(8n+7) .team-avatar:after{background:var(--friend-purple)}
.activity:nth-child(8n+8):after,.team-member:nth-child(8n+8) .team-avatar:after{background:var(--friend-pink)}
/* Two small, still circles per page. Clipped to the page edge, behind content.
   No DOM nodes, focus targets or motion; the content retains its own layer. */
main{position:relative;isolation:isolate;overflow:hidden;--edge-first:var(--friend-orange);--edge-second:var(--friend-turquoise)}
main{--dot-a-size:88px;--dot-b-size:88px;--dot-a-top:18%;--dot-b-bottom:12%;--edge-reveal:24px}
main::before,main::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
main::before{width:var(--dot-a-size);height:var(--dot-a-size);left:calc(var(--edge-reveal) - var(--dot-a-size));top:var(--dot-a-top);background:var(--edge-first)}
main::after{width:var(--dot-b-size);height:var(--dot-b-size);right:calc(var(--edge-reveal) - var(--dot-b-size));bottom:var(--dot-b-bottom);background:var(--edge-second)}
body[data-page="agenda"] main{--edge-first:var(--friend-yellow);--edge-second:var(--friend-purple)}
body[data-page="activiteiten"] main{--edge-first:var(--friend-lime);--edge-second:var(--friend-orange)}
body[data-page="fotos"] main{--edge-first:var(--friend-pink);--edge-second:var(--friend-blue)}
body[data-page="informatie"] main{--edge-first:var(--friend-turquoise);--edge-second:var(--friend-red)}
body[data-page="team"] main{--edge-first:var(--friend-purple);--edge-second:var(--friend-yellow)}
body[data-page="vragen"] main{--edge-first:var(--friend-blue);--edge-second:var(--friend-lime)}
/* Deliberately different compositions, stable while a visitor reads. */
body[data-page="index"] main{--dot-a-top:21%;--dot-b-bottom:8%;--dot-a-size:92px;--dot-b-size:72px}
body[data-page="agenda"] main{--dot-a-top:38%;--dot-b-bottom:31%;--dot-a-size:76px;--dot-b-size:112px}
body[data-page="activiteiten"] main{--dot-a-top:61%;--dot-b-bottom:79%;--dot-a-size:106px;--dot-b-size:64px}
body[data-page="fotos"] main{--dot-a-top:12%;--dot-b-bottom:42%;--dot-a-size:68px;--dot-b-size:98px}
body[data-page="informatie"] main{--dot-a-top:46%;--dot-b-bottom:17%;--dot-a-size:114px;--dot-b-size:78px}
body[data-page="team"] main{--dot-a-top:76%;--dot-b-bottom:66%;--dot-a-size:82px;--dot-b-size:104px}
body[data-page="vragen"] main{--dot-a-top:29%;--dot-b-bottom:23%;--dot-a-size:98px;--dot-b-size:66px}
body[data-page="agenda"] main::before,body[data-page="team"] main::before,body[data-page="vragen"] main::before{left:auto;right:calc(var(--edge-reveal) - var(--dot-a-size))}
body[data-page="agenda"] main::after,body[data-page="team"] main::after,body[data-page="vragen"] main::after{right:auto;left:calc(var(--edge-reveal) - var(--dot-b-size))}
@media(min-width:1400px){main{--edge-reveal:48px}}
@media(max-width:700px){main{--edge-reveal:10px}}