@import url(https://fonts.googleapis.com/css?family=Caveat+Brush);
body{
  background:#0F8A5F;
  margin-top:300px;
}
.audio-player{
  background:rgba(0,0,0,.5);
  padding:1em;
  width:300px;
  height:32px;
  position:absolute;
  top:50%;
  left:0;
  transition:all .5s ease;
}
#audplayer{
  z-index:300;
  position:absolute;
}
.audio-player:after,.trig{
  content:"*";
  display:block;
  position:absolute;
  width:64px;
  height:64px;
background:rgba(0,0,0,.5);
  top:0;
  right:-65px;
  text-align:center;
  color:white;
  font-size:4em;
  font-weight:bold;
  line-height:85px;
  z-index:200;
  cursor:pointer;
}
.trig{
  background:transparent;
  z-index:500;
}
.big-Message{
  width:600px;
  text-align:center;
  color:#fff;
  font-size:3em;
  font-family: 'Caveat Brush', cursive; 
  position:absolute;
  top:220px;
  left:50%;
  margin-left:-400px;
  background:rgba(0,0,0,.7);
  border-radius:100%;
  padding:4em 2em;
  z-index:400;
  opacity:0;
  transition: opacity 1s ease;
}
.big-Message:hover{
   opacity:1;
}
.big-Message span{
  display:block;
  font-size:1.75em;
}
.hide{
  left:-330px;
}
.message{
  position:relative;
  width:700px;

  margin:auto;
  height:100px;

}
h1{ font-family: 'Caveat Brush', cursive; 
  font-size:0;
  color:#fff;
  position:absolute;
  margin:0;
  top:0;

}
.ho1{
  transform:rotate(-15deg);
  
    animation: ho 5s infinite;
 
}
.ho3{
  right:0;
  transform:rotate(15deg);
 
    animation: ho 5s infinite;
   animation-delay:2s;
}
.ho2{
  left:35%;
  
  animation: ho2 5s infinite;
  animation-delay:1s;
}
.face{
  width:350px;
  height:350px;
  border-radius:100%;
  background: #FFD6BF;
  margin: auto;
  position:relative;
  }
.hair{
  width:500px;
  height:400px;
  background:white;
  position:absolute;
  top:-10px;
  left:-75px;
  border-radius:100%;
  z-index:-1;
  animation: hair 1s infinite;
}
.cap{
  width:0%;
  height:0%;
  border-radius:100%;
  background:#CC231E;
  border:210px solid #CC231E;
  border-bottom:0;
  position:absolute;
  top:-130px;
  left:-35px;
   box-shadow:0 0 10px rgba(0,0,0,.5);
  animation: cap 1s infinite;
}
.cap:before{
  width:0;
  height:0;
  position:absolute;
  display:block;
  content:"";
  border:70px solid #CC231E;
  border-top-color: transparent;
  border-right-color: transparent;
  left:162px;
  top:-130px;
  transform:rotate(20deg);
  z-index:-1;
  animation: caprotate 1s infinite;
}
.cap:after{
  width:70px;
  height:70px;
  position:absolute;
  display:block;
  content:"";
  background:white;
  border-radius:100%;
  left:250px;
  animation: capball 1s infinite;
  box-shadow:0 0 5px rgba(0,0,0,.5);
}
.captop{
  width:130%;
  height:70px;
  border-radius:30px;
  background:white;
  position:absolute;
  left:-50px;
  top:30px;
  box-shadow:0 0 5px rgba(0,0,0,.5);
  animation: captop 1s infinite;
}
.mouth{
  width:100px;
  height:70px;
  border-radius:100%;
  background:maroon;
  position:absolute;
  top:220px;
  left:125px;
  z-index:70;
  animation: mouth .75s infinite;
}
.mouth:after,.mouth:before{
  content:"";
  display:block;
  position:absolute;
  background:white;
   width:120%;
  height:100%;
  border-radius:0 100%;
  top:-20px;
  left:-20px;
   transform:rotate(-10deg);
}
.mouth:before{
    display:none;
}
.beard:before,.beard:after{
   content:"";
  width:70%;
  height:60%;
  background:white;
  display:block;
  border-radius:100%;
  position:absolute;
  
}
.beard:before{
   left:-40px;
  top:30px;
}
.beard:after{
  right:-40px;
  top:30px;
}
.eyes{
  position:absolute;

  width:150px;
  height:30px;
  left:100px;
  top:120px;
  animation: blink 2s infinite;
}
.eyes:before,.eyes:after{
  content:"";
  height:100%;
  width:30px;
  background:black;
  display:block;
  position:absolute;

  border-radius:100%;
}
.eyes:after{
   right:0px;
}
.nose{
   width:70px;
  height:50px;
  border-radius:100%;
  background: #CC231E;
  position:absolute;
  left:140px;
  top:170px;
  z-index:100;
  animation: nose .75s infinite;
}
.mustache{
  position:absolute;
  width:300px;
  height:100px;
  left:25px;
  top:180px;
  
}
.mustache:before, .mustache:after{
  content:"";
  width:50%;
  height:100%;
  background:white;
  display:block;
  border-radius:100% 0;
  position:absolute;
  box-shadow:0 0 5px rgba(0,0,0,.5);
  z-index:80;
}
.mustache:after{
    right:0;
  border-radius:0 100%;
}
.mustache {
  animation: pulse .75s infinite;
}
.beard{
  width:400px;
  height:400px;
  background:white;
  position:absolute;
  top:180px;
  left:-25px;
  border-radius:100%;
  animation: beard .75s infinite;
}
.beard:before,.beard:after{
   content:"";
  width:70%;
  height:60%;
  background:white;
  display:block;
  border-radius:100%;
  position:absolute;
  
}
.beard:before{
   left:-40px;
  top:30px;
}
.beard:after{
  right:-40px;
  top:30px;
}
@keyframes nose {
  0% {
   
    top:170px;
  }
  50% {

    top:160px;
  }
  100% {

    top:170px;
  }
}
@keyframes pulse {
  0% {
    height:100px;
    top:180px;
  }
  50% {
   height:90px;
    top:170px;
  }
  100% {
   height:100px;
    top:180px;
  }
}
@keyframes beard {
  0% {
    height:400px;
    top:180px;
  }
  50% {
   height:390px;
    top:170px;
  }
  100% {
   height:400px;
    top:180px;
  }
}
@keyframes blink {
  0% {

    height:30px;
    top:120px;
  }
  5% {
  
    height:0;
    top:140px;
  }
  10% {
    height:30px;
    top:120px;
  }
  

  100% {
 
    height:30px;
    top:120px;
  }
  
}
@keyframes mouth {
  0%{
    
top:220px;
  }
  50%{
    top:200px;

  }
  100%{
    top:220px;

  }
}
@keyframes mouthlip {
  0%{

  height:100%;
  top:-20px;
  left:-20px;
  }
  20%{
    height:50%;
    width:50%;
  top:-50px;
  left:-40px;
  }
  30%{
     height:100%;
  top:-20px;
  left:-20px;
  }
}
@keyframes caprotate{
  0%{

  transform:rotate(20deg);
  }
  50%{
   transform:rotate(25deg);
    left:160px;
    top:-120px;
  }
  100%{
   transform:rotate(20deg);
  }
}
@keyframes capball{
  0%{


  }
  50%{
    left:220px;
    top:-10px;
  }
  100%{

  }
}
@keyframes cap{
  0%{


  }
  50%{
   top:-110px;
  }
  100%{

  }
}
@keyframes captop{
  0%{


  }
  50%{
   top:40px;
     height:65px;
  }
  100%{

  }
}
@keyframes hair{
  0%{


  }
  50%{
   width:490px;

  left:-70px;
  }
  100%{

  }
}
@keyframes ho{
  0%{
    font-size:0;
    opacity:0;
    top:0;
  }
  50%{
   font-size:10em;
    opacity:1;
    top:-200px;
  }
  90%{
   font-size:10em;
    opacity:1;
    top:-200px;
  }
  100%{
  font-size:0;
    opacity:0;
  }
}
@keyframes ho2{
  0%{
    font-size:0;
    opacity:0;
    top:0;
  }
  50%{
   font-size:10em;
    opacity:1;
    top:-250px;
  }
  90%{
   font-size:10em;
    opacity:1;
    top:-250px;
  }
  100%{
  font-size:0;
    opacity:0;
  }
}
.sky {
  height: 100vw;
  color: #FFF;
  display: block;
  position:absolute;
  width:100%;
  top:0;
  left:0;
}