body{background-color: rgb(224, 121, 121);
}

h1 {
    color: rgb(226, 229, 156);
    text-align:center;
    margin-top:20px;
   cursor: pointer; 
}

h2 {
    color: rgb(240, 199, 145);
    text-align:center;
    margin-top:15px;
}

#texto {

    color: rgb(243, 192, 124);
    text-align:center;
    margin-top:13px;
    cursor: pointer;
}

   
div{
    background-color:rgb(121, 200, 220);
    width: 50vw;
}

.divrojo{
    background-color:rgb(173, 39, 39)

}

#divunico{
    background-color: rgba(184, 119, 119, 0.687);
}

#dibujo{
    width: 40vw;
    height: 40vw;
    background-color: bisque;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#cara{
    width: 60%;
    height: 60%;
    background-color: rgb(246, 212, 90);
    border-radius: 50%;
    position: relative
    transition: all 3s ease-in ;
    
}

#cara:hover{
    transform: rotate(360deg) scale(1.4);
}

.ojos{
    width: 25%;
    height: 30%;
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
    position: absolute;
    transition: all 3s ease-in;
}

.ojos:hover{
    background-color: rgb(211, 48, 48);
    height: 15%;
}

#ojoIzq{
    top: 20%;
    left: 20%;
}


#ojoDer{
    top: 20%;
    right: 20%;
}

#boca{
    width: 25%;
    height: 15%;
    background-color: rgb(37, 37, 36);
    border-radius:0 0 50px 50px;
    position: absolute;
    left: 37%;
    bottom:25%;
    box-align: center;
    animation-name: myAnimation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.mejilla{
    width: 10%;
    height: 10%;
    background-color: rgb(243, 183, 225);
    border-radius: 50%;
    position: absolute;
}

#mejillaIzq{
    bottom: 30%;
    left: 20%;
}

#mejllaDer{
    bottom: 30%;
    right: 20%;
}


@keyframes myAnimation {
  0%   {background-color: rgba(217, 100, 151, 0.855);}
  25%  {background-color: rgb(255, 0, 128);}
  50%  {background-color: rgb(217, 0, 255);}
  100% {background-color: rgb(128, 0, 85);}
  }