body {
    background-color: rgb(207, 236, 242);
    }
#tituloDibujo {
text-align: center;
font-size: 5em;
color: rgb(99, 109, 243);

}

#Paisaje {
width: 700px;
height: 600px;
background-image: url("https://pohcdn.com/sites/default/files/styles/paragraph__live_banner__lb_image__1880bp/public/live_banner/lausanne.jpg");
background-repeat: no-repeat;
background-size: cover;
border: 5px solid chocolate;
margin: 0 auto;
position: relative;
cursor: url("https://cdn-icons-png.flaticon.com/128/338/338191.png"), auto;
}

.parrafo {
    color: rgb(51, 114, 250);
    font-size: 1.3em;
    margin-left: 10em;
}

.tituloViajes {
    color: chocolate;
    font-size: 1.8em;
    font-style: italic;
    text-align: center;
}

.parrafito {
    color: rgb(69, 172, 136);
    font-size: 1.3em;
    margin-left: 10em;
}

#Mifoto2 {
width: 400px;
height: 500px;
background-image: url("../Portafolio/imagenes/imagen2.jpg");
background-size: cover;
border: 5px solid chocolate;
margin-top: 15px;
margin:0 auto;
left: 100%;
 cursor: url("https://cdn-icons-png.flaticon.com/128/17943/17943538.png"), auto;
}

.frase  {
    color:chocolate;
    font-size: 1.3em;
    font-style: italic;
    text-align:center;
}


#Mifoto1 {
width: 400px;
height: 500px;
background-image: url("../Portafolio/imagenes/imagen3.jpg");
background-size: cover;
border: 5px solid chocolate;
margin-top: 15px;
margin:0 auto;
left: 100%;
cursor: url("https://cdn-icons-png.flaticon.com/128/996/996970.png"), auto;
}
#Mifoto3 {
width: 400px;
height: 500px;
background-image: url("../Portafolio/imagenes/imagen4.jpg");
background-size: cover;
border: 5px solid chocolate;
margin-top: 15px;
margin:0 auto;
left: 100%;
cursor: url("https://cdn-icons-png.flaticon.com/128/7321/7321942.png"), auto;
}
#Mifoto4 {
width: 400px;
height: 500px;
background-image: url("../Portafolio/imagenes/imagen5.jpg");
background-size: cover;
border: 5px solid chocolate;
margin-top: 15px;
margin:0 auto;
left: 100%;
cursor: url("https://cdn-icons-png.flaticon.com/128/15136/15136628.png"), auto;
}
#Mifoto5 {
width: 400px;
height: 500px;
background-image: url("../Portafolio/imagenes/imagen10.jpg");
background-size: cover;
border: 5px solid chocolate;
margin-top: 15px;
margin:0 auto;
left: 100%;
 cursor: url("https://cdn-icons-png.flaticon.com/128/5088/5088189.png"), auto;
}
#Mifoto6 {
width: 400px;
height: 500px;
background-image: url("../Portafolio/imagenes/imagen7.jpg");
background-size: cover;
border: 5px solid chocolate;
margin-top: 15px;
margin:0 auto;
left: 100%;
 cursor: url("https://cdn-icons-png.flaticon.com/128/5987/5987767.png"), auto;
}
#Mifoto7 {
width: 400px;
height: 500px;
background-image: url("../Portafolio/imagenes/imagen12.jpg");
background-size: cover;
border: 5px solid chocolate;
margin-top: 15px;
margin:0 auto;
left: 100%;
cursor: url("https://cdn-icons-png.flaticon.com/128/12714/12714535.png"), auto;
}

.imagenportada {
    display: flex;
    justify-content: center;
    align-items: center;
    object-position: center;
}

.image-container {
    display: flex; /* Habilita Flexbox */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    width: 400px; /* Ajusta el tamaño del contenedor según necesites */
    height: 400px;
    overflow: hidden;
    border: 5px solid chocolate; /* La imagen va dentro del borde */
    margin: 50px auto; /* Centra el contenedor en la página */
}

.animated-image {
    width: 15%; /* La imagen ocupa el 100% del contenedor */
    height: 15%; /* La imagen ocupa el 100% del contenedor */
    object-fit: contain; /* Asegura que la imagen llene el contenedor sin distorsionarse */
    object-position: center; /* Mantiene la imagen centrada dentro de su propio espacio */
    animation-name: zoomAndPan;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    background-size: cover;
    border: 5px solid chocolate;
}

@keyframes zoomAndPan {
    0% {
        transform: scale(1) translate(0, 0);
    }
    50% {
        transform: scale(1.2) translate(0.5%, 0.5%);
    }
    100% {
        transform: scale(1) translate(0, 0);
    }
}

@keyframes aparecerLetra {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    .frase-animada span {
      display: inline-block; /* Permite aplicar transformaciones y otras propiedades */
      opacity: 0; /* Inicialmente ocultas */
      animation-name: aparecerLetra;
      animation-duration: 20s; /* Duración de la animación */
      animation-delay: 1s; /* Retraso para cada letra */
      animation-iteration-count: 1; /* Una sola vez */
      animation-fill-mode: forwards; /* Mantiene el estado final */
      color:rgb(180, 145, 120);
      font-size: 1.3em;
      font-style: italic;
      text-align:center;
      display: flex;
    justify-content: center;
    align-items: center;
    object-position: center;
    }