/* === Estilos Generales === */
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #fdfdfd;
    text-align: center;
}

/* Encabezado */
.grid-containerS {
    display: grid;
    grid-template-columns: 20% 80%;
    align-items: center;
    padding: 10px;
}

#t {
    color: #8a2be2; /* violeta */
}

/* Contenedor de lenguajes */
.grid-containerI {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px;
}

/* Tarjetas */
.card {
    border: 6px solid #000000;
    border-radius: 15px;
    padding: 15px;
    color: #2d1f55;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
}

/* Alineaciones */
.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.card img {
    margin-top: 10px;
}

/* Colores personalizados con HEX */
#l1, #l6 { background-color: #d86e9d; }  
#l2, #l5 { background-color: #cce79f; }  
#l3, #l4 { background-color: #a1b6e3; }

/* Descripción final */
#descripcion {
    background-color: #f7e7c2;
    padding: 20px;
    margin: 15px;
    border-radius: 15px;
    border: 6px solid #000000;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
}

#descripcion h3 {
    color: #8a2be2;
}

#descripcion a {
    color: blue;
    font-weight: bold;
    text-decoration: none;
}

#descripcion a:hover {
    text-decoration: underline;
}