/* 1. Resetear márgenes y fijar el tamaño de la pantalla */
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #000;
    }

    /* 2. Fijar el canvas al fondo de la pantalla completa */
    #matrixCanvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 1; /* Capa inferior */
        display: block; /* Elimina espacios en blanco inferiores residuales */
    }

    /* 3. Forzar al contenido a flotar por encima */
    .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2; /* Capa superior, por encima del canvas */

        /* Centrado perfecto del contenido */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        /* Estilos de texto */
        color: #ffffff;
        font-family: Arial, sans-serif;
        text-align: center;
        text-shadow: 0 0 10px #00ff00;
        pointer-events: none; /* Permite hacer clic a través del texto si es necesario */
    }

    .gatekeeper {
        position: absolute;
        bottom:1em;
        right: 1em;
        width: 1em;
        height: 1em;
        z-index: 3; /* Capa superior, por encima del canvas */

        /* Estilo visual Matrix */
        /*background: rgba(0, 20, 0, 0.7); /* Fondo oscuro semitransparente */
        /*border: 1px solid #00ff00;       /* Borde verde brillante */
        border-radius: 1em;
        padding: 15px;
        color: #00ff00;
        font-family: 'Courier New', Courier, monospace; /* Fuente código */
        font-size: 14px;
        /*box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);*/
    }

    a,a:visited,a:hover,a:active {
        color: #00FF00 !important;
        text-decoration: none !important;
    }

    div.gatekeeper > p > a,
    div.gatekeeper > p > a:visited,
    div.gatekeeper > p > a:hover,
    div.gatekeeper > p > a:active {
        color: #00FF00 !important;
    }

    /* Habilitar interacciones (como botones) si los añades dentro de .content */
    .content a, .content button, .gatekeeper{
        pointer-events: auto;
        color: #00FF00;
    }