/********************/
/* ALGEMENE STIJLEN */
/********************/

*, *::before, *::after {
  box-sizing: border-box;
}

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

	overflow:hidden;
}

body {
  --mainColor:#37332f;
	--accentColor:#1b75b3;
	--inverseColor:#e48a4c;
	--backgroundColor:#e1ddd9;
	--maxWidth:32rem;

	background-color:black;
	background-image:
		radial-gradient(ellipse at center bottom, #ffffff00, #ffffff00 64%),
		radial-gradient(circle at center bottom, blue, midnightblue 20%, black 90%);
	background-size:calc(20% + 33em) 18%, 100% 100%;
	background-position:center bottom;
	background-repeat:no-repeat;

	overflow:hidden;
}

main {
	position:relative;
	width:100%; height:100%;
	filter: url('#merge');
}

/* DE BLOBS */
div {
	position:absolute;

	background-image: radial-gradient(circle at center bottom, gold, tomato 25%, crimson 50%);
	background-attachment:fixed;
	background-size:100% 100%;

	/* will-change:transform; */
}

/* DE MOVING BLOBS */
@keyframes opneer {
	0% {
		width:calc(var(--maatX, 10vh) * 1.1);
		height:calc(var(--maatY, 10vh) * .9);
		left:calc(50% - var(--maatX, 10vh) / 2 + var(--deltaX, 0%) );
		top:calc(100% - 7vh);
	}
	25% {
		width:calc(var(--maatX, 10vh) * .9);
		height:calc(var(--maatY, 10vh) * 1.1);
	}
	50% {
		width:calc(var(--maatX, 10vh) * 1.1);
		height:calc(var(--maatY, 10vh) * .9);
		left:calc(50% - var(--maatX, 10vh) / 2 + var(--deltaX, 0%) * .125);
		top:calc(0% + var(--maatY, 10vh) * .25 );
	}
	75% {
		width:calc(var(--maatX, 10vh) * .9);
		height:calc(var(--maatY, 10vh) * 1.1);
	}
	100% {
		width:calc(var(--maatX, 10vh) * 1.1);
		height:calc(var(--maatY, 10vh) * .9);
		left:calc(50% - var(--maatX, 10vh) / 2 - var(--deltaX, 0%) );
		top:calc(100% - 7vh);
	}
}

@keyframes flubber {
	0% {
		border-radius:
		var(--borderX1, 50%)
		calc(100% - var(--borderX1, 50%))
		var(--borderX2, 50%)
		calc(100% - var(--borderX2, 50%))
		/
		var(--borderY1, 50%)
		var(--borderY2, 50%)
		calc(100% - var(--borderY2, 50%))
		calc(100% - var(--borderY1, 50%));
	}
	100% {
		border-radius:
		var(--borderX3, 50%)
		calc(100% - var(--borderX3, 50%))
		var(--borderX4, 50%)
		calc(100% - var(--borderX4, 50%))
		/
		var(--borderY3, 50%)
		var(--borderY4, 50%)
		calc(100% - var(--borderY4, 50%))
		calc(100% - var(--borderY3, 50%));
	}
}

div:not(:last-of-type) {
	border-radius:50%;

	animation:
		opneer calc(var(--opneerDuration, 48s) * 2) var(--opneerDelay, 0s) ease-in-out infinite alternate,
		flubber calc(var(--opneerDuration, 48s) / 3) var(--opneerDelay, 0s) ease-in-out infinite alternate;
	}

div:nth-of-type(1) {
	--maatX:8vh;
	--maatY:8vh;

	--deltaX:-16%;

	--opneerDuration:33s;
	--opneerDelay:1s;

	--borderX1:55%;
	--borderX2:50%;
	--borderX3:40%;
	--borderX4:55%;
	--borderY1:40%;
	--borderY2:60%;
	--borderY3:55%;
	--borderY4:45%;
}

div:nth-of-type(2) {
	--maatX:9vh;
	--maatY:9vh;

	--deltaX:12%;

	--opneerDuration:53s;
	--opneerDelay:9s;

	--borderX1:55%;
	--borderX2:40%;
	--borderX3:50%;
	--borderX4:45%;
	--borderY1:50%;
	--borderY2:45%;
	--borderY3:60%;
	--borderY4:50%;
}

div:nth-of-type(3) {
	--maatX:12vh;
	--maatY:12vh;

	--deltaX:-14%;

	--opneerDuration:29s;
	--opneerDelay:17s;

	--borderX1:35%;
	--borderX2:40%;
	--borderX3:45%;
	--borderX4:50%;
	--borderY1:55%;
	--borderY2:60%;
	--borderY3:50%;
	--borderY4:60%;
}

div:nth-of-type(4) {
	--maatX:13vh;
	--maatY:13vh;

	--deltaX:16%;

	--opneerDuration:65s;
	--opneerDelay:27s;

	--borderX1:45%;
	--borderX2:40%;
	--borderX3:60%;
	--borderX4:55%;
	--borderY1:50%;
	--borderY2:45%;
	--borderY3:55%;
	--borderY4:60%;
}

div:nth-of-type(5) {
	--maatX:16vh;
	--maatY:16vh;

	--deltaX:-17%;

	--opneerDuration:57s;
	--opneerDelay:35s;

	--borderX1:45%;
	--borderX2:50%;
	--borderX3:50%;
	--borderX4:40%;
	--borderY1:55%;
	--borderY2:60%;
	--borderY3:50%;
	--borderY4:60%;
}

div:nth-of-type(6) {
	--maatX:17vh;
	--maatY:17vh;

	--deltaX:15%;

	--opneerDuration:41s;
	--opneerDelay:43s;

	--borderX1:40%;
	--borderX2:45%;
	--borderX3:60%;
	--borderX4:55%;
	--borderY1:45%;
	--borderY2:60%;
	--borderY3:55%;
	--borderY4:50%;
}

div:nth-of-type(7) {
	--maatX:20vh;
	--maatY:20vh;

	--deltaX:-12%;

	--opneerDuration:25s;
	--opneerDelay:51s;

	--borderX1:50%;
	--borderX2:45%;
	--borderX3:40%;
	--borderX4:55%;
	--borderY1:50%;
	--borderY2:45%;
	--borderY3:60%;
	--borderY4:55%;
}

div:nth-of-type(8) {
	--maatX:21vh;
	--maatY:21vh;

	--deltaX:14%;

	--opneerDuration:37s;
	--opneerDelay:59s;

	--borderX1:40%;
	--borderX2:60%;
	--borderX3:55%;
	--borderX4:50%;
	--borderY1:45%;
	--borderY2:60%;
	--borderY3:55%;
	--borderY4:50%;
}

div:nth-of-type(9) {
	--maatX:24vh;
	--maatY:24vh;

	--deltaX:-10%;

	--opneerDuration:21s;
	--opneerDelay:67s;

	--borderX1:45%;
	--borderX2:55%;
	--borderX3:50%;
	--borderX4:40%;
	--borderY1:45%;
	--borderY2:55%;
	--borderY3:60%;
	--borderY4:50%;
}

div:nth-of-type(10) {
	--maatX:25vh;
	--maatY:25vh;

	--deltaX:10%;

	--opneerDuration:49s;
	--opneerDelay:75s;

	--borderX1:55%;
	--borderX2:45%;
	--borderX3:50%;
	--borderX4:60%;
	--borderY1:50%;
	--borderY2:40%;
	--borderY3:45%;
	--borderY4:60%;
}

div:nth-of-type(11) {
	--maatX:26vh;
	--maatY:26vh;

	--deltaX:-4%;

	--opneerDuration:45s;
	--opneerDelay:83s;

	--borderX1:50%;
	--borderX2:45%;
	--borderX3:55%;
	--borderX4:45%;
	--borderY1:55%;
	--borderY2:55%;
	--borderY3:40%;
	--borderY4:55%;
}

div:nth-of-type(12) {
	--maatX:27vh;
	--maatY:27vh;

	--deltaX:6%;

	--opneerDuration:61s;
	--opneerDelay:91s;

	--borderX1:60%;
	--borderX2:40%;
	--borderX3:60%;
	--borderX4:45%;
	--borderY1:30%;
	--borderY2:60%;
	--borderY3:40%;
	--borderY4:55%;
}

div:nth-of-type(13) {
	--maatX:28vh;
	--maatY:28vh;

	--deltaX:-7%;

	--opneerDuration:61s;
	--opneerDelay:29s;

	--borderX1:45%;
	--borderX2:55%;
	--borderX3:50%;
	--borderX4:60%;
	--borderY1:55%;
	--borderY2:60%;
	--borderY3:45%;
	--borderY4:50%;
}

div:nth-of-type(14) {
	--maatX:29vh;
	--maatY:29vh;

	--deltaX:3%;

	--opneerDuration:51s;
	--opneerDelay:61s;

	--borderX1:50%;
	--borderX2:60%;
	--borderX3:55%;
	--borderX4:45%;
	--borderY1:60%;
	--borderY2:45%;
	--borderY3:50%;
	--borderY4:45%;
}

div:nth-of-type(15) {
	--maatX:10vh;
	--maatY:10vh;

	--deltaX:-6%;

	--opneerDuration:55s;
	--opneerDelay:83s;

	--borderX1:50%;
	--borderX2:55%;
	--borderX3:45%;
	--borderX4:60%;
	--borderY1:45%;
	--borderY2:50%;
	--borderY3:45%;
	--borderY4:55%;
}

div:nth-of-type(16) {
	--maatX:11vh;
	--maatY:11vh;

	--deltaX:8%;

	--opneerDuration:43s;
	--opneerDelay:61s;

	--borderX1:45%;
	--borderX2:50%;
	--borderX3:55%;
	--borderX4:45%;
	--borderY1:50%;
	--borderY2:60%;
	--borderY3:50%;
	--borderY4:55%;
}

div:nth-of-type(17) {
	--maatX:14vh;
	--maatY:14vh;

	--deltaX:-2%;

	--opneerDuration:59s;
	--opneerDelay:87s;

	--borderX1:55%;
	--borderX2:50%;
	--borderX3:40%;
	--borderX4:60%;
	--borderY1:40%;
	--borderY2:60%;
	--borderY3:40%;
	--borderY4:60%;
}

div:nth-of-type(18) {
	--maatX:15vh;
	--maatY:15vh;

	--deltaX:3%;

	--opneerDuration:67s;
	--opneerDelay:31s;

	--borderX1:60%;
	--borderX2:60%;
	--borderX3:60%;
	--borderX4:60%;
	--borderY1:40%;
	--borderY2:40%;
	--borderY3:40%;
	--borderY4:40%;
}

/* DE BODEM */
div:last-of-type {
	width:calc(20% + 32em);
	height:12vh;
	right:calc(50% - (20% + 32em) / 2);
	bottom:0; 

	border-radius:50% 50% 0 0 / 100% 100% 0 0;
}

/* HET BAKJE */
aside {
	position:absolute;
	width:100%;
	height:6vh;
	right:0;
	bottom:-2px;
	background-image:
		linear-gradient(#fff, #ffcc00 2px, #cccccc88 6px, #cccccc00 50% calc(100% - 6px), #333),
		linear-gradient(to right, #333, #999 15%, #ccc 30%, #fff, #ccc 45%, #999 60%, #333 85%);
	background-blend-mode:overlay;
}

aside::after {
	content:"";
	position:absolute;
	
	width:100%;
	height:6vh;
	
	left:0%;
	bottom:calc(100% - .5px);
	
	background-image:
		radial-gradient(ellipse at center bottom, #ffffffff, #ffffff00 25%),
		radial-gradient(ellipse at center bottom, #ffffffcc, #ffffff00 50%);
}

@media (min-width:36em) {
	aside {
		width:calc(20% + 33em);
		right:calc(50% - (20% + 33em) / 2);	
		border-radius:5vh 5vh 0 0;
	}

	aside::after {
		width:calc(16% + 32em);
		left:calc(50% - (16% + 32em) / 2);
	}
}