/* General Styles */
body {
    font-family: 'Times New Roman', sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #f9f7f1;
    color: #333;
}

/* Header and Navigation */
header {
    background-color: #b3b3b3;
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #5e4c3a;
}

/* Main Section Layout */
.intro {
    display: flex;
    justify-content: flex-start; /* Asegura que la imagen y el texto estén en línea */
    align-items: center;         /* Alinea el contenido verticalmente en el centro */
    max-width: 1200px;
    margin: 0 auto;              /* Centra el contenido horizontalmente en la página */
    padding: 50px 20px;
}

/* Ajuste del tamaño de la imagen de perfil */
.profile-pic img {
    width: 400px !important;      /* Fuerza el ancho de la imagen */
    height: 400px !important;     /* Fuerza la altura de la imagen */
    border-radius: 0%;           /* Mantiene el formato circular de la imagen */
    border: 3px solid #dcdcdc;    /* Borde alrededor de la imagen */
    object-fit: cover;            /* Asegura que la imagen se recorte si es necesario para mantener el aspecto circular */
}

/* Estilos para la descripción al lado de la imagen */
.description {
    max-width: 600px;            /* Ajusta el ancho máximo del texto */
    margin-left: 50px;           /* Separa el texto de la imagen a la izquierda */
    padding-left: 20px;
    flex: 1;
}

.description h1 {
    font-size: 2rem;             /* Ajusta el tamaño del título */
    margin-bottom: 15px;
}

.description p {
    font-size: 1.1rem;           /* Ajusta el tamaño del párrafo */
    line-height: 1.6;
}

/* Projects Section */
.projects {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 50px;
}

.project {
    text-align: center;
    margin: 20px;
}

.project img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid #dcdcdc;
    margin-bottom: 10px;
}

/* Contact Section */
.contact-section {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.contact-section form input, .contact-section form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact-section form button {
    padding: 10px 20px;
    background-color: #dcdcdc;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.contact-section form button:hover {
    background-color: #dcdcdc;
}

/* Footer */
footer {
    background-color: #b3b3b3;
    padding: 20px;
    text-align: center;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer ul li {
    display: inline;
    margin: 0 10px;
}

footer ul li a {
    text-decoration: none;
    color: #333;
}

/* Responsive Design */
@media only screen and (max-width: 768px) {
    .intro {
        flex-direction: column;  /* En pantallas pequeñas, la imagen y el texto se apilan */
        text-align: center;
    }

    .description {
        margin-left: 0;
        padding-left: 0;
    }

    .projects {
        flex-direction: column;
        align-items: center;
    }
}