body {
    font-family: Arial, sans-serif;
    background: #000000; /* Dark background */
    color: #FFFFFF; /* White text on dark background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 20px;
}

.profile-card {
    background: #1e1e1e; /* Dark card background */
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    margin-top: 20px; /* Add space above the card */
}

.profile-img {
    width: 100px; /* Make profile picture slightly smaller */
    height: 100px; /* Adjust to keep it proportional */
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 30px;
}

h1 {
    font-size: 2em;
    margin: 0 0 20px 0;
    color: #FFFFFF; /* White for header */
}

.title {
    font-size: 1.3em;
    color: #CC3333; /* Red for title accent */
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-buttons {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 10px; /* Reduce gap between circles */
}

.contact-buttons .button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #CC3333; /* Red for buttons */
    color: white;
    text-decoration: none;
    width: 50px; /* Smaller circles */
    height: 50px; /* Smaller circles */
    border-radius: 50%; /* Ensure perfect circles */
    font-size: 1.3em; /* Adjust font size to fit smaller circles */
    transition: background 0.3s, transform 0.2s;
}

.contact-buttons .button:hover {
    background: #993333; /* Darker red for hover effect */
}

.contact-info {
    margin: 30px 0;
}

.contact-info p {
    margin: 20px 0;
    color: #FFFFFF; /* White text */
}

.contact-info a {
    color: #CC3333; /* Red for links */
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

.social-links {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-links a img {
    width: 50px;
    height: 50px;
    filter: grayscale(100%);
    transition: filter 0.3s, transform 0.2s;
}

social-links a img:hover {
    filter: none;
    transform: scale(1.1);
}