body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #0a2a66; /* Solid color background for larger screens */
}

.image-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: url('IMG_7564.PNG') no-repeat center center fixed;
    background-size: cover; /* Changed to cover to ensure full background coverage */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Assuming the icon has an id of 'koorirun-icon' */
#koorirun-icon {
    display: block; /* Required to center with margin auto */
    width: 180px; /* Adjust this to control the size of the logo */
    height: auto; /* Keep the aspect ratio */
    margin: 0 auto; /* This will center the logo */
}

#download-title {
    color: #ffffff;
    text-align: center;
    font-size: 1.5rem; /* Adjusted for mobile */
    font-weight: bold;
    margin: 0 1rem 1rem; /* Margins to ensure text doesn't touch the sides */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#sub-download-title {
    color: #ffffff;
    text-align: center;
    font-size: 1rem;
    margin: 0 1rem 2rem; /* Margins to ensure text doesn't touch the sides */
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.store-button img {
    width: 80%; /* Full width for larger buttons */
    margin: 0.5rem auto; /* Centering and spacing for the buttons */
    display: block; /* Allows margin auto to center the element */
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

/* Hover effect for buttons */
.store-button:hover img {
    transform: translateY(-5px) scale(1.03); /* Lift and slightly scale the button */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); /* More pronounced shadow on hover */
}

#play-button {
    font-size: 1rem;
    padding: 0.8rem 1.6rem;
    color: white;
    background-color: rgba(0, 0, 139, 0.7);
    border: none;
    border-radius: 30px;
    margin-top: 2rem; /* Space from the download buttons */
    transition: background-color 0.3s, transform 0.3s;
    text-transform: uppercase;
    font-weight: bold;
    width: auto; /* Auto width to fit content */
}

#play-button:hover {
    background-color: rgba(0, 0, 139, 0.8); /* Darken on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}

.modal {
    /* Modal styles remain unchanged */
}

/* Ensure the modal video covers the entire viewport without scrolling */
.modal video {
    position: fixed; /* Changed from absolute to fixed */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    z-index: 1000; /* Make sure it's above other content */
}

/* Responsive styles for modal video */
@media (min-width: 1024px) {
    .modal video {
        width: auto;
        height: 80vh; /* Fixed height for large screens */
    }
}

@media (max-width: 1023px) {
    .modal video {
        width: 100%; /* Full width for small screens */
        height: auto;
    }
}

.store-button {
    margin: 20px auto; /* Adds vertical space and centers horizontally */
    display: block; /* Ensures margins are applied correctly */
}

.store-button img {
    width: 200px; /* Adjust this value as needed */
    height: auto; /* Keep the aspect ratio intact */
    display: block; /* Allows margin auto to center the element */
    margin: auto; /* Center the button images */
}