body 
{background-color: rgb(255, 255, 255);}
h1
{color: rgb(253, 24, 143);}
.parrafo
{color: rgb(12, 122, 219);}

#holi 
{color: aqua;}


#contenedor1 {
    width:40vw;
    height:10vw;
    border:4px solid rgb(221, 0, 255);
    position: relative;
}
#contenedor2 {
    width: 40vw;
    height: 10vw;
    border:4px solid rgb(183, 0, 250);
    margin: 3px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: stretch;
    flex-direction: column-reverse;
}

.beb {
    width: 12%;
    height: 12%;
    background-color: rgb(255, 207, 239);
    border: 2px solid #e9b9ff;
    margin: 3px;
    position: absolute;
}
.beb2 {
    width: 12%;
    height: 12%;
    background-color: rgb(255, 207, 239);
    border: 2px solid #e9b9ff;
    margin: 3px;
    animation: redondear 3s linear infinite alternate
}
#cuadro1 {
    left:0%;
    top:0% ;
}
#cuadro2 {
    left: 12%;
    top: 12%;
}
#cuadro3 {
    left: 24%;
    top: 24%

}

@keyframes redondear {
    0% {
      border-radius: 0% ;  
      background-color: rgba(174, 195, 253, 0.87);
      margin: 3px
    }
    25% {
        border radius: 30%;
        background-color: rgb(39, 108, 245);
        margin: 13px
    }
    100%{
          border radius: 60%;
          background-color: rgb(176, 39, 245);
          margin: 23px
    }
}


.titulo{
  font-family: "Ultra", serif;
  font-weight: 400;
  font-style: normal;
}
.titulo :hover {
    color: rgb(255, 48, 210);
    font: 1000;
    font-weight: 600;
}


/***********************/
/* Estilo dibujo*/
#tituloDibujo {
text-align: center;
}

#lienzo {
width: 700px;
height: 600px;
background-image: url("https://static.vecteezy.com/system/resources/previews/036/153/903/non_2x/cute-elephant-sitting-and-waving-hand-cartoon-icon-illustration-animal-love-icon-concept-isolated-premium-flat-cartoon-style-vector.jpg");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
margin: 0 auto;
position: relative;
}

.cuadrado {
    width: 100px;
    height: 180px;
    background-color: rgb(174, 176, 176);
    border: 3px solid rgb(112, 112, 112); /* borde de la figura: grosor, estilo, color */
    position: absolute;
    top: 400px;
    left: 230px;
}
 .cuadrado2 {
    width: 100px;
    height: 180px;
    background-color: rgb(174, 176, 176);
    border: 3px solid rgb(112, 112, 112); /* borde de la figura: grosor, estilo, color */
    position: absolute;
    top: 400px;
    left: 356px;
}
.ovalo2 {
    width: 140px; /* ancho */
    height: 230px; /* alto */
    background-color: rgb(174, 176, 176); /* color de fondo */
    border-radius: 100%; /* redondea los bordes de la figura*/
    border: 3px solid rgb(112, 112, 112); /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 155px; /* posición desde el borde superior del lienzo */
    left: 70px; /* posición desde el borde izquierdo del lienzo */
    transform:rotate(10deg);
}
.ovalo2:hover {
    cursor: pointer;
    background-color: rgb(255, 218, 249);
}
.ovalo {
    width: 140px; /* ancho */
    height: 230px; /* alto */
    background-color: rgb(174, 176, 176); /* color de fondo */
    border-radius: 100%; /* redondea los bordes de la figura*/
    border: 3px solid rgb(112, 112, 112); /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 155px; /* posición desde el borde superior del lienzo */
    left: 470px; /* posición desde el borde izquierdo del lienzo */
    transform:rotate(-10deg);
}
.ovalo:hover {
    cursor: pointer;
background-color: rgb(255, 218, 249);
}


.patita1 {
    width: 150px; /* ancho */
    height: 120px; /* alto */
    background-color: rgb(174, 176, 176); /* color de fondo */
    border-radius: 60%; /* redondea los bordes de la figura*/
    border: 3px solid rgb(112, 112, 112); /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 455px; /* posición desde el borde superior del lienzo */
    left: 395px; /* posición desde el borde izquierdo del lienzo */
    transform:rotate(20deg);
}
.patita2 {
    width: 150px; /* ancho */
    height: 120px; /* alto */
    background-color: rgb(174, 176, 176); /* color de fondo */
    border-radius: 60%; /* redondea los bordes de la figura*/
    border: 3px solid rgb(112, 112, 112); /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 455px; /* posición desde el borde superior del lienzo */
    left: 135px; /* posición desde el borde izquierdo del lienzo */
    transform:rotate(-20deg);
}
.circulo {
    width: 380px; /* ancho */
    height: 370px; /* alto */
    background-color: rgb(174, 176, 176); /* color de fondo */
    border-radius: 60%; /* redondea los bordes de la figura*/
    border: 3px solid rgb(112, 112, 112); /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 100px; /* posición desde el borde superior del lienzo */
    left: 145px; /* posición desde el borde izquierdo del lienzo */
}
.bola {
     width: 80px; /* ancho */
    height: 80px; /* alto */
    background-color: rgb(174, 176, 176); /* color de fondo */
    border-radius: 60%; /* redondea los bordes de la figura*/
    border: 3px solid rgb(174, 176, 176); /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 300px;
    left: 295px;
}
.bola:hover {
    background-color: red;
    border-radius: 60%;
    border: 3px solid rgb(104, 98, 98);
}
.ojo1 {
     width: 80px; /* ancho */
    height: 80px; /* alto */
    background-color: rgb(0, 0, 0); /* color de fondo */
    border-radius: 60%; /* redondea los bordes de la figura*/
    border: 3px solid rgb(50, 50, 50); /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 220px;
    left: 210px;
}

.ojo2 {
 width: 80px; /* ancho */
    height: 80px; /* alto */
    background-color: rgb(0, 0, 0); /* color de fondo */
    border-radius: 60%; /* redondea los bordes de la figura*/
    border: 3px solid rgb(50, 50, 50); /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 220px;
    left: 380px
}
.ojo3 {
     width: 30px; /* ancho */
    height: 30px; /* alto */
    background-color: rgb(255, 255, 255); /* color de fondo */
    border-radius: 60%; /* redondea los bordes de la figura*/
    border: 3px solid rgb(50, 50, 50); /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 230px;
    left: 218px;

}
.ojo4 {
 width: 30px; /* ancho */
    height: 30px; /* alto */
    background-color: rgb(252, 252, 252); /* color de fondo */
    border-radius: 60%; /* redondea los bordes de la figura*/
    border: 3px solid rgb(50, 50, 50); /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 230px;
    left: 388px
}