/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* Esto obliga a que toda la página, desde la raíz, use tu cursor */
html, body {
  
  cursor: url('cursor corazón.png'), auto !important;
  min-height: 100vh; /* Asegura que el cuerpo cubra toda la ventana */
}

/* Y esto para los elementos clicables */
a, button, img, .entry-boton {
  cursor: url('curlinkczn.png'), pointer !important;
}

/* Esto aplica a toda la página */
body {
  font-family: 'Fredoka', sans-serif;
  background-image: url('ositobkgnd.png'); 
  background-repeat: repeat;
  color: #4a0072;           /* Un morado oscuro para que se lea bien */
  line-height: 1.6;         /* Espacio entre líneas para que no se vea amontonado */
  padding: 20px;



/* Estilo para los títulos (estilo logo) */
h1 {
  color: #ff007f;           /* Rosa fuerte vibrante */
  text-align: center;
  font-size: 3rem;
  text-shadow: 3px 3px 0px #00ffff; /* Sombra turquesa tipo retro */
  -webkit-text-stroke: 1px #ff007f; /* Un borde fino */
}

/* Estilo para los links (que se vean Cute) */
a {
  color: #ff66cc;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 2px dashed #ff66cc;
}

a:hover {
  color: #00ffff;           /* Cambia a turquesa cuando pasas el mouse */
  border-bottom: 2px solid #00ffff;

}

.boton-gif {
  display: inline-block;
  width: 88px;
  height: 18px;
  background-image: url('17d-me.gif');
  background-size:contain
  background-repeat: no-repeat;
  text-decoration: none;
}

/* Tip extra: Que se mueva un poquito cuando pases el mouse */
.boton-gif:hover {
  transform: scale(1.1);
}

/* La cajita que funciona como enlace */
.entry-boton {
  text-decoration: none; /* Quita el subrayado azul feo de los links */
  display: block;        /* Hace que toda la caja sea clicable */
  max-width: 400px;
  margin: 20px auto;
  background-color: white;
  border: 3px solid #ff66cc;
  border-radius: 20px;
  padding: 20px;
  color: #4a0072;
  transition: all 0.3s ease; /* Para que los cambios sean suaves */
  box-shadow: 5px 5px 0px #ffc1e3;
}

/* EFECTO CUANDO PASAS EL MOUSE (Hover) */
.entry-boton:hover {
  transform: scale(1.05); /* Se hace un poquito más grande */
  border-color: #00ffff;  /* Cambia el borde a turquesa */
  box-shadow: 8px 8px 0px #b2f7f7; /* Cambia la sombra */
  background-color: #fff9fb;
}

.entry-tag {
  background-color: #ff007f;
  color: white;
  padding: 2px 8px;
  font-size: 10px;
  border-radius: 10px;
  font-weight: bold;
}

.click-me {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #ff66cc;
  text-align: right;
  text-decoration: underline;
}

}