/*
body {
    background-color: aquamarine;
}

.Juan{
    color: blanchedalmond;
    background-color: black;
}

#a285 {
    color: green
}
    */

@keyframes redondear{
    0%{
        border-radius: 0%;
    }
    50%{
        border-radius: 25%;
    }
    100%{
        border-radius: 50%;
    }
}

@keyframes redondear2{
    0%{
        border-radius: 0%;
        background-color: aqua;
    }
    50%{
        border-radius: 25%;
        background-color: rgb(50,194,79);
    }
    100%{
        border-radius: 50%;
        ackground-color: rgb(255,238,0);
    }
}

#contenedor1 {
    width: 45vw;
    height: 80vh;
    border: 1px solid black;
    margin: 10px;
    position: relative;
}

#contenedor2 {
    width: 45vw;
    height: 80vh;
    border: 1px solid black;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    flex-direction: column-reverse;
    align-content: space-around;
}

.cuadrado{
    width: 25%;
    height: 25%;
    background-color: aqua;
    border: 1px solid black;
    position: absolute
}

.cuadrado2{
    width: 25%;
    height: 25%;
    background-color: aqua;
    border: 1px solid black;
}

#cuadrado1{
    top: 0%;
    left: 0%;
}

#cuadradoDibujo1{
    top: 10%;
    left: 50%;
    animation-name: redondear;
    animation-duration: 2s;
    animation-iteration-count: 2s;
    animation-direction: alternate;
}

#cuadrado2{
    top: 25%;
    left: 25%;
}

#cuadrado3{
    top: 50%;
    left: 50%;
}

#cuadradoDibujo2{
    top: 10%;
    left: 75%;
}

#cuadradoDibujo2:hover{
    animation: redondear2 2s linear infinite alternate;
}

#contenedor2 {
    width: 45vw;
    height: 80vh;
    border: 1px solid black;
    position: relative;
}

body {
    background-color: white;
}

.parrafo {
    color: rgb(125, 110, 235);
    background-color: white;
}

#parrafoUnico {
    color: black;
}

#contenedor1 {
width: 45vw;
height: 80vh;
border: 1px solid black;
margin: 15px;
position: relative;
}

#contenedor2 {
width: 45vw;
height: 80vh;
border: 1px solid black;
margin: 15px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}

.cuadrado2 {
    width: 25%;
    height: 25%;
    background-color: rgb(3, 154, 255);
    border: 1px solid black;
 
}

#cuadro1 {
top: 0%;
left: 0%;
}

#cuadro2 {
top: 25%;
left: 25%;
}

#cuadro3 {
top: 50%;
left: 50%;
}

/***********************/
/* Estilo dibujo*/
#tituloDibujo {
text-align: center;
font-family: "Asimovian", sans-serif;
font-weight: 400;
font-style: normal;
}

#lienzo {
width: 950px;
height: 600px;
background-image: url("https://www.nintenderos.com/wp-content/uploads/2022/03/Featured-Kirby-and-the-Forgotten-Land-Surprised.jpg");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
margin: 0 auto;
position: relative;
}

#lienzo2{

width: 950px;
height: 600px;
position: relative;
}

#lienzo:hover{
  background-image: url("https://i.imgur.com/hLb0hXu.jpeg");  
}

.circulo {
    width: 100px; /* ancho */
    height: 100px; /* alto */
    background-color: rgb(24, 214, 208); /* color de fondo */
    border-radius: 50%; /* redondea los bordes de la figura*/
    border: 3px solid black; /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 10px; /* posición desde el borde superior del lienzo */
    left: 10px; /* posición desde el borde izquierdo del lienzo */
}

.circulo2_main_body {
    width: 470px; /* ancho */
    height: 470px; /* alto */
    background-color: rgb(255, 169, 236); /* color de fondo */
    border-radius: 50%; /* redondea los bordes de la figura*/
    border: 3px solid black; /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 45px; /* posición desde el borde superior del lienzo */
    left: 260px; /* posición desde el borde izquierdo del lienzo */
}

.circulo2_main_body:hover{
    background-color: rgb(52, 96, 255); /* color de fondo */
}

.circulo3_brazo_derecho {
    width: 250px; /* ancho */
    height: 170px; /* alto */
    background-color: rgb(255, 169, 236); /* color de fondo */
    border-radius: 50%; /* redondea los bordes de la figura*/
    border: 3px solid black; /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 170px; /* posición desde el borde superior del lienzo */
    left: 185px; /* posición desde el borde izquierdo del lienzo */
    transform: rotate(-10deg);
}

    
.circulo3_brazo_derecho:hover{
    background-color: rgb(52, 96, 255); /* color de fondo */
}


.circulo4_brazo_izquierdo {
    width: 240px; /* ancho */
    height: 160px; /* alto */
    background-color:  rgb(255, 169, 236); /* color de fondo */
    border-radius: 48%; /* redondea los bordes de la figura*/
    border: 3px solid black; /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 212px; /* posición desde el borde superior del lienzo */
    left: 600px; /* posición desde el borde izquierdo del lienzo */
    transform: rotate(30deg);
}

.circulo4_brazo_izquierdo:hover{
    background-color: rgb(52, 96, 255); /* color de fondo */
}

.circulo5_pierna_derecha {
    width: 200px; /* ancho */
    height: 210px; /* alto */
    background-color:  rgb(255, 55, 55); /* color de fondo */
    border-radius: 50%; /* redondea los bordes de la figura*/
    border: 3px solid black; /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 400px; /* posición desde el borde superior del lienzo */
    left: 270px; /* posición desde el borde izquierdo del lienzo */
    transform: rotate(15deg);
}

.circulo6_pierna_izquierda {
    width: 210px; /* ancho */
    height: 160px; /* alto */
    background-color:  rgb(255, 55, 55); /* color de fondo */
    border-radius: 50%; /* redondea los bordes de la figura*/
    border: 3px solid black; /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 400px; /* posición desde el borde superior del lienzo */
    left: 560px; /* posición desde el borde izquierdo del lienzo */
    transform: rotate(20deg);
}

.circulo7_ojo_derecho {
    width: 55px; /* ancho */
    height: 153px; /* alto */
    background-color:  rgb(0, 0, 0); /* color de fondo */
    border-radius: 47%; /* redondea los bordes de la figura*/
    border: 3px solid black; /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 150px; /* posición desde el borde superior del lienzo */
    left: 470px; /* posición desde el borde izquierdo del lienzo */
    transform: rotate(8deg);
}

.circulo8_ojo_izquierdo{
    width: 55px; /* ancho */
    height: 153px; /* alto */
    background-color:  rgb(0, 0, 0); /* color de fondo */
    border-radius: 47%; /* redondea los bordes de la figura*/
    border: 3px solid black; /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 140px; /* posición desde el borde superior del lienzo */
    left: 360px; /* posición desde el borde izquierdo del lienzo */
    transform: rotate(8deg);
}
.circulo9_boca{
    width: 15px; /* ancho */
    height: 25px; /* alto */
    background-color:  rgb(0, 0, 0); /* color de fondo */
    border-radius: 46%; /* redondea los bordes de la figura*/
    border: 3px solid black; /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 325px; /* posición desde el borde superior del lienzo */
    left: 420px; /* posición desde el borde izquierdo del lienzo */
    transform: rotate(5deg);
}

.circulo10_blanco_izquierdo{
    width: 33px; /* ancho */
    height: 65px; /* alto */
    background-color:  rgb(255, 255, 255); /* color de fondo */
    border-radius: 50%; /* redondea los bordes de la figura*/
    border: 3px solid black; /* 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: 482px; /* posición desde el borde izquierdo del lienzo */
    transform: rotate(10deg);
}

.circulo11_blanco_derecho{
    width: 33px; /* ancho */
    height: 65px; /* alto */
    background-color:  rgb(255, 255, 255); /* color de fondo */
    border-radius: 50%; /* redondea los bordes de la figura*/
    border: 3px solid black; /* borde de la figura: grosor, estilo, color */
    position: absolute; /* ubicar los elementos en una posición fija que definimos a continuación */
    top: 145px; /* posición desde el borde superior del lienzo */
    left: 375px; /* posición desde el borde izquierdo del lienzo */
    transform: rotate(10deg);
}

.cuadrado {
    width: 100px;
    height: 100px;
    background-color: rgb(251, 230, 0);
    position: absolute;
    top: 20px;
    left: 120px;
}

.cuadradoDibujo {
    width: 100px;
    height: 100px;
    background-color: rgb(251, 230, 0);
    position: absolute;
    top: 20px;
    left: 120px;
    

}

.cuadrado1 {
    width: 100px;
    height: 100px;
    background-color: rgb(251, 230, 0);
    position: absolute;
    top: 200px;
    left: 120px;
    transform: rotate(45deg);
}
.cuadrado_tapar_derecha {
    width: 200px;
    height: 100px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 600.8px;
    left: 260px;

}
 
/* línea hecha con border*/
.lineaHorizontal {
    width: 100px;
    height: 0px;
    border: 3px solid rgb(255, 0, 0); /* borde de la figura: grosor, estilo, color */
    position: absolute;
    top: 50px;
    left: 250px;
}

/* línea hecha con border*/
.lineaVertical {
    width: 0px;
    height: 100px;
    border: 3px solid rgb(0, 140, 255); /* borde de la figura: grosor, estilo, color */
    position: absolute;
    top: 10px;
    left: 390px;
}