body {
    font-family: Arial, sans-serif;
    background-image: url('https://images.unsplash.com/photo-1620120966883-d977b57a96ec?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    margin: 0;
    width: 100%;
    padding: 0;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Asegura que el cuerpo tenga al menos el alto de la ventana del navegador */
}

.container {
    width: 80%;
    margin: 50px auto;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8); /* Color de fondo con opacidad */
    padding: 20px;
    border-radius: 10px;
}

footer {
    background-color: rgba(248, 249, 250, 0.1); /* Color de fondo con opacidad */
    margin-top: auto; /* Coloca el footer al final de la página */
    padding: 20px 0;
    backdrop-filter: blur(10px); /* Aplica un efecto de desenfoque al fondo */
    text-align: center;
    color: #fff;
}

footer hr {
    border: 1px solid #ddd;
}

.pdcc-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pdcc h2 {
    font-size: 24px;
    margin: 0;
    color: #333;
}

.pdcc p {
    font-size: 14px;
    margin: 0;
    padding: 10px;
}

.pdcc-open-modal {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.pdcc-open-modal:hover {
    background-color: #0056b3;
}

.proyectos {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Los proyectos se ajustan automáticamente */
    grid-gap: 20px; /* Espacio entre los proyectos */
}

.proyecto {
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
}

.proyecto h3 {
    margin-top: 0;
}

.proyecto p {
    margin-top: 5px;
}

.proyecto a {
    display: block;
    margin-top: 10px;
    text-decoration: none;
    color: blue;
}

.lenguajes img {
    width: 50px; /* ajusta el tamaño según sea necesario */
    margin-right: 10px; /* ajusta el espacio entre las imágenes */
}



@media screen and (max-width: 768px) {
    .proyecto {
        flex: 0 0 auto; /* Permitir que los proyectos se ajusten automáticamente en pantallas más pequeñas */
        margin-right: 10px; /* Espacio reducido entre proyectos */
    }
}