/* Global Styles */
body {
    font-family: 'Arial', sans-serif;
    background-color: #fff;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    height: 100vh; /* Full viewport height */
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically */
    text-align: center;
    padding-left: 10px; /* Ensure the content doesn't touch the left edge */
    padding-right: 10px; /* Ensure the content doesn't touch the right edge */
}

header {
    margin-bottom: 20px; /* Increased margin to give space between logo and punny line */
}

.logo {
    max-width: 500px; /* Increased logo size to 500px */
    width: 100%; /* Ensure it scales responsively */
    margin-left: auto; /* Center logo horizontally */
    margin-right: auto; /* Center logo horizontally */
}

.punny-line {
    font-size: 2rem; /* Increased font size for the punny line */
    color: #555;
    font-style: italic;
    margin: 20px 0; /* Added more margin to ensure space around the punny line */
    font-weight: bold; /* Added emphasis */
    padding: 0 20px; /* Added padding to left and right for mobile */
}

footer {
    font-size: 1rem; /* Normal font size for footer */
    color: #777; /* Light gray for footer text */
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
    font-weight: bold; /* Bold footer text */
}

/* Responsive Design */
@media (max-width: 768px) {
    .logo {
        max-width: 400px; /* Adjust logo size for smaller screens */
    }

    .punny-line {
        font-size: 1.5rem; /* Smaller punny line font size on mobile */
        padding: 0 15px; /* Added padding for mobile to prevent edges from touching */
    }

    footer {
        font-size: 0.8rem; /* Smaller footer text on mobile */
    }
}