:root{
  --site-margin:2vw;
  --letter-size:calc(10mm + 1vw);

  --inner-margin: calc(var(--letter-size) + var(--site-margin));
  --top-margin: calc(var(--site-margin) + var(--inner-margin));
  --bottom-margin: calc(var(--site-margin) + var(--inner-margin));
  --inner-width: calc(100vw - (var(--inner-margin) * 2));
  --inner-height: calc(90vh - var(--top-margin) - var(--bottom-margin));

  --roze:#ff82b4;
  --grijs:#969696;
  --zwart:#000000;
  --roze-1:#ff5989;
  --roze-2:#964a64;
  --roze-3:#b48296;
  --roze-4:#968c96;
  --roze-5:#ff8991;
  --roze-6:#ff5aa8;

  --small-text-size:1rem;
  --subhead-text-size:1.2rem;
  --normal-text-size:1.5rem;
  --head-text-size:1.6rem;
  --line-height:2rem;

  --circle-size-tiny:9vw;
  --circle-size-small:15vw;
  --circle-size-medium:30vw;
  --circle-size-large:33vw;
  --circle-size-jumbo:var(--inner-width);

  --dot-size: 6px;
}
html{font-size:62.5%}
html,body{margin:0;padding:0}
body{font-family:"Futura W01","Helvetica","Arial",sans-serif;letter-spacing:0.06rem;font-size:var(--normal-text-size);line-height:var(--line-height);}
a{color:inherit;text-decoration:inherit}
hr{border:0;border-bottom-width:2px;border-style:dotted;border-color:var(--grijs)}
img{display:block;}
.circle-image{border-radius:50%;object-fit:cover}
.circle-image.tiny{width:var(--circle-size-tiny);height:var(--circle-size-tiny)}
.pink-ball-2,.pink-ball-3,.pink-ball-4,.pink-ball-5,.pink-ball-6{border-radius:50%;width:var(--circle-size-medium);height:var(--circle-size-medium);flex-grow: initial !important;}
.pink-ball-1{background-color:var(--roze-1)}
.pink-ball-2{background-color:var(--roze-2)}
.pink-ball-3{background-color:var(--roze-3)}
.pink-ball-4{background-color:var(--roze-4)}
.pink-ball-5{background-color:var(--roze-5)}
.pink-ball-6{background-color:var(--roze-6)}
.active{color:var(--roze)}
.archived{position:relative;width:15vw;height:15vw}
.archived div{position:absolute;top:0;left:0;width:15vw;height:15vw;background-color:var(--roze);opacity:.75;border-radius:50%;z-index:2}
.archived img{position:absolute;top:0;left:0;z-index:1}
.kop{font-size:var(--head-text-size)}
.subkop{font-size:var(--subhead-text-size)}
.platte-tekst{font-size:var(--normal-text-size)}
#sub-nav .active{filter:contrast(30%) sepia(100%) hue-rotate(280deg);}
#article-detail section img { display: inline; vertical-align: -10%; }

@keyframes fade {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {opacity: 0;}
}