/* CSS RESET --> in 'all.css' is een kleine CSS reset opgenomen die je naar eigen voorkeur kunt aanvullen of uitkleden */

/* BLOKJES --> Elk blokje (article) heeft een ID, die je kunt gebruiken als "namespace" om CSS alleen voor dat blokje te laten gelden */


/*********/
/* MIXEN */
/*********/

/******************************/
/* ID = background-blend-mode */
/******************************/
/* search CSS background-blend-mode --> werkt vooral in laatste versies browsers */
#background-blend-mode {
   padding:0;
   display:flex;
   flex-wrap:wrap;
}

#background-blend-mode div {
   position:relative;
   flex-basis:50%;
   background-image:
      linear-gradient(45deg, transparent 50%, YellowGreen 50%), 
      url(../images/image-background.jpg);
   background-size:200% 200%, cover;
   background-position:right top;
   transition:1s;
}

#background-blend-mode div:nth-of-type(1) {
   /* your code */
   background-blend-mode:multiply;
}
#background-blend-mode div:nth-of-type(2) {
   /* your code */
   background-blend-mode:hue;
}
#background-blend-mode div:nth-of-type(3) {
   /* your code */
   background-blend-mode:overlay;
}
#background-blend-mode div:nth-of-type(4) {
   /* your code */
   background-blend-mode:color;
}

/* hover effect */
#background-blend-mode:hover div {
   /* your code */
   background-position:center;
}

/* de labels */
#background-blend-mode div::after {
   content:attr(class);
   position:absolute;
   left:50%; bottom:.5em;
   padding:0 .25rem .0625rem;

   white-space:nowrap;
   font-size:.66em;
   line-height:1em;

   text-align:center;
   transform:translateX(-50%);
   transition:.75s;
}

#background-blend-mode:hover div::after {
	background-color:YellowGreen;
}


/***************/
/* ID = filter */
/***************/
/* search CSS filters --> werkt vooral in laatste versies browsers */
#filter {
   padding:0;
   display:flex;
   flex-wrap:wrap;
}

#filter div {
   position:relative;
   flex-basis:50%;
   background:url(../images/image-background.jpg) center / cover no-repeat;
   transition:1s;
}

#filter div:nth-of-type(1) {
   /* your code */
   filter: sepia(100%);
}
#filter div:nth-of-type(2) {
   /* your code */
   filter: grayscale(100%);
}
#filter div:nth-of-type(3) {
   /* your code */
   filter: hue-rotate(45deg);
}
#filter div:nth-of-type(4) {
   /* your code */
   filter: blur(2px);
}

/* hover effect */
#filter:hover div {
   /* your code */
   filter:none;
}

/* de labels */
#filter div::after {
   content:attr(class);
   position:absolute;
   left:50%; bottom:.5em;
   padding:0 .25rem .0625rem;

   white-space:nowrap;
   font-size:.66em;
   line-height:1em;

   text-align:center;
   transform:translateX(-50%);
   transition:.75s;
}

#filter:hover div::after {
	background-color:YellowGreen;
}


/***************************/
/* ID = masker-met-verloop */
/***************************/
/* search CSS mask-image --> werkt vooral in laatste versies browsers */
#masker-met-verloop {
   background:url(../images/image-stars.jpg) center center / cover no-repeat;
   padding:0;
   display:flex;
   flex-wrap:wrap;
}

#masker-met-verloop div {
   position:relative;
   flex-basis:50%;
   background:url(../images/image-background.jpg) center / cover no-repeat;
}

#masker-met-verloop div:nth-of-type(1) {
   /* your code */
   -webkit-mask-image:linear-gradient(transparent 25%, black, transparent 75%);
   mask-image:linear-gradient(transparent 25%, black, transparent 75%);
   -webkit-mask-size:100% 100%;
   mask-size:100% 100%;
   -webkit-mask-position:center;
   mask-position:center;
   transition:1s;
}
#masker-met-verloop:hover div:nth-of-type(1) {
   /* your code */
   -webkit-mask-size:100% 250%;
   mask-size:100% 250%;
   -webkit-mask-position:center;
   mask-position:center;
}

#masker-met-verloop div:nth-of-type(2) { 
   /* your code */
   -webkit-mask-image: repeating-linear-gradient(
      45deg, 
      black, black 6.25%,
      rgba(0,0,0,.5) 6.25%, rgba(0,0,0,.5) 18.75%,
      black 18.75%, black 25%);
   mask-image: repeating-linear-gradient(
      45deg, 
      black, black 6.25%,
      rgba(0,0,0,.5) 6.25%, rgba(0,0,0,.5) 18.75%,
      black 18.75%, black 25%);
}

#masker-met-verloop div:nth-of-type(3) {
   /* your code */
   -webkit-mask-image:radial-gradient(black 25%, transparent 50%);
   mask-image:radial-gradient(black 25%, transparent 50%);
   -webkit-mask-size:100% 100%;
   mask-size:100% 100%;
   -webkit-mask-position:center;
   mask-position:center;
   transition:1s;
}
#masker-met-verloop:hover div:nth-of-type(3) {
   /* your code */
   -webkit-mask-size:200% 200%;
   mask-size:200% 200%;
}

#masker-met-verloop div:nth-of-type(4) {
   /* your code */
   -webkit-mask-image:radial-gradient(black 64%, rgba(255,255,255,.5) 64%);
   mask-image:radial-gradient(black 64%, rgba(255,255,255,.5) 64%);
}

/* de labels */
#masker-met-verloop div::after {
   content:attr(class);
   position:absolute;
   left:50%; bottom:.5em;
   padding:0 .25rem .0625rem;

   white-space:nowrap;
   font-size:.66em;
   line-height:1em;

   text-align:center;
   transform:translateX(-50%);
   transition:.75s;
}

#masker-met-verloop:hover div::after {
	background-color:YellowGreen;
}


/***************************/
/* ID = masker-met-plaatje */
/***************************/
/* search CSS mask-image --> werkt vooral in laatste versies browsers */
#masker-met-plaatje {
   background:url(../images/image-stars.jpg) center center / cover no-repeat;
   padding:0;
   display:flex;
   flex-wrap:wrap;
}

#masker-met-plaatje div {
   position:relative;
   flex-basis:50%;
   background:url(../images/image-background.jpg) center / cover no-repeat;
}

#masker-met-plaatje div:nth-of-type(1) {
   /* your code */
   -webkit-mask-image: url("../images/image-mask-svg-bw.svg");
   mask-image: url("../images/image-mask-svg-bw.svg");
}

#masker-met-plaatje div:nth-of-type(2) {
   /* your code */
   -webkit-mask-image: url("../images/image-mask-svg-translucent.svg");
   mask-image: url("../images/image-mask-svg-translucent.svg");
}

#masker-met-plaatje div:nth-of-type(3) {
   /* your code */
   -webkit-mask-image: url("../images/image-mask-svg-bw-image.svg");
   mask-image: url("../images/image-mask-svg-bw-image.svg");
}

#masker-met-plaatje div:nth-of-type(4) {
   /* your code */
   -webkit-mask-image: url("../images/image-mask-svg-translucent-image.svg");
   mask-image: url("../images/image-mask-svg-translucent-image.svg");
}

/* de labels */
#masker-met-plaatje div::after {
   content:attr(class);
   position:absolute;
   left:50%; bottom:.5em;
   padding:0 .25rem .0625rem;

   white-space:nowrap;
   font-size:.66em;
   line-height:1em;

   text-align:center;
   transform:translateX(-50%);
   transition:.75s;
}

#masker-met-plaatje:hover div::after {
	background-color:YellowGreen;
}


/***********************/
/* ID = mix-blend-mode */
/***********************/
/* search CSS mix-blend-mode --> werkt vooral in laatste versies browsers */
#mix-blend-mode {
   background:url(../images/image-stars.jpg) center / cover;
   display:grid;
   grid-template-columns:min-content;
   justify-content:center;
   align-content:center;
}

#mix-blend-mode p {
   margin:0; padding:.25em;
   font-size:2.75em;
   font-weight:700;
   line-height:1em;
   text-align:center;

   background-color:YellowGreen;
   color:black;

   /* your code*/
   mix-blend-mode:lighten;
}


/*************************/
/* ID = text-met-verloop */
/*************************/
#text-met-verloop {
   display:grid;
   grid-template-columns:min-content;
   justify-content:center;
   align-content:center;
}

#text-met-verloop p {
   margin:0; padding:.25em;
   font-size:2.75em;
   font-weight:700;
   line-height:1em;
   text-align:center;

   /* your code*/
	 -webkit-background-clip:text;
	 background-clip:text;
   -webkit-text-fill-color:transparent;
}

#text-met-verloop p:first-of-type {
   /* your code*/
   background-image:linear-gradient(
      45deg,
      dodgerblue 10%,
      yellowgreen,
      gold,
      Crimson,
      dodgerblue 90%
   );
}

#text-met-verloop p:last-of-type {
   /* your code*/
   background-image:linear-gradient(
      45deg,
      gold 20%,
      Crimson 20%, Crimson 40%,
      dodgerblue 40%, dodgerblue 60%,
      yellowgreen 60%, yellowgreen 80%,
      gold 80%
   );
}


/***********************************/
/* ID = text-met-scrolling-verloop */
/***********************************/
#text-met-scrolling-verloop {
   display:grid;
   grid-template-columns:min-content;
   justify-content:center;
   align-content:center;
}

#text-met-scrolling-verloop p {
   margin:0; padding:.25em;
   font-size:2.75em;
   font-weight:700;
   line-height:1em;
   text-align:center;

   background-size:200% 200%;
   -webkit-background-clip:text;
	 background-clip:text;
   -webkit-text-fill-color:transparent;
   animation:rainbow 1s infinite linear;
   animation-play-state:paused;
}

#text-met-scrolling-verloop p:first-of-type {
   background-image:linear-gradient(
      45deg,
      dodgerblue,
      yellowgreen,
      gold,
      crimson,
      dodgerblue,
      yellowgreen,
      gold,
      crimson,
      dodgerblue
      );
   }

#text-met-scrolling-verloop p:last-of-type {
	background-image:linear-gradient(
		45deg,
		crimson 12.5%,
		dodgerblue 12.5%, dodgerblue 25%,
		yellowgreen 25%, yellowgreen 37.5%,
		gold 37.5%, gold 50%,
		crimson 50%, crimson 62.5%,
		dodgerblue 62.5%, dodgerblue 75%,
		yellowgreen 75%, yellowgreen 87.5%,
		gold 87.5%, gold 100%,
		crimson 100%
	);
}

#text-met-scrolling-verloop:hover p {
   animation-play-state:running;
}

@keyframes rainbow {
   from{background-position:left bottom;}
   to{background-position:right top;}
}


/*******************/
/* ID = blob-merge */
/*******************/
#blob-merge > div {
	height:100%;
	background-color:white;
	filter:contrast(50);
}

#blob-merge div div{
	--maat:40%;
	--blur:10px;
   position: absolute;
   background-color:black;
	border-radius:50%;
	width:calc(var(--maat) * var(--krimp)); height:calc( var(--maat) * var(--krimp));
	left:calc( (100% - var(--maat) *  var(--krimp)) /2 );
	filter:blur(10px);
}

#blob-merge div div:first-child {
	--krimp:3/4;
	bottom:51.5%;
}

#blob-merge div div:last-child {
	--krimp:1;
	top:44%;
}


/**************************/
/* ID = blob-moving-merge */
/**************************/
@keyframes blob-moving-merge {
	0% { top:calc( 0% + var(--blur) * 1.5); }	
	100% { top:calc(100% - var(--maat) * var(--krimp) - var(--blur) * 1.5); }	
}

#blob-moving-merge > div {
	height:100%;
	background-color:white;
	filter:contrast(50);
}

#blob-moving-merge div div {
	--maat:40%;
	--duur:2s;
	--blur:10px;
   position: absolute;
   background-color:black;
	border-radius:50%;
	width:calc(var(--maat) * var(--krimp)); height:calc( var(--maat) * var(--krimp));
	left:calc( (100% - var(--maat) *  var(--krimp)) /2 );
	filter:blur(10px);
	animation:blob-moving-merge var(--duur) ease-in-out infinite alternate paused;
}

#blob-moving-merge div div:first-child {
	--krimp:3/4;
	animation-delay: calc(var(--duur) * -0.33);
}

#blob-moving-merge div div:last-child {
	--krimp:1;
	animation-delay: calc(var(--duur) * -1.33);
}

#blob-moving-merge:hover div {
	animation-play-state:running;
}

/******************************/
/* ID = background-blob-merge */
/******************************/
#background-blob-merge {
	background-color:yellowgreen;
}

#background-blob-merge > div {
	height:100%;
	background-color:white;
	filter:contrast(50);
	mix-blend-mode: darken;
}

#background-blob-merge div div {
	--maat:40%;
	--duur:2s;
	--blur:10px;
   position: absolute;
   background-color:black;
	border-radius:50%;
	width:calc(var(--maat) * var(--krimp)); height:calc( var(--maat) * var(--krimp));
	left:calc( (100% - var(--maat) *  var(--krimp)) /2 );
	filter:blur(10px);
	animation:blob-moving-merge var(--duur) ease-in-out infinite alternate paused;
}

#background-blob-merge div div:first-child {
	--krimp:3/4;
	animation-delay: calc(var(--duur) * -0.33);
}

#background-blob-merge div div:last-child {
	--krimp:1;
	animation-delay: calc(var(--duur) * -1.33);
}

#background-blob-merge:hover div {
	animation-play-state:running;
}


/***********************/
/* ID = svg-blob-merge */
/***********************/
#svg-blob-merge > div {
	position:relative;
	height:100%;	
	filter: url('#merge');
}

#svg-blob-merge div div {
  --maat:40%;
  --duur:2s;
  --blur:10px;
   position: absolute;
   background-color:yellowgreen;
  border-radius:50%;
  width:calc(var(--maat) * var(--krimp)); height:calc( var(--maat) * var(--krimp));
  left:calc( (100% - var(--maat) *  var(--krimp)) /2 );
  animation:blob-moving-merge var(--duur) ease-in-out infinite alternate paused;
}

#svg-blob-merge div div:first-child {
	--krimp:3/4;
	animation-delay: calc(var(--duur) * -0.33);
}

#svg-blob-merge div div:last-child {
	--krimp:1;
	animation-delay: calc(var(--duur) * -1.33);
}

#svg-blob-merge:hover div {
	animation-play-state:running;
}

#svg-blob-merge > div:hover {
	filter: url('#merge-show');
}


/**********************/
/* ID = blob-progress */
/**********************/
@keyframes blob-progress {
	0%, 30% {
		width:var(--maat); height:var(--maat);
		margin:calc(var(--maat) / 4);
	}	
	50% {
		width:calc(var(--maat) * 1.5); height:calc(var(--maat) * 1.5);
		margin:calc(var(--maat) * 0);
	}
	70%, 100% {
		width:var(--maat); height:var(--maat);
		margin:calc(var(--maat) / 4);
	}	
}

#blob-progress > div {
	position:relative;
	height:100%;	
	filter: url('#merge');
	
	display:flex;
	justify-content:center;
	align-items:center;
}

#blob-progress div div {
	--maat:1.75em;
	--duur:1s;
	--blur:10px;
   width:var(--maat); height:var(--maat);
	margin:calc(var(--maat) / 4);
	background-color:yellowgreen;
	border-radius:50%;
	animation:blob-progress var(--duur) ease-in-out infinite paused;
}

#blob-progress div div:nth-of-type(1) { animation-delay:calc(var(--duur) * -1 / 5); }
#blob-progress div div:nth-of-type(2) { animation-delay:calc(var(--duur) * 0 / 5); }
#blob-progress div div:nth-of-type(3) { animation-delay:calc(var(--duur) * 1 / 5); }
#blob-progress div div:nth-of-type(4) { animation-delay:calc(var(--duur) * 2 / 5); }
#blob-progress div div:nth-of-type(5) { animation-delay:calc(var(--duur) * 3 / 5); }

#blob-progress:hover div {
	animation-play-state:running;
}

#blob-progress > div:hover {
	filter: url('#merge-show');
}


/****************************/
/* ID = fancy-floating-menu */
/****************************/
#blob-floating-menu nav {
   position:absolute;
   left:0; right:0; top:0; bottom:0;
}

/* menu items */
#blob-floating-menu ul {
	position:absolute;
	left:5%; right:5%; top:5%; bottom:5%;
}

#blob-floating-menu ul::after,
#blob-floating-menu li {
	position:absolute;
	width:22.5%; height:22.5%;
	right:6.25%; bottom:6.25%;
  border-radius:50%;
}

#blob-floating-menu ul {
	--translateY:0;
   padding:0;
   list-style:none;
	filter: url('#small-merge');
}

#blob-floating-menu ul:hover {
	filter: url('#small-merge-show');
}

/* menu knop & item */
#blob-floating-menu ul::after,
#blob-floating-menu li {
   background-color:yellowgreen;
   transition:1s;
}

#blob-floating-menu li {
	transform:rotate(-135deg) scale(.1);
}

#blob-floating-menu:hover li:nth-of-type(1) {
  /* your code */
  transform:rotate(7.5deg) translateY(-150%) rotate(-7.5deg);
  transition:.625s .375s cubic-bezier(0.000, 0.000, 0.333, 1.500);
}
#blob-floating-menu:hover li:nth-of-type(2) {
	/* your code */
	transform:rotate(-27.5deg) translateY(-150%) rotate(27.5deg);
	transition:.75s .25s cubic-bezier(0.000, 0.000, 0.333, 1.500);
}
#blob-floating-menu:hover li:nth-of-type(3) {
	/* your code */
	transform:rotate(-62.5deg) translateY(-150%) rotate(62.5deg);
	transition:.875s .125s cubic-bezier(0.000, 0.000, 0.333, 1.500);
}
#blob-floating-menu:hover li:nth-of-type(4) {
	/* your code */
	transform:rotate(-97.5deg) translateY(-150%) rotate(97.5deg);
	transition:1s cubic-bezier(0.000, 0.000, 0.333, 1.500);
}

/* menu knop en link */
#blob-floating-menu ul::after,
#blob-floating-menu a {
	color:var(--main-color);
	display:flex;
	justify-content:center;
	align-items:center;
}

#blob-floating-menu a {
	width:100%; height:100%;
}

#blob-floating-menu ul::after {
	content:"menu";
}

/* kruisje */
#blob-floating-menu nav::before,
#blob-floating-menu nav::after {
	content:"";
	position:absolute;
	width:12px; height:2px;
	right:calc(20% - 5px); bottom:calc(20% - 1px);
	background-color:var(--main-color);

	transform: translateY(8px);
	transition:.375s;
	z-index:10;
}

#blob-floating-menu:hover nav::before {
   transform: translateY(12px) rotate(45deg);
   transition:.5s cubic-bezier(0.000, 0.000, 0.333, 1.500);
}
#blob-floating-menu:hover nav::after {
   transform: translateY(12px) rotate(-45deg);
   transition:.5s cubic-bezier(0.000, 0.000, 0.333, 1.500);
}