* {
  box-sizing: border-box;
  margin: 0; padding: 0;
}

/********/
/* BODY */
/********/
html, body {
  position: relative;	
  height:100%;
  overflow: hidden;
}

body {
  display:flex;
  justify-content:center;
  align-items:center;
  
  background-color: #7cbf4b;  
  background-color: #7cbf4b;  
  
  transition:background-color 1.5s;
}

body.party {
  background-color: #F285AD; 
}

/***********/
/* AVACADO */
/***********/
@keyframes wiegen {
  0% {
    transform: rotate( calc(var(--wieghoek) * 1deg) );
  }
  100% {
    transform: rotate( calc(var(--wieghoek) * -1deg) );
  }
}

.avocado {
  --schilkleur:#3A4026;
  --vruchtvleesdonker:#A8FD6A;
  --vruchtvleeslicht:#DCFD90;
  --pitkleur:#A66C26;
  --pitschaduw:#c8dD5A;
  --pitglim:#A97728;
  --tandkleur:rgb(255,230,204);
  
  --wieghoek:6;
  
  position: relative;	
  width: 78vmin; height: 91vmin;
}

body.party .avocado {
  transform-origin:50% 90%;
  
  animation-name: wiegen;
  animation-duration: 1.5s;
  animation-delay:  -.75s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}


/*********/
/* SCHIL */
/*********/
.schil {
  position: relative;	
  height: 100%; width: 100%;
}

.schil div {
  position: absolute;
  background-color:var(--schilkleur);
}

.schil div.schil1 {
  width: 82%; height: 74%;
  left: 9%; top: 5%;
  clip-path: ellipse(40% 50% at 50% 50%);
  transform: rotate(0deg);
}

.schil div.schil2 {
  width: 101%; height: 86%;
  left:0%; top: 16%;
  clip-path: ellipse(40% 43% at 50% 50%);
  transform: rotate(0deg);
}

.schil div.schil3 {
  width: 20%; height: 10%;
  left: 12%; top: 24%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(0deg);
}

.schil div.schil4 {
  width: 18%; height: 10%;
  left: 73.5%; top: 32%;
  clip-path: ellipse(10% 28% at 50% 51%);
  transform: rotate(150deg);
}

.schil div.schil5 {
  width: 18%; height: 20%;
  left: 72%; top: 21%;
  clip-path: ellipse(10% 28% at 50% 51%);
  transform: rotate(150deg);
}

.schil div.schil6 {
  width: 10vmin; height: 15vmin;
  left: 60%; top: 2%;
  clip-path: ellipse(10% 28% at 50% 51%);
  transform: rotate(130deg);
}

.schil div.schil7 {
  width: 19%; height: 20.5%;
  left: 55%; top: 83%;
  clip-path: ellipse(10% 28% at 50% 51%);
  transform: rotate(75deg);
}

.schil div.schil8 {
  width: 20%; height: 20%;
  left: 13.5%; top: 26%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(50deg);
}

.schil div.schil9 {
  width: 15%; height: 15%;
  left: 6.3%; top: 43%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(0deg);
}

.schil div.schil10 {
  width: 15%; height: 15%;
  left: 5.5%; top: 55%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(160deg);
}

.schil div.schil11 {
  width: 19%; height: 15%;
  left: 7.5%; top: 62%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(120deg);
}

.schil div.schil12 {
  width: 15%; height: 17%;
  left: 10%; top: 69%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(150deg);
}

.schil div.schil13 {
  width: 14%; height: 16%;
  left: 21.5%; top: 80%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(110deg);
}

.schil div.schil14 {
  width: 12%; height: 14%;
  left: 36.5%; top: 87.5%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(110deg);
}

.schil div.schil15 {
  width: 10%; height: 10%;
  left: 49%; top: 3.5%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(180deg);
}

.schil div.schil16 {
  width: 16%; height: 18vmin;
  left: 74.5%; top: 65%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(180deg);
}

.schil div.schil17 {
  width: 16%; height: 16%;
  left: 79.5%; top: 53%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(160deg);
}

.schil div.schil18 {
  width: 20%; height: 17%;
  left: 77%; top: 45%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(10deg);
}

.schil div.schil19 {
  width: 15%; height: 15%;
  left: 19.5%; top: 17%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(150deg);
}

.schil div.schil20 {
  width: 18%; height: 14%;
  left: 65%; top: 15%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(175deg);
}

.schil div.schil21 {
  width: 15%; height: 15%;
  left: 33%; top: 3%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(40deg);
}

.schil div.schil22 {
  width: 15%; height: 15%;
  left: 26%; top: 5%;
  clip-path: ellipse(21% 45% at 50% 51%);
  transform: rotate(40deg);
}

.schil div.schil23 {
  width: 18%; height: 20%;
  left: 76%; top: 35%;
  clip-path: ellipse(10% 28% at 50% 51%);
  transform: rotate(10deg);
}


/**********/
/* INHOUD */
/**********/
.avacadoinhoud {
  position: absolute;
  width: 100%; height: 100%;
  left:0; top:0;
}


/**********************/
/* VRUCHTVLEES MEDIUM */
/**********************/
.av {
  position: absolute;
  width:100%; height:100%;
  left:0; top:0;
  
  filter: url('#merge');
}

.avmed1, .avmed2 {
  position: absolute;
  background-color: var(--vruchtvleesdonker);
}

.avmed1 {
  width: 50%; height: 45%;
  left: 25%; top: 9%;
  border-radius: 50%;
}

.avmed2 {
  width: 70%; height: 68%;
  left: 15%; top: 23%;
  border-radius: 40%/50%;
}

.avlicht1, .avlicht2, .avlicht3 {
  position: absolute;
  background-color: var(--vruchtvleeslicht);
}

.avlicht1 {
  width: 32vmin; height: 32vmin;
  left:calc(50% - 16vmin); top: 13%;
  border-radius: 50%;
}

.avlicht2, .avlicht3 {
  width: 40%; height: 56%;
  top: 30%;
}

.avlicht2 {
  left: 19%;
  border-radius: 45% 45% 55% 45% / 42% 25% 75% 58%;
}

.avlicht3 {
  left: 41%;
  border-radius: 45% 45% 45% 55% / 25% 48% 52% 75%;
}


/*******/
/* PIT */
/*******/
.pit {
  position: absolute;
  width: 32vmin; height: 32vmin;
  left:calc(50% - 16vmin); top: 47%;
  
  background-color: var(--pitkleur);
  border-radius: 50%;
  box-shadow:0 0 0 1vmin var(--pitschaduw);
}

.pit::before {
  content:"";
  position:absolute;
  width:60%; height:30%;
  left:20%; top:35%;
  
  background-color:var(--pitglim);
  border-radius: 50% / 60% 60% 40% 40%;
  transform:rotate(40deg) translateY(-110%);
}

body.party .pit {
  --wieghoek:24;
  
  animation-name: wiegen;
  animation-duration: 1.5s;
  animation-delay:  -2.25s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/********/
/* OGEN */
/********/
@keyframes knipperen {
  0%, 47% { transform:scaleY(1); }
  50% { transform:scaleY(0); }
  53%, 100% { transform:scaleY(1); }
}

.oog {
  position:absolute;
  width:2.4vmin; height:2.4vmin;
  
  border-radius:50%;
  background-image: radial-gradient(ellipse at 65% center, black .75vmin, rgba(0,0,0,.2) .75vmin);
  background-size:100% 180%;
  background-position:center center;
  
  animation:knipperen 4.5s linear infinite;
}

.avlicht1 .oog:nth-of-type(1) {
  left:calc(37.5% - 1.2vmin); top:30%;
}

.avlicht1 .oog:nth-of-type(2) {
  left:calc(62.5% - 1.2vmin); top:30%;
}

.pit .oog:nth-of-type(1) {
  left:calc(42.5% - 1.2vmin); top:45%;
  animation-duration:4.8s;
  animation-delay:-1s;
}

.pit .oog:nth-of-type(2) {
  left:calc(57.5% - 1.2vmin); top:45%;
  animation-duration:4.8s;
  animation-delay:-1s;
}


/**********/
/* MONDEN */
/**********/
@keyframes avocadomond {
  0%   { transform:scale(1, 1.0); }
  10%  { transform:scale(1, 0.9); }
  20%  { transform:scale(1, 1.1); }
  30%  { transform:scale(1, 0.7); }
  40%  { transform:scale(1, 1.2); }
  50%  { transform:scale(1, 1.0); }
  60%  { transform:scale(1, 1.1); }
  70%  { transform:scale(1, 0.8); }
  80%  { transform:scale(1, 1.1); }
  90%  { transform:scale(1, 0.9); }
  100% { transform:scale(1, 1.0); }
}

.mond {
  position:absolute;
  
  background-size:100% 150%;
  background-position:center center;
  
  will-change:transform;
}

.avlicht1 .mond {
  width:3.6vmin; height:2vmin;
  left:calc(50% - 1.8vmin); top:calc(41% - 1vmin);
  
  background-image: radial-gradient(
    ellipse at 65% 40%, 
    black calc(100% - 1.5vmin), 
    rgba(0,0,0,.2) calc(100% - 1.5vmin)
  );
  border-radius:1.2vmin 1.2vmin 50% 50% / .8vmin .8vmin 1.2vmin 1.2vmin;
}

.pit .mond {
  width:2.4vmin; height:1.4vmin;
  left:calc(50% - 1.2vmin); top:calc(55% - .8vmin);
  
  background-image: radial-gradient(
    ellipse at 65% 40%, 
    black calc(100% - 1.1vmin), 
    rgba(0,0,0,.2) calc(100% - 1.1vmin)
  );
  border-radius:.6vmin .6vmin 50% 50% / .6vmin .6vmin .8vmin .8vmin;
  overflow:hidden;
}

.pit .mond::before,
.pit .mond::after {
  content:"";
  position:absolute;
  width:.5vmin; height:.3vmin;
  top:0;
  
  background-color: var(--tandkleur);
  border-radius:0 0 .2vmin .2vmin;
}

.pit .mond::before {
  left:calc(50% + .15vmin);  
}

.pit .mond::after {
  right:calc(50% - .05vmin);
}

body.party .mond {
  animation-name: avocadomond;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-iteration-count: alternate;
}

body.party .pit .mond {
  animation-delay:-.5s;
}

/**********/
/* HANDEN */
/**********/
@keyframes aaienrechts {
  0% {transform: translatex(0) rotate(10deg);}
  100% {transform: translatex(15%) rotate(30deg);}
}

@keyframes aaienlinks {
  0% {transform: translatex(0) rotate(-10deg);}
  100% {transform: translatex(-15%) rotate(-30deg);}
}

.hand {
  position:absolute;
  width: 18%; height: 6%;
  top:63%;
  
  background-color:var(--vruchtvleeslicht);
  
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.hand.links {
  left:22%;
  
  border-radius: 0 30% 70% 0;
  
  transform-origin:10% center;
  animation-name: aaienrechts;
}

.hand.rechts {
  right:22%;
  
  border-radius: 30% 0 0 70%;
  
  transform-origin:90% center;
  animation-name: aaienlinks;
}

/* duimen */
.hand::before {
  content:"";
  position:absolute;
  width:1vmin; height:2vmin;
  top:-1vmin;
  
  background-color:inherit;
  border-radius:.5vmin .5vmin 0 0;
}

.hand.links::before {
  right:25%;
  transform:rotate(45deg);
}

.hand.rechts::before {
  left:25%;
  transform:rotate(-45deg);
}


/***********/
/* STERREN */
/***********/
@keyframes fadeout {
  0%, 20% {
    transform:scale(0);
    opacity:1;
  }	
  40% {
    opacity:1;
  }
  100% {
    transform:scale(8);
    opacity:0;
  }
}

.cirkel {
  position: absolute;
  width: 10vmin; height: 10vmin;
  
  background-color: var(--cirkelkleur);
  border-radius: 50%;
  opacity:0;
	
	animation-duration: 5.53s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;

	clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
}

.cirkel1 {
  left: 10vw; top: -10vh;
  --cirkelkleur:gold;
	animation-delay: 0s;
}

.cirkel2 {
	left: 100vw;  top: 0vh;
  --cirkelkleur:white;
	animation-delay: 2s;
}

.cirkel3 {
	left: 20vw;  top: 10vh;
  --cirkelkleur:#56ABBF;
	animation-delay: 4s;
}

.cirkel4 {
	left: 70vw;  top: 20vh;
  --cirkelkleur:#A8FD6A;
	animation-delay: 6s;
}

.cirkel5 {
	left: 80vw;  top: 30vh;
  --cirkelkleur:gold;
	animation-delay: 8s;
}

.cirkel6 {
	left: 30vw;  top: 40vh;
  --cirkelkleur:white;
	animation-delay: 10s
}

.cirkel7 {
	left: 40vw;  top: 50vh;
  --cirkelkleur:#56ABBF;
	animation-delay: 12s;
}

.cirkel8 {
	left: 90vw; top: 60vh;
  --cirkelkleur:#A8FD6A;
	animation-delay: 14s;
}

.cirkel9 {
	left: 0vw; top: 70vh;
  --cirkelkleur:gold;
	animation-delay: 16s;
}

.cirkel10 {
	left: 50vw; top: 80vh;
  --cirkelkleur:white;
	animation-delay: 18s;
}

.cirkel11 {
	left: -10vw; top: 90vh;
	--cirkelkleur:#56ABBF;
	animation-delay: 20s;
}

.cirkel12 {
	left: 60vw; top: 100vh;
	--cirkelkleur:#A8FD6A;
	animation-delay: 22s;
}

body.party .cirkel {
  animation-name: fadeout;
}


/********/
/* KNOP */
/********/
button {
	position:absolute;
  padding:.5em 1em;
  left:2em; bottom:2em;
  
  font-size:1em;
  font-family:saira;
  text-transform: uppercase;
  
  appearance:none;
  background-color:white;
  border:none;
  border-radius:3em;
  outline:none;
}

button::after {
  content:"\1F389	party";
}

button:hover {
  cursor:pointer;
}

button:focus {
  box-shadow:0 0 .25em .25em #56ABBF;
}

button:active {
  color:white;
  background:red;
  transition:.5s;
}

body.party button::after {
  content:"\1F9D8	zen";
}