html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scrollbars */
    background-size: cover; /* Cover the entire area */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    /* Use flexbox to center content */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    position: relative; /* Needed for pseudo-element positioning */
}

/* Default background image for larger screens (desktop) */
body {
    background-image: url('/img/main.png');
}

/* Pseudo-element for the dark overlay */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
    z-index: 1; /* Ensure overlay is above background but below text */
}

/* Style for the centered text container */
.centered-text {
    text-align: center;
    color: white; /* Text color */
    z-index: 2; /* Ensure text is above the overlay */
    position: relative; /* Needed to ensure z-index works correctly */
}

/* Style for the general paragraphs (desktop) */
.centered-text p {
    margin: 0;
    font-size: 3em; /* Adjust font size as needed */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Optional text shadow for readability */
}

/* Style for the first paragraph (desktop) */
.centered-text p:first-of-type {
    font-size: 6em; /* Set font size for desktop */
}

/* Style for the link within the paragraph (desktop) */
.centered-text p a {
    color: white; /* Match header color */
    text-decoration: none; /* Remove default underline */
    font-size: 1em; /* Smaller than h1 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Match header text shadow */
}


/* Media query for smaller screens (mobile) - adjust max-width as needed */
@media (max-width: 768px) {
    body {
        background-image: url('/img/mainphone.png');
    }

    /* Style for all paragraphs on mobile */
    .centered-text p {
        font-size: 25px; /* Set a fixed font size for all paragraphs on mobile */
    }

    /* Style for the first paragraph on mobile */
    .centered-text p:first-of-type {
        font-size: 60px; /* Set a slightly larger font size for the first paragraph on mobile */
        margin-bottom: 250px; /* Add gap below the first paragraph */
    }

    /* Style for the link within the paragraph on mobile */
    .centered-text p a {
        color: white; /* Match header color */
        text-decoration: none; /* Remove default underline */
        font-size: 15px; /* Set a fixed font size to match other paragraphs on mobile */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Match header text shadow */
    }
}