body{
    background-color: rgb(6, 250, 250);
}

h1{
    color:rgb(0, 55, 255);
}

div {
    background-color: rgb(20, 83, 240);
    width: 50vw;
}

.divRojo {
    background-color: rgb(188, 255, 255);
}
#divUnico{
    background-color: rgb(149, 209, 255);
}
#dibujo{
    width: 40vw;
    height: 40vw;
    background-color: aliceblue;
    display:flex;
    justify-content: center;
    align-items: center;
}

#cara {
    width: 60%;
    height: 60%;
    background-color: rgb(71, 162, 243);
    border-radius: 50%;
    position: relative;
}

#ojoIzq {
    width: 20%;
    height: 20%;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    top: 28%;
    left: 20%;

}

#ojoDer {
    width: 20%;
    height: 20%;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    top: 28%;
    right: 20%;

}

#boca {
    width: 40%;
    height: 10%;
    background-color: black;
    border-radius: 10%;
    position: absolute;
    top: 60%;
    right: 30%;

}

#cejaIzq {
    width: 25%;
    height: 5%;
    background-color: black;
    border-radius: 10%;
    position: absolute;
    top: 17%;
    left: 20%;

}

#cejaDer {
    width: 25%;
    height: 5%;
    background-color: black;
    border-radius: 10%;
    position: absolute;
    top: 17%;
    right: 20%;
    animation-name: cambioColor;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes cambioColor {
    0% {background-color: black;top: 17%;}
    25%{background-color: blue;}
    50%{background-color: blueviolet;}
    100%{background-color: black; top:10%;}
}

#boca:hover {
    background-color: rgb(128, 0, 255);
}

#cara:hover {
    background-color: rgb(103, 255, 60);
    transform: rotate(360deg);
}