/* Basic styling for the body of the support page */
body {
    margin: 0;
    padding: 0;
    background-color: black; /* Dark background to match your main site */
    color: white; /* White text for contrast */
    font-family: "Press Start 2P", system-ui;
    display: flex; /* Enable Flexbox for centering content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    min-height: 100vh; /* Ensure the body takes at least the full viewport height */
    flex-direction: column; /* Stack children vertically */
    box-sizing: border-box; /* Include padding in element's total width and height */
    padding: 15px; /* Reduced padding around the content */
}

/* Container for the support page content */
.support-container {
    text-align: center; /* Center text within the container */
    padding: 15px; /* Reduced padding */
    max-width: 80%; /* Slightly more constrained width for better readability */
    margin: auto; /* Center the container itself */
}

/* Styling for the main heading */
h1 {
    font-size: 2.2em; /* Smaller font size for the heading */
    margin-bottom: 15px; /* Reduced space below the heading */
}

/* Styling for the placeholder image */
.support-image {
    max-width: 45%; /* Slightly smaller image on PC */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Slightly reduced rounded corners */
    margin-bottom: 15px; /* Reduced space below the image */
}

/* Styling for the paragraph text */
p {
    font-size: 1em; /* Smaller text for main content */
    line-height: 1.4; /* Adjusted line height for better readability with smaller font */
    margin-bottom: 10px; /* Reduced space between paragraphs */
}

/* Media queries for responsiveness on smaller screens */
@media (max-width: 768px) {
    h1 {
        font-size: 1.5em; /* Further adjust heading size for mobile */
    }
    p {
        font-size: 0.85em; /* Further adjust paragraph text size for mobile */
    }
    /* Styling for the placeholder image */
    .support-image {
        max-width: 60%; /* Slightly smaller image on mobile */
        margin-bottom: 15px; /* Space below the image */
        margin-top: 15px; /* Space above the image */
    }
    body {
        padding: 10px; /* Even less padding on very small screens */
    }
    .support-container {
        padding: 10px; /* Even less padding on very small screens */
    }
}