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

<head>
    <meta charset="UTF-8">
    <title>Mi Bienvenida</title>
    <style>
  
        /* Eliminamos los márgenes predeterminados del navegador */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%; /* Importante para que el alto sea 100% */
            width: 100%;
        }

        /* Hacemos que la imagen cubra toda la pantalla */
        .imagen-fondo {
            position: fixed ;    /* Fija la imagen en la ventana */
            top: 0;
            left: 0;
            min-width: 100%;    /* Ancho mínimo del 100% */
            min-height: 100%;   /* Alto mínimo del 100% */
            z-index: -1;        /* Envía la imagen al fondo detrás de los botones */
            object-fit: cover ;  /* Escala la imagen sin deformarla para que llene el espacio */
        }

        /* Estilos rápidos para centrar los botones encima de la imagen */
        .contenedor-botones {
            position: absolute;
            top: 50%;           /* Baja el contenedor al medio */
            left: 50%;          /* Centra horizontalmente */
            transform: translate(-50%, -50%); /* Ajusta el centro exacto */
            text-align: center;
        }
        
        /* Tus botones (recuerda ponerles las clases en el HTML) */
        .boton {
            display: inline-block;
            padding: 10px 20px;
            margin: 0px;
            background-color: rgba(0, 0, 0, 0); /* Fondo semitransparente para leer el texto */
            color: blue;
            text-decoration: none;
            border: 0px solid white;
            font-family: arial;
            font-size: 38px;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }
        .boton:hover {
    transform: scale(1.1); /* Hace un zoom del 10%. (1.0 es el tamaño normal, 1.2 sería un 20% más grande) */
}
        .encabezado-inicio {
          animation: flotar 3s ease-in-out infinite;
              text-align: center;
            display: block;
             padding: 10px 20px;
          color: blue ;
          font-size: 38px ;
          font-family: arial ;
         }
         @keyframes flotar {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px); /* Sube 8 píxeles a mitad de la animación */
    }
    100% {
        transform: translateY(0px);  /* Regresa a su posición original */
    }
}
    </style>
</head>