html {
  box-sizing: border-box;
  height: 100%;
}

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

html, body {
  cursor: auto;
}
button:active {
  cursor: grabbing;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: rgb(0, 0, 0);

  /* Código para poner un cursor personalizado*/

  /* Cursor normal → guitarra */
  cursor: url("https://icons.iconarchive.com/icons/flat-icons/music/32/guitar-icon.png"), auto;
}

*:active {
  /* Cursor al hacer clic → nota musical */
  cursor: url("https://icons.iconarchive.com/icons/flat-icons/music/32/music-note-icon.png"), auto;
}




h1 {
  font-family: "Rock Salt", cursive;
  font-weight: 400;
  font-size: 4rem;
  font-style: normal;
  color: rgb(61, 61, 255);
  text-align: center;
  word-wrap: break-word;

}
@media (max-width: 768px) {
  h1 { font-size: 2.2rem;
  padding:0 10px;}
}

h2 {
  font-size: 1.8em;
  font-family: "Rationale", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(255, 255, 255);
  text-align: center;
  word-wrap: break-word;
}

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

}

#tituloPagina {
  font-family: "Rock Salt", cursive;
  font-weight: 400;
  font-style: normal;
}

#foto {
  width: auto;
  height: 500px;
  border: #006941 solid 4px;
  margin-top: 15px;
}

.tituloPrediccion {
  font-size: 3.5em;
  color: white;  text-align: center;
  word-wrap: break-word;
}
@media (max-width: 768px) {
  .tituloPrediccion { font-size: 2.2rem;
  padding:0 10px;}
}

.prediccion {
  font-size: 1.5em;
  color: rgb(255, 255, 255);
  text-align: center;
  word-wrap: break-word;
}
@media (max-width: 768px) {
  .prediccion { font-size: 2.2rem;
  padding:0 10px;}
}

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

#boton {
  font-size: 1em;
  background-color: #aa002be1;
  color: rgb(245, 245, 245);
  margin-bottom: 1em;
  border-color: rgb(112, 111, 111) ;
  cursor: pointer;
  
}