/* General body styling */
body {
    margin: 0; /* Remove default browser margin */
    font-family: 'Quicksand', sans-serif;
    background-color: #f0f2f5; /* A light grey background */
    
    /* Use Flexbox to center the content */
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center;     /* Vertically center */
    min-height: 100vh;       /* Make the body at least the height of the screen */
}

/* The main container for our content */
.card {
    background-color: white;
    padding: 2rem 3rem;
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* A subtle shadow */
    text-align: center; /* Center the content inside the card */

    /* --- NEW --- Make the card responsive */
    max-width: 1400px; /* The card will not grow wider than 350px */
    width: 80%;       /* On smaller screens, it will take up 90% of the screen width */
}

/* Styling for the title inside the card */
.card-title {
    font-size: 2rem; /* Set the font size */
    font-weight: 400;  /* Make the font semi-bold */
    color: #333;       /* Dark grey color */
    margin-top: 0;     /* Remove default top margin from h1 */
    margin-bottom: 1rem; /* Add space between the title and the image */
}

/* The profile image styling */
.profile-image {
    width: 80%;                /* The image width is 50% of the card's width */
    max-width: 1024px;          /* But it will never be larger than 150px */
}

/* The container for the social links */
.social-links {
    margin-top: 1.5rem;
}

/* Styling for each individual social link */
.social-links a {
    color: #333; /* Icon color */
    font-size: 1.5rem; /* Icon size */
    margin: 0 12px; /* Space between icons */
    text-decoration: none; /* Remove the underline from links */
    transition: color 0.3s ease; /* Smooth color change on hover */
}

/* Change icon color when you hover over it */
.social-links a:hover {
    color: #007bff; /* A nice blue color */
}

.site-footer {
    position: fixed; /* This is the key property! */
    bottom: 0;       /* Stick it to the bottom */
    left: 0;         /* Align it to the left */
    width: 100%;     /* Make it span the full width */
    
    background-color: #343a40; /* A dark background color */
    color: #a9a9a9;            /* A light grey text color */
    text-align: center;        /* Center the text inside */
    padding: 1rem 0;           /* Add some vertical padding */
    font-size: 0.8rem;         /* Make the font a bit smaller */
}

.site-footer p {
    margin: 0; /* Remove the default margin from the paragraph tag */
}