/* Styles for default PC view */
h1 {
    font-size: 60px; /* Reduced from 80px */
    text-align: center;
    color: white;
    font-family: "Press Start 2P", system-ui;
    margin-top: 60px; /* Reduced from 100px */
}

h2 {
    font-size: 18px; /* Reduced from 22px */
    color: white;
    font-family: "Press Start 2P", system-ui;
    text-align: center;
}

body {
    margin: 0;
    padding: 0;
    background-color: black;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* This centers main items horizontally like h1, h2, img, and button-container */
    padding-bottom: 20px; /* Reduced from 30px */
    box-sizing: border-box;
}

img.logo-right {
    display: block;
    margin: 0 auto;
    width: 600px; /* Reduced from 800px */
    height: auto;
    max-height: 40vh; /* Reduced from 50vh */
    object-fit: contain;
}

/* --- Button Container & Button Styles --- */
.button-container {
    /* Make this a flex container to arrange buttons */
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
    align-items: center; /* Align buttons vertically if they have different heights */
    flex-wrap: wrap; /* Allow buttons to wrap to the next line on smaller screens */

    margin-top: 10px; /* Adjusted from 1px */
    margin-bottom: 30px; /* Reduced from 50px */
    /* Remove text-align: center here if flexbox is handling centering */
    /* text-align: center; */ /* No longer needed as flexbox handles centering */
    
}

.download-button,
.support-button { /* Apply common styles to both buttons */
    display: inline-block; /* Or just 'block' if they are flex items */
    padding: 12px 25px; /* Reduced from 15px 30px */
    background-color: #4CAF50;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 16px; /* Reduced from 18px */
    border-radius: 6px; /* Slightly reduced */
    cursor: pointer;
    font-family: 'Press Start 2P', cursive;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* Slightly smaller shadow */
    transition: background-color 0.3s ease;
    /* margin-top will be handled by button-container now */
    /* margin-top: 40px; */

    /* Add spacing between buttons */
    margin: 8px; /* Reduced from 10px */
}

.download-button:hover,
.support-button:hover {
    background-color: #45a049;
}

/* --- End Button Styles --- */


/* Media query for mobile devices with a maximum width of 768 pixels */
@media (max-width: 768px) {
    h1 {
        font-size: 28px; /* Reduced from 35px */
        margin-top: 30px; /* Reduced from 40px */
    }

    h2 {
        font-size: 12px; /* Reduced from 14px */
        margin-bottom: 15px; /* Reduced from 20px */
    }

    img.logo-right {
        width: 80%; /* Reduced from 90% */
        height: auto;
        max-height: 35vh; /* Reduced from 40vh */
        margin-top: 15px; /* Reduced from 20px */
    }

    /* --- Mobile Button Styles --- */
    .button-container {
        flex-direction: column; /* Stack buttons vertically on mobile */
        margin-bottom: 20px; /* Reduced from 30px */
        margin-left: 0; /* Reset left shift for mobile */
    }

    .download-button,
    .support-button {
        font-size: 12px; /* Reduced from 14px */
        padding: 8px 18px; /* Reduced from 10px 20px */
        width: 50%; /* Increased width slightly to compensate for smaller padding */
        
        margin: 8px 0; /* Reduced from 10px 0 */
        margin-bottom: 20px;
    }
    /* --- End Mobile Button Styles --- */
}