@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f0f2f5;
    margin: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center; 
    min-height: 100vh;
}

.main-header {
    background-color: #ffffff;
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%;
    margin-bottom: 40px; 
}

.main-nav ul {
    list-style: none; padding: 0; margin: 0;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.main-nav a {
    text-decoration: none; color: #333; font-weight: 600; font-size: 18px;
    padding: 5px 0; position: relative; transition: color 0.2s;
}

.main-nav a:hover { color: #0866ff; }

.main-nav a.active {
    color: #0866ff;
    border-bottom: 2px solid #0866ff;
}

main {
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

article[data-testid="test-profile-card"] {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.profile-avatar {
    padding: 30px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
    img[data-testid="test-user-avatar"] {
        width: 200px; 
        height: 200px;
        border-radius: 50%;
        object-fit: cover; 
        border: 5px solid #fff; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

.profile-info { padding: 24px; }

h2[data-testid="test-user-name"] { margin-top: 0; margin-bottom: 8px; font-size: 28px; color: #1c1e21; }
p[data-testid="test-user-bio"] { font-size: 16px; line-height: 1.5; color: #606770; margin-bottom: 20px; }
.profile-info h3 { margin-bottom: 8px; font-size: 18px; color: #1c1e21; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px; }
.profile-info ul { list-style: none; padding-left: 0; margin: 0 0 20px 0; color: #606770; }
.profile-info li { margin-bottom: 6px; }

nav[data-testid="test-user-social-links"] { margin: 24px 0; }
nav[data-testid="test-user-social-links"] ul { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
nav[data-testid="test-user-social-links"] a { display: flex; align-items: center; gap: 8px; background-color: #f0f2f5; color: #333; text-decoration: none; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 9999px; transition: all 0.2s ease-in-out; }
nav[data-testid="test-user-social-links"] a i { font-size: 18px; }
nav[data-testid="test-user-social-links"] a:hover, nav[data-testid="test-user-social-links"] a:focus { background-color: #e4e6eb; transform: scale(1.05); color: #000; outline: none; }

main[data-testid="test-about-page"] section {
    display: block;
    width: 100%; 
    margin-bottom: 20px; 
}

.content-page {
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    max-width: 800px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
}

.content-page h1 {
    width: 100%;
    text-align: center;
}

.content-page-contact {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    max-width: 800px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
}
#contact-form { margin-top: 30px;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.form-group { margin-bottom: 20px; }
.form-group label { display: flex; font-weight: 600; margin-bottom: 8px; color: #333; }
.form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-family: 'Poppins', sans-serif; font-size: 16px; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #0866ff; box-shadow: 0 0 5px rgba(8, 102, 255, 0.5); }
.form-group textarea { min-height: 150px; resize: vertical; }
#contact-form button { width: 100%; padding: 15px; background-color: #0866ff; color: white; border: none; border-radius: 6px; font-size: 18px; font-weight: 700; cursor: pointer; transition: background-color 0.2s; }
#contact-form button:hover { background-color: #0655d4; }
.error-message { color: #d93025; font-size: 14px; margin-top: 5px; display: none; }
.success-message { color: #1e8e3e; background-color: #e6f4ea; border: 1px solid #1e8e3e; padding: 15px; border-radius: 6px; text-align: center; margin-top: 20px; display: none; }

@media (min-width: 600px) {
    article[data-testid="test-profile-card"] { flex-direction: row; }
    .profile-avatar {
    padding: 30px;
    flex: 1; 
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
    img[data-testid="test-user-avatar"] {
        width: 250px; 
        height: 250px;
        border-radius: 50%;
        object-fit: cover;
        border: 5px solid #fff; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    }
}

main[data-testid="test-about-page"] section {
    display: block;
    width: 100%; 
    margin-bottom: 20px; 
}

.content-page {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
}

.content-page h1 {
    width: 100%;
    text-align: center;
}

.content-page-contact {
    display: flex;
    flex-direction: column; 
    align-items: center;
    max-width: 800px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
}

#contact-form { margin-top: 30px;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.form-group { margin-bottom: 20px; }
.form-group label { display: flex; font-weight: 600; margin-bottom: 8px; color: #333; }
.form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-family: 'Poppins', sans-serif; font-size: 16px; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #0866ff; box-shadow: 0 0 5px rgba(8, 102, 255, 0.5); }
.form-group textarea { min-height: 150px; resize: vertical; }
#contact-form button { width: 100%; padding: 15px; background-color: #0866ff; color: white; border: none; border-radius: 6px; font-size: 18px; font-weight: 700; cursor: pointer; transition: background-color 0.2s; }
#contact-form button:hover { background-color: #0655d4; }

.form-group input.invalid,
.form-group textarea.invalid {
    border-color: #d93025;
    box-shadow: 0 0 5px rgba(217, 48, 37, 0.5);
}

.error-message { color: #d93025; font-size: 14px; margin-top: 5px; display: none; }
.success-message { color: #1e8e3e; background-color: #e6f4ea; border: 1px solid #1e8e3e; padding: 15px; border-radius: 6px; text-align: center; margin-top: 20px; display: none; }