/* 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." */

 @font-face {
    font-family: 'Fuente1'; /* El nombre que tú le quieras dar */
    src: url('DUNGRG__.TTF'); /* El nombre exacto de tu archivo subido */
 }
 
body {
  background-color: white;
  color: black;
  font-family: Verdana;

}

  

/* Estilo base del botón */
 .boton-interactivo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Ajusta el ancho y alto según el tamaño de tu imagen */
    width: 80px; 
    height: 60px; 
    
    /* Imagen por defecto */
    background-image: url('https://nanita22.neocities.org/angel02.gif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Estilo del texto que va encima */
    color: #14000A;
    font-family: 'Fuente1', sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important; /* Quita la línea de link */
    
    /* Transición suave para que el cambio no sea brusco */
    transition: all 0.3s ease; 
    
    position: absolute; 
    z-index: 999; /* Esto asegura que los botones floten POR ENCIMA de cualquier fondo o cuadro */
}

/* EFECTO HOVER: Lo que pasa al poner el cursor encima */
.boton-interactivo:hover {
    /* Aquí pones la segunda imagen */
    background-image: url('https://nanita22.neocities.org/angel01.gif');
    
    /* Opcional: puedes hacer que el texto cambie de color o suba un poquito */
    color: #FFE5E5; 
    transform: scale(1.05); /* Esto hace que el botón se agrande un 5% */
    
}
    
    
    /* Estilo base del botón */
 .boton-interactivo2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Ajusta el ancho y alto según el tamaño de tu imagen */
    width: 400px; 
    height: 350px; 
    
    /* Imagen por defecto */
    background-image: url('https://nanita22.neocities.org/grape.gif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Estilo del texto que va encima */
    color: #FAE5FF;
    font-family: 'Fuente1', sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important; /* Quita la línea de link */
    
    /* Transición suave para que el cambio no sea brusco */
    transition: all 0.3s ease; 
    
    position: absolute; 
    z-index: 999; /* Esto asegura que los botones floten POR ENCIMA de cualquier fondo o cuadro */
}

/* EFECTO HOVER: Lo que pasa al poner el cursor encima */
.boton-interactivo2:hover {
    /* Aquí pones la segunda imagen */
    background-image: url('https://nanita22.neocities.org/mysticalcrystal.gif');
    
    /* Opcional: puedes hacer que el texto cambie de color o suba un poquito */
    color: #CF00FF; 
    transform: scale(1.05); /* Esto hace que el botón se agrande un 5% */
    
}