/* Fondo oscuro y fuente */
body {
    background-color: #0d1117; /* Fondo oscuro */
    color: #ffffff; /* Texto en color blanco */
    font-family: 'Courier New', Courier, monospace; /* Fuente estilo consola */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Oculta el desbordamiento del fondo animado */
    overflow-y: auto; /* Permite el desplazamiento vertical */
}

/* Encabezado */
header {
    display: flex; /* Para alinear título y menú */
    justify-content: space-between; /* Separar título y menú */
    align-items: center; /* Centrar verticalmente el contenido */
    text-align: center;
    background-color: #05050500; /* Fondo más oscuro para el header */
    padding: 0.0em 0;
}


header h1 {
    font-family: Arial, sans-serif; /* Fuente igual que en tu menú */
    font-size: 28px; /* Tamaño del título */
    color: white; /* Mantén el color blanco */
    margin: 30px auto; /* Separación del borde superior */
    text-align: center; /* Asegura que esté centrado */
    max-width: 90%; /* Limita el ancho para evitar que quede pegado a los lados */
}

/* Botón de regreso al Home */
.home-button {
    background: none; /* Quitar el fondo */
    border: none; /* Eliminar bordes */
    cursor: pointer; /* Cambiar el cursor al pasar por encima */
    font-family: Arial, sans-serif; /* Fuente igual que el menú */
    font-size: 18px; /* Tamaño similar al menú */
    color: rgb(255, 37, 37); /* Mantén el color Rojo */
    margin-right: 80px; /* Espaciado a la izquierda */
    display: block; /* Centra el botón */
    text-align: center; /* Centra el texto del botón */
}


footer {
    text-align: center; /* Centra el texto horizontalmente */
    margin: 20px auto; /* Espaciado para separarlo de los límites */
    padding: 10px 0; /* Espaciado interno arriba y abajo */
    color: #ffffff; /* Color gris oscuro */
    font-family: Arial, sans-serif; /* Fuente igual a la del menú principal */
    font-size: 14px; /* Tamaño de la letra */
    font-weight: bold; /* Negrita */
}

/* Texto principal */
h1, p {
    position: relative;
    z-index: 1; /* Asegura que el texto esté por encima del fondo */
}

/* Fondo animado */
#matrix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: -1; /* Fondo detrás del contenido */
}

.sidebar ul {
    list-style: none; /* Quitar viñetas */
    padding: 0;
    margin: 0;
    /* font-family: 'Arial', sans-serif; */
}

.sidebar .submenu a {
    text-decoration: none; /* Sin subrayado */
    color: white;
}

.sidebar .submenu a:hover {
    color: #ff9999; /* Rojo claro al pasar el ratón */
}

.logo {
    width: 100px; /* Ajusta el ancho del logo */
    height: auto; /* Mantiene las proporciones */
    margin-left: 80px; /* Espaciado a la izquierda */
}