/* This makes the page use the full screen and removes default spacing */
body, html {
    height: 100%;
    margin: 0;
    background-color: #f0f0f0; /* A light grey background, change if you want pure white (#ffffff) */

    /* These three lines are modern CSS for perfect centering */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* This container will now be centered on the page */
.container {
    text-align: center;
}

/* Renamed from .centered-username for clarity */
.username-text {
    font-family: "Zalando Sans Expanded", sans-serif;
	font-optical-sizing: auto;
	font-weight: 900;
	font-style: normal;
    font-size: clamp(1.25rem, 4vw, 2rem); /* Made the username a bit larger */
    margin-bottom: 25px; /* Adds space between the username and the button */
}

/* --- NEW BUTTON STYLES --- */
.newsletter-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #000000; /* Black background */
    color: #ffffff; /* White text */
    font-family: "Zalando Sans Expanded", sans-serif; /* Using the same font */
    font-weight: 900;
    font-size: 1rem;
    text-decoration: none; /* Removes the default link underline */
    border-radius: 10px; /* Gives the button rounded corners */
    transition: background-color 0.2s ease-in-out; /* Smooth transition for hover effect */
}

/* This makes the button slightly lighter when you hover over it */
.newsletter-button:hover {
    background-color: #333333;
}

/* --- NEW -- RESPONSIVE STYLES FOR MOBILE --- */
/* These styles will only apply when the browser window is 600px wide or less */
@media (max-width: 600px) {
    .container {
        padding-left: 15px; /* Add some padding on the sides for mobile */
        padding-right: 15px; /* Add some padding on the sides for mobile */
    }

    .newsletter-button {
        font-size: 0.8rem; /* Make the font smaller on mobile */
        padding: 6px 12px;   /* Make the padding smaller on mobile */
    }
}