:root {
    --lijfLight:#5ad0ee;
    --lijfDark:#56b6cc;
    --lijfAccent:#32499c;
    --oor:#be93dd;
}

body {
	margin: 0;
    overflow:hidden;
}

main {
    width:100vw;
    height:100vh;
    background-color:white;
    animation:dagnacht 120s 5s alternate infinite linear;
}

@keyframes dagnacht {
    0%,20%{ background-color:white; }
    50%{ background-color:#5ad0ee; }
    80%, 100%{ background-color:rgb(36, 31, 71); }
}

main * {
    position: absolute;
}

/***************/
/* ACHTERGROND */
/***************/
.background {
	height: 900px;
	width: 900px;
	left: calc(50% - 450px);
	top: calc(50% - 450px);
    overflow:hidden;
    
    border-radius: 50%;
    background: linear-gradient(#478ab7, #81adc7 50%, #418536 50%);
    mix-blend-mode: multiply;
    transition:border-radius 1s;
    
    -webkit-clip-path: ellipse(49.9% 49.9% at 50% 50%);
    clip-path: ellipse(49.9% 49.9% at 50% 50%);
}

@media (max-width: 900px) and (max-height: 900px) {
    .background {
        border-radius:0;
        -webkit-clip-path:none;
        clip-path:none;
    }
}
    
/* wolken */
.wolk {
    animation-iteration-count: infinite;
    animation-timing-function:linear;
}

.wolk.een {
	left:900px;
	animation-name: wolk1Ani;
	animation-duration: 21.0s;
}

.wolk.twee {
	left:1000px;
	top:280px;
	animation-name: wolk2Ani;
	animation-duration: 28.0s;
}

.wolk.drie {
	left:1000px;
	top:140px;
	animation-name: wolk3Ani;
	animation-duration: 38.0s;
}

@keyframes wolk1Ani {
	0% { transform: translateX(0px); }
	100% { transform: translateX(-1060px); }
}

@keyframes wolk2Ani {
	0% { transform: translateX(0px) scale(0.7); }
	100% { transform: translateX(-1160px) scale(0.7); }
}

@keyframes wolk3Ani {
	0% { transform: translateX(0px) scale(1.1); }
	50% { transform: translateX(0px) scale(1.1); }
	100% { transform: translateX(-1260px) scale(1.1); }
}

.wolk div {
    background-color: white;
}

.wolk .bol {
    border-radius: 50%;
}

.wolk div:nth-child(1) {
    height: 60px;
	width: 60px;
	left: 10px;
	top: 100px;
}

.wolk div:nth-child(2) {
    height: 80px;
	width: 80px;
	left: 80px;
	top: 80px;
}

.wolk div:nth-child(3) {
    height: 100px;
	width: 100px;
	left: 35px;
	top: 60px;  
}

.wolk div:nth-child(4) {
	height: 10px;
	width: 80px;
	left: 40px;
	top: 150px;
}

/***********/
/* WHOOPER */
/***********/
.whooper {
	position: absolute;
	left: 46.5%;
	top: 53%;
}

/*schaduw */
.schaduw {
	width: 500px;
	height: 70px;
    top: 210px;
	left: -200px;
    background-color: rgba(0,0,0,.2);
	border-radius: 50%;
}

/***********/
/* LICHAAM */
/***********/
.lichaam {
	height: 200px;
	width: 140px;
	transform-origin: center bottom;
	animation: lichaamAni 0.5s infinite ease-in-out alternate;
}

@keyframes lichaamAni {
	from { transform: rotate(-3deg); }
	to{ transform: rotate(3deg); }
}

/**********/
/* STAART */
/**********/
.staart {
    height: 185px;
	width: 235px;
    left: -200px;
	transform-origin: right bottom;
	animation: staartAni 0.5s infinite ease-in-out alternate;
}

@keyframes staartAni {
	from { transform: rotate(0deg); }
	to { transform: rotate(12deg); }
}

.vorm1 {
	width: 100px;
	height: 200px;
    background-color: var(--lijfLight);
    border-radius: 50% 50% 0 50% / 50%;
	transform: rotate(-10deg);
}

.vorm2 {
	width: 100px;
	height: 100px;
    top: 110px;
	left: 27px;
	background-image:linear-gradient(225deg, transparent 50%, var(--lijfLight) 50%);
	border-radius: 50%;
}

.vorm3 {
	width: 220px;
	height: 100px;
    top: 110px;
	left: 18px;
    background-image:radial-gradient(transparent 25%, var(--lijfLight) 25%);
    background-size:622px 424px;
    background-position: -119px -227px;
	border-radius: 0 0 50% 30% / 0 0 50% 70%;
}

.vorm4 {
	width: 110px;
	height: 14px;
	top: 198px;
	left: 65px;
    background-color: var(--lijfLight);
	border-radius: 50%;
	transform: rotate(-2deg);
}

/********/
/* BUIK */
/********/
.buik {
    width:140px;
    height:220px;
    background-color: var(--lijfDark);
    border-radius: 50% / 67% 67% 32% 32%;
}

/* strepen */
.buik > div {
    border-radius: 50%;
	border-style: solid;
	border-color: transparent transparent var(--lijfAccent) transparent;
	border-width: 15px;
}

.buik > div div {
    height: 15px;
	width: 15px;
    background-color: var(--lijfAccent);
    border-radius: 50%;
}

/* streep 1*/
.buik > div:nth-child(1) {
	height: 30px;
	width: 60px;
	top: 25px;
	left: 25px;
	transform: rotate(-15deg);
}
.buik > div:nth-child(1) .up {
	left: -6px;
	top: 22px;
}
.buik > div:nth-child(1) .down {
	right: -6px;
	top: 22px;
}

/* streep 2*/
.buik > div:nth-child(2) {
	height: 35px;
	width: 70px;
	top: 55px;
	left: 25px;
	transform: rotate(-13deg);
}
.buik > div:nth-child(2) .up {
	left: -6px;
	top: 25px;
}
.buik > div:nth-child(2) .down {
	right: -6px;
	top: 25px;
}

/* streep 3*/
.buik > div:nth-child(3) {
	height: 40px;
	width: 80px;
	top: 85px;
	left: 25px;
	transform: rotate(-11deg);
}
.buik > div:nth-child(3) .up {
	left: -5px;
	top: 29px;
}
.buik > div:nth-child(3) .down {
	right: -5px;
	top: 29px;
}

/*********/
/* HOOFD */
/*********/
.heleHoofd {
	width: 250px;
	height: 200px;
	top: -155px;
	left: -35px;
	transform-origin: center bottom;
	animation: hoofdAni 0.5s infinite ease-in-out alternate;
}

@keyframes hoofdAni {
	0% { transform: rotate(-25deg); }
	100% { transform: rotate(-17deg); }
}

/********/
/* OREN */
/********/
.oor {
    width: 120px;
	height: 15px;
    top: 100px;
    background-color: var(--oor);
    border-radius: 100% 0% 0% 100%;
}
.linker.oor {
	left: -115px;
}
.rechter.oor {
    right: -115px;
    transform: scaleX(-1);
}

/* strepen */
.oor > div {
	border-radius: 50%;
	border-style: solid;
    border-width: 15px;
    border-color: transparent transparent transparent var(--oor);
}

.oor > div div {
	height: 15px;
	width: 15px;
    border-radius: 50%;
	background-color: var(--oor);
}

/* streep 1*/
.oor .streep1 {
    height: 100px;
	width: 50px;
    top: -58px;
    left: 75px;
}
.oor .streep1 .up {
	left: -3px;
	top: -2px;
}
.oor .streep1 .down {
	left: -3px;
	bottom: -2px;
}
    
/* streep 2*/
.oor .streep2 {
    height: 80px;
	width: 40px;
    top: -48px;
    left: 28px;
}
.oor .streep2 .up {
	left: -6px;
	top: -3px;
}
.oor .streep2 .down {
	left: -6px;
	bottom: -3px;
}

/*********/
/* HOOFD */
/*********/
.hoofd {
	width: 100%;
	height: 100%;
    background-color: var(--lijfLight);
	border-radius: 50%;
}

/********/
/* OGEN */
/********/
.oog {
	width: 25px;
	height: 45px;
	top: 3em;
    border-radius: 50%;
	background:#323131 radial-gradient(ellipse at bottom, RGBa(255, 255, 255, .3) 25%, #323131 25%) center center / 300% 100%;
}

.hoofd div:nth-last-of-type(2) {
	left: 70px;
}

.hoofd div:last-of-type {
	right: 70px;
}

.oog div {
	width: 15px;
	height: 20px;
	top: 10%;
    left: 1px;
    background-color: white;
    border-radius: 50%;
}

/********/
/* MOND */
/********/
.mond {
	width: 160px;
	height: 85px;
	top: 115px;
	left: 45px;
    background-color: #cb5161;
    border-radius: 20% 20% 100% 100% / 100%;
	overflow: hidden;
	animation: mondAni 1s infinite ease-in-out alternate;
}

@keyframes mondAni {
	0%{ transform: scale(1); }
	100% { transform: scale(0.95); }
}

.tong {
	width: 160px;
	height: 80px;
	top: 7px;
	left: -20px;
    background-color: #fe9bb7;
    border-radius: 30% 100% 50% 100%;
	animation: tongAni 1s infinite ease-in-out alternate;
}

@keyframes tongAni {
	0%{ transform: scale(1); }
	100% { transform: scale(1.05); }
}

/**********/
/* VOETEN */
/**********/
.voet {
    height: 60px;
	width: 80px;
    top: 195px;
    border-radius: 50% 50% 20% 20% / 50% 50% 20% 20%;
    animation-duration: 1.0s;
	animation-iteration-count: infinite;
}
.voet.rechts {
	left: 90px;
    background-color: var(--lijfDark);
	animation-name: walkCycleLinks;
}
.voet.links {
	left: -15px;
    background-color: var(--lijfLight);
	animation-name: walkCycleRechts;
}

@keyframes walkCycleRechts {
	0% { transform: translate(0px, 0px); }
	15% { transform: translate(7px, -15px);	}
	30% { transform: translate(15px, -20px); }
	45% { transform: translate(22px, -15px) }
	60% { transform: translate(30px, 0px); }
	100% { transform: translate(0px, 0px); }
}

@keyframes walkCycleLinks {
	0% { transform: translate(0px, 0px); }
	40% { transform: translate(-30px, 0px); }
	55% { transform: translate(-22px, -10px); }
	70% { transform: translate(-15px, -20px); }
	85% { transform: translate(-7px, -10px); }
	100% { transform: translate(0px, 0px); }
}