/* Basic styling for the entire page */
body {
    background-color: #fff5cf; /* Light cream from your logo */
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

/* The main container for your card */
.card-container {
    background-color: #ffffff; /* A clean white for the card */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 600px;
    width: 90%;
}

.gazette-headline {
    font-family: Georgia, 'Times New Roman', Times, serif; /* A classic, elegant newspaper font */
    font-size: 2rem; /* Large and prominent */
    text-align: center;
    color: #36454F; /* Dark color from your brand palette */
    text-transform: uppercase; /* The classic all-caps newspaper look */
    letter-spacing: 2px; /* Adds a touch of sophistication */
    padding-bottom: 10px;
    border-bottom: 2px solid #36454F; /* A solid line to separate the masthead */
    margin-bottom: 40px;
}

.gazette-tagline {
    font-family: Arial, sans-serif; /* A clean, modern sans-serif font for contrast */
    font-size: 1.25rem; /* A smaller font size so it doesn't compete with the headline */
    font-style: italic; /* A subtle styling to make it look like a descriptive sub-header */
    text-align: center;
    color: #36454F; /* Matches the main headline color */
    margin-top: -20px; /* Moves the tagline closer to the headline */
    margin-bottom: 30px; /* Provides good spacing from the social icons below */
    line-height: 1.5; /* Improves readability by giving the text some breathing room */
}

/* Styling for the logo image */
.logo-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 30px;
}

.social-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allows icons to wrap to the next line on smaller screens */
    gap: 20px; /* Adds space between each icon group */
}

/* Styling for each individual link group (icon + name) */
.social-links a {
    display: flex;
    flex-direction: column; /* Stacks the icon and text vertically */
    align-items: center; /* Centers the icon and text horizontally */
    text-decoration: none;
    color: #715a32; /* Dark color for text and icon */
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.social-links a:hover {
    transform: scale(1.1);
    color: #728b9d; /* A lighter color on hover for visual feedback */
}

/* Styling for the social media icons within the link */
.social-links a i {
    font-size: 3rem; /* The icon itself should still be large */
}

/* --- The new CSS for the stylized name --- */
.social-links a span {
    font-size: 0.9rem; /* Smaller font size for the name */
    margin-top: 5px; /* Adds a little space between the icon and the name */
    font-family: Georgia, 'Times New Roman', Times, serif; /* A more stylized, classic font */
    text-transform: uppercase; /* Makes the name stand out in all caps */
    letter-spacing: 1px; /* Adds a little space between letters for a cleaner look */
}