body{
  margin: 0;
  background: #FDCE98;
}

.eye{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(2,2);
  width:30vw;
  height:13vw;
  background: radial-gradient(ellipse at 30% 40%, rgba(254,252,182,1) 0, rgba(253,224,163,1) 70%, rgba(253,224,163,1) 100%);
  overflow: hidden;
  border: solid 0.02vw rgba(0,0,0,0.3);
  border-top: solid 0.7vw rgb(79, 40, 32);
  box-shadow: inset 0.1vw -0.1vw 3vw 0px rgb(242, 181, 124, 0.5),inset -0.1vw 0.1vw 2vw 0px rgb(242, 181, 124, 0.5);
   border-radius: 100% 100% 90% 100%/100% 70% 130% 70%;
  clip-path: polygon(17% 0, 100% 0%, 100% 100%, 0% 100%);
}
.eye-shadow{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(2,2);
  width:30vw;
  height:13vw;
/*   background: #FDCE98; */
  box-shadow:  0.4vw 0.5vw #FBD09B,0.45vw 0.5vw #000;
/*   ,3vw 1vw 2vw rgb(245, 176, 138, 0.6),4vw 1vw 5vw 1vw rgb(237, 172, 99); */
   border-radius: 100% 100% 90% 100%/100% 70% 130% 70%;
  z-index:-1;
}
.eye-lash-up{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-200%) scale(2,2.5);
  width:30vw;
  height:13vw;
/*   background:red; */
/*   border-radius: 100% 100% 90% 100%/100% 70% 130% 70%; */
/*   z-index:-1; */
  clip-path: polygon(0% 98%, 10% 71%, 3% 53%, 17% 69%, 16% 43%, 26% 63%, 30% 43%, 34% 61%, 40% 41%, 41% 59%, 47% 42%, 48% 61%, 55% 40%, 56% 60%, 63% 40%, 65% 60%, 72% 42%, 73% 61%, 79% 45%, 81% 61%, 86% 47%, 88% 66%, 93% 47%, 96% 65%, 14% 79%,13% 80%);

}
.eye-lash-down{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(2,2.5);
  width:30vw;
  height:13vw;
  border-radius: 100% 100% 90% 100%/100% 70% 130% 70%;
/*   border-bottom: 0.1px solid black; */
  z-index:-1;
}
.eye-shadow-inside{
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translate(1%,-2%) scale(1,1);
  width:30vw;
  height:13vw;
  border-radius: 100% 100% 90% 100%/100% 70% 130% 70%;
  box-shadow: inset -1vw 0.8vw 0.1vw 0px rgb(0,0,0, 0.6);
  z-index: 10;
}

.eye-lids{
  position: absolute;
  top: 0%;
  left: 11.7%;
  clip-path: polygon(0% 100%, 0% 0%, 45% 0%);
  transform: rotatez(19deg);
  width:3.5vw;
  height:7vw;
  background: rgb(79, 40, 32);
  z-index:300;
  
}

.eye-ball{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-40%,-70%);
  width:15vw;
  height:15vw;
  overflow: hidden;
  background: #FCFFFB;
  border-radius: 50%;
  box-shadow: 0.2vw -0.2vw 0px #4E3823,-0.25vw -0.05vw 0px #4E3823,-0.2vw 0.2vw 0px #4E3823,-0.25vw 0.05vw 0px #4E3823,inset 2vw 0.5vw 4vw 1vw white,inset 2vw 0 3vw cyan,inset -1vw 1.6vw 3vw #548D7C,inset 0px 9vw 1vw #CCFDF3, inset 0px -2vw 3vw #548D7C,0.1vw 0.1vw 0.5vw 0px rgb(242, 181, 124);
/* clip-path: ellipse(70% 70% at 100% 50%); */

/*   clip-path: ellipse(50% 50% at 30% 50%); */

  animation: eyeball-move 10s ease-in-out infinite, eyeball-side 10s  ease-in-out infinite;
}


@keyframes eyeball-move{
  25%{
    transform: translate(-80%,-68%) rotatey(30deg) rotatez(-2deg);
    box-shadow: 0.2vw -0.2vw 0px #4E3823,-0vw -0vw 0px rgb(78, 56, 35, 0),-0vw 0vw 0px rgb(78, 56, 35, 0),-0vw 0vw 0px rgb(78, 56, 35, 0),inset 2vw 0.5vw 2vw 1vw rgba(255,255,255),inset 0vw 0 4vw 4vw rgba(255,255,255, 0.8),inset 0vw 0 3vw 2vw cyan,inset -1vw 1.6vw 3vw #548D7C,inset 0px 9vw 1vw #CCFDF3, inset 0px -0.5vw 3vw #548D7C,0.1vw 0.1vw 0.5vw 0px rgb(242, 181, 124),inset 2vw 0.5vw 1vw 10vw rgb(255, 255, 255);
    scale: 0.95 1;
    
  }
  
   12.5%{
   box-shadow: 0.2vw -0.2vw 0 #4E3823,-0vw -0vw 0px rgb(78, 56, 35, 0.1),-0vw 0vw 0px rgb(78, 56, 35, 0.1),-0vw 0vw 0px rgb(78, 56, 35, 0.1),inset 2vw 0.5vw 2vw 1vw rgba(255,255,255, 0.5),inset 0vw -2vw 4vw white,inset 2vw 0 3vw cyan,inset -1vw 1.6vw 3vw #548D7C,inset 0px 9vw 1vw #CCFDF3, inset 0px -2vw 3vw #548D7C,0.1vw 0.1vw 0.5vw 0px rgb(242, 181, 124);
  }
 
  
  0%,50%,100%{
    transform: translate(-40%,-70%) rotatey(0deg) rotatez(0deg);
    box-shadow: 0.2vw -0.2vw 0px #4E3823,-0.25vw -0.05vw 0px #4E3823,-0.2vw 0.2vw 0px #4E3823,-0.25vw 0.05vw 0px #4E3823,inset 2vw 0.5vw 4vw 1vw rgba(255,255,255, 0),inset 2vw 0.5vw 4vw 1vw white,inset 2vw 0 3vw cyan,inset -1vw 1.6vw 3vw #548D7C,inset 0px 9vw 1vw #CCFDF3, inset 0px -2vw 3vw #548D7C,0.1vw 0.1vw 0.5vw 0px rgb(242, 181, 124);
    scale: 1 1;
    
  }
  
  62.5%{
    box-shadow: 0vw -0vw 0px rgb(78, 56, 35, 0.3),-0.25vw -0.05vw 0px #4E3823,-0.2vw 0.2vw 0px #4E3823,-0.25vw 0.05vw 0px #4E3823,inset 2vw 0.5vw 4vw 1vw rgba(255,255,255,0),inset 0 -2vw 4vw white,inset 0 -2vw 2vw cyan,inset -1vw 1.6vw 3vw #548D7C,inset 0px 9vw 1vw #CCFDF3, inset 0px -2vw 3vw #548D7C,0.1vw 0.1vw 0.5vw 0px rgb(242, 181, 124);
  }
  
  75%{
    transform: translate(0%,-68%) rotatey(-30deg) rotatez(2deg);
    box-shadow: 0vw -0vw 0px rgb(78, 56, 35, 0),-0.25vw -0.05vw 0px #4E3823,-0.2vw 0.2vw 0px #4E3823,-0.25vw 0.05vw 0px #4E3823,inset 2vw 0.5vw 4vw 1vw rgba(255,255,255,0),inset -2vw 0 2vw white,inset -2vw 0 2vw cyan,inset -1vw 1.6vw 3vw #548D7C,inset 0px 9vw 1vw #CCFDF3, inset 0px -2vw 3vw #548D7C,0.1vw 0.1vw 0.5vw 0px rgb(242, 181, 124);
    scale: 0.9 1;
    
  }
}

@keyframes eyeball-side{
  0%{
    clip-path: ellipse(100% 100% at 50% 50%);
  }
  10%{
    clip-path: ellipse(100% 100% at 100% 50%);
  }
  25%{
    clip-path: ellipse(95% 70% at 100% 50%);
  }
  50%{
    clip-path: ellipse(60% 50% at 50% 50%);
  }
  75%{
    clip-path: ellipse(50% 50% at 40% 50%);
  }
  100%{
    clip-path: ellipse(100% 100% at 50% 50%);
  }
}

.eye-ball-shadow{
  border-radius: 50%;
  width:30vw;
  height:30vw;
/*   position: absolute; */
/*   top:0%; */
/*   left:0%; */
  
/*   opacity: 0.5; */
  transform: translate(-7.5vw,0%) scale(0.65, 1);
  background: url('../image/clouds.png');
/*   background-repeat: no-repeat; */
/*   background-attachment: fixed; */
  background-size: 45vw 15vw;
  filter: grayscale(60%) invert(1);
  mix-blend-mode: difference; 
  background-position: -7.5vw 0px;    
  animation: eyeball-shadow-move-x 10s ease-in-out infinite,eyeball-shadow-move-y 60s linear infinite ;
  
}

@keyframes eyeball-shadow-move-x{
  from, to{
    background-position-x: -7.5vw ;    
  }
  25%{
    background-position-x: 0px;    
  }
  50%{
    background-position-x: -7.5vw;    
  }
  75%{
    background-position-x: -15vw;    
  }
}

@keyframes eyeball-shadow-move-y{
  from{
    background-position-y: -15vw ;    
  }
  to{
    background-position-y: 0px;    
  }
}

.I-ris{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width:3vw;
  height:3vw;
  opacity:0.8;
  box-shadow: inset 0 0 0 0.15vw rgb(204, 253, 243), 
    0.05vw 0.1vw 0 0.01vw rgb(56, 61, 46),
    -0.01vw 0px 0 0.01vw rgb(204, 253, 243),
    0px 0px 0 0.1vw rgb(204, 253, 243), 
    0px -0.15vw 0 0.01vw rgb(56, 61, 46),
    0px 0px 0 0.3vw rgb(204, 253, 243), 
    0.3vw 0.2vw 0 0.02vw rgb(56, 61, 46),
    0 0 2vw 2vw rgb(126, 230, 210, 0.3),
    0 0 3vw 1vw rgb(79, 178, 159, 0.3);
  background: rgb(56, 61, 48);
  border-radius: 50%;
}

.iris-lines{
  position: absolute;
  top: 50%;
  left: 50%;
  width:2vw;
  height:1vw;
  opacity: 0.5;
  border: solid 0.1px #383D2E;
  border-color: #383D2E transparent transparent transparent;
  transform: translate(-100%,-50%) rotatez(0deg);
  rotate: 0deg;
}
/* .iris-lines:nth-child(1){
  transform: translate(150%,-50%) rotatez(0deg); 
  rotate: 0deg;
} */
.iris-lines:nth-child(2){
  transform: translate(150%,-50%) rotatez(-10deg); 
  rotate: -5deg;
}
.iris-lines:nth-child(3){
  transform: translate(130%,-165%) rotatez(10deg); 
  rotate: 5deg;
  border-color: transparent transparent #383D2E transparent;
  
}
.iris-lines:nth-child(4){
  transform: translate(160%,-100%) rotatez(-10deg); 
  width: 2.2vw;
  border-radius: 50%/0.25vw 0.25vw 0 0;
}

.iris-lines:nth-child(5){
  transform: translate(200%,-50%) rotatez(-0deg); 
  rotate: 20deg;
  width: 1.5vw;
}
.iris-lines:nth-child(6){
  transform: translate(150%,-50%) rotatez(-15deg); 
  rotate: 45deg;
}
.iris-lines:nth-child(7){
  transform: translate(140%,-50%) rotatez(-15deg); 
  rotate: 61deg;
  width: 2.2vw;
}
.iris-lines:nth-child(8){
  transform: translate(160%,-50%) rotatez(-15deg); 
  rotate: 75deg;
  width: 1.8vw;
}

.iris-lines:nth-child(9){
  transform: translate(160%,-50%) rotatez(-35deg); 
  rotate: 90deg;
}

.iris-lines:nth-child(10){
  transform: translate(165%,-50%) rotatez(-10deg); 
  rotate: 100deg;
  width: 1.7vw;
}

.iris-lines:nth-child(11){
  transform: translate(145%,-50%) rotatez(-30deg); 
  rotate: 115deg;
  width: 2.4vw;
}

.iris-lines:nth-child(12){
  transform: translate(185%,-50%) rotatez(-30deg); 
  rotate: 140deg;
}

.iris-lines:nth-child(13){
  transform: translate(210%,-50%) rotatez(-30deg); 
  rotate: 145deg;
  width: 1.7vw;
}
.iris-lines:nth-child(14){
  transform: translate(205%,-50%) rotatez(-30deg); 
  rotate: 162deg;
  width: 2.2vw;
}
.iris-lines:nth-child(15){
  transform: translate(255%,-50%) rotatez(-35deg); 
  rotate: 170deg;
  width: 1.7vw;
}
.iris-lines:nth-child(16){
  transform: translate(250%,-50%) rotatez(-15deg); 
  rotate: 175deg;
  width: 1.7vw;
}
.iris-lines:nth-child(17){
  transform: translate(245%,-50%) rotatez(-20deg); 
  rotate: 210deg;
/*   width: 1.7vw; */
}
.iris-lines:nth-child(18){
  transform: translate(270%,-50%) rotatez(-30deg); 
  rotate: 220deg;
  width: 1.7vw;
}
.iris-lines:nth-child(19){
  transform: translate(265%,-50%) rotatez(-10deg); 
  rotate: 225deg;
  width: 1.7vw;
}
.iris-lines:nth-child(20){
  transform: translate(245%,-50%) rotatez(-10deg); 
  rotate: 230deg;
  width: 1.7vw;
}
.iris-lines:nth-child(21){
  transform: translate(225%,-50%) rotatez(-5deg); 
  rotate: 245deg;
/*   width: 1.7vw; */
}
.iris-lines:nth-child(22){
  transform: translate(225%,-50%) rotatez(-5deg); 
  rotate: 270deg;
  width: 1.7vw;
}
.iris-lines:nth-child(23){
  transform: translate(165%,-50%) rotatez(5deg); 
  rotate: 300deg;
}
.iris-lines:nth-child(24){
  transform: translate(165%,-50%) rotatez(-10deg); 
  rotate: 320deg;
}
.iris-lines:nth-child(25){
  transform: translate(370%,-13%) rotatez(10deg); 
  rotate: 325deg;
  width: 0.7vw;
}
.iris-lines:nth-child(26){
  transform: translate(150%,-13%) rotatez(0deg); 
  rotate: 340deg;
}


.eye-glare{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-180%,-240%);
  width:5vw;
  height:1vw;
  border-radius: 50%;
  box-shadow: 0 0 1vw 1vw white,-2vw 0 3vw 2vw #FAE0A1;
  filter: blur(1px);
  background: white;
  z-index: 200;
}

.cloud-img{
  width:100%;
  height:100%;
  
/*    */
/*   opacity:0; */
}

.eye-caruncle{
  position: absolute;
  bottom: 1.5vw;
  left: -1vw;
  transform: rotatez(65deg);
  width:4vw;
  height:2vw;
/*   border: 0.1px solid rgba(0,0,0,0.2); */
/*   border-radius: 50%; */
  box-shadow: 0 0 5vw 0.3vw #E17661;
  background: #E17661;
  overflow: hidden;
  animation: eye-caruncle-move 10s ease-in-out infinite ;
}

@keyframes eye-caruncle-move{
  from, 50%, to{
    box-shadow: 0 0 5vw 0.3vw #E17661;
  }
  75%{
    box-shadow: 0 0 5vw 1vw #E17661;
  }
}

.eye-caruncle::before{
  content:'';
  position: absolute;
  top: 0%;
  left: 40%;
  width:0.5vw;
  height:0.5vw;
  filter:blur(0.2vw);
  border-radius:50%;
  background: white;
  
}

.dark-circles{
  width:10vw;
  height:10vw;
  position: absolute;
  top: 65%;
  left: 20%;
  transform:  translate(-50%,-50%) scale(2,2);
  background: #8B413A;
clip-path: polygon(78% 57%, 100% 64%, 45% 60%, 0 39%);


}

.dark-circles-shadow{
  position: absolute;
  width:10vw;
  height:1vw;
   top: 0.5%;
  left: 0%;
  background: #8B413A;
  transform: scale(2,2) rotatez(15deg); 
/*   border-radius:50%; */
/*   filter:blur(5px); */
}