/*  CSS Custom Properties */
:root { --bg-color: pink }
body  { 
  background-color: var(--bg-color); 
  height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
}

.head {
/* create a circle   */
  width: 300px;
  height: 300px;
  border-radius: 50%;
/* add some color so you can see it  */
  border: 10px solid black;
  background: white;
/* we need position relative b/s we're going to have a few elements inside the head.   
  The elements will be positioned "absolutely" in releationship with the parent class which is .head */
  position: relative;
  
/* we also need these 3 lines for the elements that are coming inside the .head (the eyes, cutouts, etc)   */
  justify-content: center;
  display:flex;
  align-items: baseline;
}

.head::before {
  content: "";
  position: absolute;
  
  /* add shadow   */
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: inset -22px 5px 0 3px rgba(0,0,0,.2);
}

.head::after {
  content: "";
  position: absolute;
  
  /* add neck   */
  width: 15px;
  height: 30px;
  background: white;
  margin-top: 300px;
  border: 10px solid black;
}

.left, .right {
  background: black;
  border-radius: 50%;
  width: 175px;
  height: 175px;
  position: absolute;
/* the eyes are centered b/s of the last 3 lines in the .head  */
  
/* we also need the 3 lines b/s we are going to add the cutouts inside the class .left, .right   */
  display: flex;
  justify-content: center;
  align-items: center;
}

.left {
  margin-left: -180px;
}
.right {
  margin-left: 180px;
}

.left::before, .right::before {
  content: "";
  position: absolute;
  
  /* add the inner shadow (the shadow inside the eyes)  */
  width:175px;
  height: 175px;
  border-radius: 50%;
  box-shadow: inset -22px 5px 0 3px rgba(255,255,255,.164);
}

.left::after, .right::after {
  content: "";
  position: absolute;
  
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}

.right::after {
/* let's style it a bit more. (overriding the previous properties)  */
  width: 30px;
  height: 30px;
  background: transparent;
  border: 5px solid white;
}

.cutout {
  position: absolute;
  width: 100px;
  height: 100px;
  background: white;
  border-radius: 50%;
  align-self: flex-end;
  margin-bottom: -50px;
}

.mouth {
  width: 180px;
  height: 180px;
  position: absolute;
  border: 10px solid black;
  border-radius: 50%;
  align-self: flex-end;
  margin-top: 50px;
  
/* Now I want to hide everything on the top half of the head... (like a mask)
So, I'm using bennettfeely.com/clippy for this   */
  clip-path: circle(60% at 50% 101%);
}

/* let's create chicks   */
 .mouth::before, .mouth::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 10px solid black;
    top: 102px;
    left: -9px;
    clip-path: circle(50% at 0 0);
  }
  
/* let's seperate them (with the previous classes they are overlapping each other)   */
  .mouth::after {
    left: 140px;
    top: 107px;
    clip-path: circle(50% at 100% 0);
  }

/* Creating the body */
.body {
  position: absolute;
  height: 50px;
  width: 100px;
  background: blueviolet;
  top: 350px;
  border: 10px solid black;
/* To create a fancy border I'm using another tool: https://mdbootstrap.com/docs/standard/tools/design/fancy-border-radius/   */
  border-radius: 100% 100% 100% 100% / 100% 100% 0% 0%;
}

/* Preparing the hands.
I will have 2 hands but with this code they will be on top of each other*/
.body::before, .body::after {
  content: "";
  position: absolute;
  
  width: 15px;
  height: 20px;
  top: 30px;
}

/* Let's seperate the hands */
.body::before {
  border-right: 10px solid black;
}
.body::after {
  border-left: 10px solid black;
  right: 0px;
}

.bg {
  width: 100px;
  height: 50px;
  position: absolute;
  left: -100px;
  border-radius: 30%;
/*   background: white; */
  top: 20px;
  
/* adding the 3 shadows (clouds)   */
  box-shadow:
    400px 100px 0 0 rgba(0,0,0,.15),
    50px 150px 0 0 rgba(0,0,0,.15),
    400px 250px 0 0 rgba(0,0,0,.15);
  
/* Let's animate them   */
  animation: bgAnim 3s infinite alternate;
}

@keyframes bgAnim {
  from {
    box-shadow:
      400px 100px 0 0 rgba(0,0,0,.15),
      50px 150px 0 0 rgba(0,0,0,.15),
      400px 250px 0 0 rgba(0,0,0,.15);
  }
  to {
    box-shadow:
      450px 100px 0 0 rgba(0,0,0,.140),
      0px 150px 0 0 rgba(0,0,0,.140),
      350px 250px 0 0 rgba(0,0,0,.140);
  }
}

/* Create a better background */

h2, #footer {text-align: center;}

#footer a:link{color:black}
#footer a:visited{color:black}
#footer a:hover{color: blueviolet}