body {
    background-color: rgb(247, 242, 199);
    }


.Mifoto {
  width: 500px; /* Ajusta el tamaño del contenedor */
  height: 700px;
  overflow: hidden; /* Para que la imagen no se salga del contenedor al hacer zoom */
  position: relative; /* Necesario para posicionar la imagen dentro */
  background-size: cover;
border: 2px solid black;
margin: 0 auto;
 cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.png"), auto;
}

.Mifoto img {
  display: block; /* Para eliminar el espacio extra debajo de la imagen */
  width: 100%;
  height: 100%;
  object-fit: cover; /* Para asegurar que la imagen cubra el contenedor */
  transition: transform 0.3s ease-in-out; /* Suaviza la animación */
}

.Mifoto:hover img {
  transform: scale(1.1); /* Aumenta el tamaño de la imagen un 10% */

}


    .tituloprincipal {
            font-family: "Story Script", ;
            font-weight: 300;
            font-style: normal;
            font-size: 5em;
            text-align: center;
            cursor: url("https://cdn-icons-png.flaticon.com/128/13501/13501973.png"), auto;
        }
        .titulo:hover {
            font-weight: 700;
            font-size: 5em;
            color:rgb(243, 200, 243);
            cursor: pointer;
        }
    .parrafo {
            color: rgb(155, 188, 253);
            font-size: 1.5em;
            margin-left: 5em;
        }
 .parrafoo {
            color: rgb(0, 0, 0);
            font-size: 1em;
            font-style: italic;
            margin-left: 2em;
        }

        .parrafo1 {
            color: rgb(0, 0, 0);
            font-size: 1.5em;
            text-align: center;
        }
        .parrafo2 {
            color: rgb(155, 188, 253);
            font-size: 1.4em;
            margin-left: 5em;
        }
         
        .parrafo3 {
            color: rgb(155, 188, 253);
            font-size: 1.4em;
            margin-left: 5em;
        }
 
        .parrafo4 {
            color: rgb(155, 188, 253);
            font-size: 1.4em;
            margin-left: 5em;
        }
 
        .parrafo5 {
            color: rgb(155, 188, 253);
            font-size: 1.4em;
            margin-left: 5em;
        }
        
        .parrafo6 {
            color: chocolate;
            font-size: 1.8em;
            text-align: center;
        }
 
        .parrafo7 {
            color: salmon;
            font-size: 1.4em;
            margin-left: 5em;
        }

  




html {
  box-sizing: border-box;
  height: 100%;
  margin-left: 5em;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  margin: 0;
  padding: 0;
  
  
  /* Código para poner un cursor personalizado*/


}


h1 {
  font-size: 2em;
  font-style: italic;
  color: chocolate;
}

#contenedor {
  margin: auto 1em;
  text-align: center;


}

#tituloPagina {
  margin-top: 1em;
  margin-bottom: 0;
  font-family: sans-serif;
}

#foto {
 height: 300px;
  border: chocolate solid 5px;
  margin-top: 15px;
}

.tituloPrediccion {
  font-size: 2em;
  font-style: oblique;
  color: olive;
  text-align: center;
}

.prediccion {
  font-size: 1.5em;
  font-style: italic;
  color: chocolate;
}

.prediccion::first-letter {
  text-transform: uppercase;
}

#boton {
  font-size: 0.9em;
  background-color: #efd388f0;
  color:olive;
  margin-bottom: 2em;
  cursor: pointer;
  font-style: oblique;
  font-weight: 1000px;
  cursor: pointer;
}

.image-container {
  width: 500px; /* Ajusta el tamaño del contenedor */
  height: 500px;
  overflow: hidden; /* Para que la imagen no se salga del contenedor al hacer zoom */
  position: relative; /* Necesario para posicionar la imagen dentro */
  background-size: cover;
border: 2px solid black;
margin: 0 auto;
}

.image-container img {
  display: block; /* Para eliminar el espacio extra debajo de la imagen */
  width: 100%;
  height: 100%;
  object-fit: cover; /* Para asegurar que la imagen cubra el contenedor */
  transition: transform 0.3s ease-in-out; /* Suaviza la animación */
}

.image-container:hover img {
  transform: scale(1.1); /* Aumenta el tamaño de la imagen un 10% */
  cursor: pointer; /* Cambia el cursor para indicar interactividad */
}

.elemento-hablador {
  padding: 20px;
  background-color: chocolate;
  transition: background-color 0.3s ease; /* Transición suave */
  cursor: pointer; /* Indica que es interactivo */

}

.elemento-hablador:hover {
  background-color: salmon; /* Cambia de color al pasar el mouse */
}