style.css

/* Limpieza general y una fuente limpia */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Asegura que el padding y el borde no afecten al tamaño total de los elementos */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Fondo de la pantalla (Gris oscuro para que resalte el rojo y blanco) */
body{
    background-color: #121214;
    color:#FFFFFF; /* Color del texto en blanco */
    min-height: 100vh; /* Asegura que el fondo cubra toda la altura de la pantalla */
    display: flex; /* Flexbox para centrar el contenido */
    flex-direction: column; /* Organiza el contenido en columna */
    align-items: center; /* Centra verticalmente */
    padding: 20px; /* Espacio alrededor del contenido para que no toque los bordes en pantallas pequeñas */
    text-align: center; /* Centra el texto para un diseño más limpio */
}

/*Titulo principal */
h1{
    font-size: 2.6rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px; /* Espaciado entre letras para un efecto más moderno */
    margin-bottom: 8px;
}

/* Descripcion breve */
p{
    color: #a0a0a5;
    font-size:1.05rem;
    max-width: 400px;
    line-height: 1.5; /* Mejora la legibilidad al aumentar el espacio entre líneas */
    margin-bottom: 35px;
}

/* Subtitulo de las redes*/
h2{
    font-size: 1.2rem;
    color: #ff3344;
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Espaciado entre letras para un efecto más moderno */
    margin-bottom: 20px;
}

/* Contenedor de la lista (limpio y centrado) */
ul{
    list-style: none; /* Elimina los puntos de la lista */
    width: 100%;
    max-width: 360px;
    display: flex; /* Flexbox para organizar los enlaces */
    flex-direction: column; /* Organiza los enlaces en columna */
    gap: 14px; /* Espacio entre los enlaces */
}

ul li a{
    display: block;
    background-color: #1a1a1e; /* Fondo oscuro para los enlaces */
    color: #ffffff; /* Color del texto en blanco */
    text-decoration: none; /* Elimina el subrayado */
    padding: 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.05rem;
    border: 1px solid #2a2a30;  /* Borde sutil para dar profundidad */
    transition: all 0.2s ease-in-out; /* Transición suave para el hover */
}

ul li a:hover{
    background-color: #ff3344; /* Cambia el fondo a rojo al pasar el mouse */
    color: #ffffff; /* Asegura que el texto siga siendo blanco */
    border-color: #ff3344; /* Cambia el borde a rojo para un efecto más llamativo */
    transform: translateY(-2px); /* Eleva ligeramente el enlace para un efecto de "flotación" */
    box-shadow: 0 6px 20px rgba(255, 51, 68, 0.4); /* Agrega una sombra para dar profundidad */
}