@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
:root{
   --faded-black: rgba(0, 0, 0, .3);
}
body{
   background:linear-gradient(darkred 20%, black 50%)black;
   background-repeat:no-repeat;
   padding:0 30px;

}
h1{ width:100%;
   text-align:center;
   font-weight:700; 
   font-size:3em;
   font-family:arial; 
   color:white; 
   background: black; border:2px solid white;
   box-shadow:0 5px 10px 2px black;
   position:relative;
}
.head{
   position:relative;
   width:250px;
   height:250px;
   background:radial-gradient(yellow 10%, red, transparent);
   border-radius:50%;
   margin:100px auto;
}
.head:before{
   content:"";
   position:absolute;
   top:1%;
   left:0;
   width:100%;
   height:100%;
   border-radius:50%;
   background:radial-gradient(circle at 50% 0, yellow 5%, red, transparent 70%);
   filter:blur(5px);
   z-index:2;
}

.left-eye {
  z-index: 3;
  width: 30px;
  height: 40px;
  background: linear-gradient(#121212 30%, transparent 90%);
  border-radius: 50%;
  position: absolute;
  top: 105px;
  left: 75px;
  box-shadow: inset 0 5px 10px 5px black;
  animation: wink 4s linear infinite;
}

.left-eye:before {
  content: "";
  z-index: 3;
  width: 47px;
  height: 15px;
  background: linear-gradient(black 50%, transparent 70%);
  border-radius: 50%;
  position: absolute;
  top: -10px;
  left: -13px;
  transform: rotateZ(25deg);
}

.right-eye {
  z-index: 3;
  width: 30px;
  height: 40px;
  background: linear-gradient(#121212 50%, transparent 90%);
  border-radius: 50%;
  position: absolute;
  box-shadow: inset 0 5px 10px 5px black;
  top: 105px;
  right: 75px;
  animation: wink 4s linear infinite;
}

.right-eye:before {
  content: "";
  z-index: 3;
  width: 47px;
  height: 15px;
  background: linear-gradient(black 50%, transparent 70%);
  border-radius: 50%;
  position: absolute;
  top: -10px;
  right: -13px;
  transform: rotateZ(-25deg);
}
.mouth {
  z-index: 3;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 50% 100%, transparent 70%, black 70%, var(--faded-black)80%, black 90%);
  border-radius: 50%;
  position: relative;
  top: 160px;
  left: 85px;
}
.censor{
   opacity:0;
   z-index:5;
   position:absolute;
   width:150px;
   height:50px;
   background:black;
   top:155px;
   left:50px;
   border:1px solid darkgray;
   box-shadow: 0 0 10px 1px black;
  
 
}
.censor:after{
   content:"#$!@";
   z-index:6;
   position:absolute;
   width:100%;
   height:100%;
   color:white;
   font-size:2.5em;
   left:15%;
   bottom:3px;
   letter-spacing:3px;
   font-family: 'Fredoka One', cursive;
  
}
.head:hover{
   animation:turn 500ms ease-in-out infinite;
}
.head:hover .censor{
    animation:speech 275ms ease-in-out infinite;
}
@keyframes turn{
   0%{
      transform:perspective(200px)rotatey(0);
   }
   25%{
      transform:perspective(200px)rotatex(-5deg)rotatey(-20deg)rotatez(5deg);
   }
   50%{
      transform:perspective(200px)rotatex(5deg);
   }
   75%{
      transform:perspective(200px)rotatex(-5deg)rotatey(20deg)rotatez(-5deg);
   }
}
@keyframes speech{
   0%{
      opacity:1;
      transform:scale(1)perspective(200px)rotatey(0);
   }
   25%{
      transform:scale(1.5)perspective(200px)rotatex(-15deg)rotatey(-10deg)rotatez(20deg);
   }
   50%{
      transform:scale(.5)perspective(200px))rotatey(0)rotatez(15deg);
   }
   75%{
      transform:scale(1.5)perspective(200px)rotatex(-15deg)rotatey(10deg)rotatez(-20deg);
   }
   100%{
      opacity:1;
   }
}

/*@media only screen and (max-width: 800px) {
   h1{
      font-size:2em;
   }
   
}