body {
    margin:0;
    font-family: 'Roboto', sans-serif;
    background-image: url(images/3240e96f9880f149eca1b253f56582b1.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    display:flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

main {
    display:grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: 
    "header header header header"
    "hero hero hero hero"
    "paragraph1 paragraph2 paragraph3 paragraph4"
    "footer footer footer footer";
    gap:10px;
    width:90%;
    max-width: 1100px;
    background:rgba(255,255,255,0.85);
    padding:20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

header {
    grid-area: header;
    text-align: center;
    font-family: 'Lora',serif;
    font-size: 2rem;
    font-weight: 700;
    color:#c71400;
}

.hero {
    grid-area: hero;
}

.hero img {
    width:100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

.paragraph1 {grid-area: paragraph1;}
.paragraph2 {grid-area: paragraph2;}
.paragraph3 {grid-area: paragraph3;}
.paragraph4 {grid-area: paragraph4;}

.paragraph1, .paragraph2, .paragraph3, .paragraph4 {
    padding:12px;
    background:rgba(255,255,255,0.6);
    border-radius: 8px;
    font-family: 'Roboto',serif;
}

footer {
    grid-area: footer;
    text-align: center;
    font-family: 'Roboto',sans-serif;
    font-style: italic;
    padding:10px;
    border-top:1px solid rgba(0,0,0,0.1)
}