/* Fixed background image with slight transparency */
body {
    font-family: 'Rajdhani', sans-serif;
    margin: 0;
    background: url('images/space-background.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* Center the main grid with slight transparency */
main {
    display: grid;
    grid-template-areas: 
        "header header header"
        "image image image"
        "art1 art2 art3"
        "art4 art4 art4"
        "footer footer footer";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 300px auto auto auto;
    row-gap: 30px;
    column-gap: 30px;

    max-width: 1200px;
    margin: 50px auto;  /* Center main */
    padding: 20px;
    background-color: rgba(0,0,0,0.6); /* Slight transparent background */
    border-radius: 10px;
}

/* Header */
h1 {
    grid-area: header;
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    color: #000000;
    margin: 0;
}

/* Image */
img {
    grid-area: image;
    width: 40%;
    min-height: fit-content;
    object-fit: fill;
    display: block;
    margin: 10px 20px;
    border-radius: 4px 40px;
}

/* Articles */
article {
    font-weight: bold;
    font-family: 'Rajdhani', sans-serif;
    color: #000000;
    padding: 10px;
    background-color: rgba(255,255,255,0.05); /* Slight overlay for contrast */
    border-radius: 5px;
}

/* Assign grid areas */
#art1 { grid-area: art1; }
#art2 { grid-area: art2; }
#art3 { grid-area: art3; }
#art4 { grid-area: art4; }

/* Footer */
footer {
    grid-area: footer;
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    text-align: center;
    padding: 15px 0;
    font-weight: bold;
    border-radius: 5px;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    main {
        grid-template-areas:
            "header"
            "image"
            "art1"
            "art2"
            "art3"
            "art4"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}