main > * {
    border: 1px solid black;
}
main {
    display: grid;
        grid-template-areas:
        "heading heading heading heading"
        "hero hero hero hero"
        "art art2 art3 art4"
        "footer footer footer footer";
        
    /* sets up the size of the rows */
    grid-template-rows: auto 300px auto auto;
    
    /* sets up the size of the columns */
    grid-template-columns: auto auto auto;

    margin-left: 10%;
    margin-right: 10%;
}
h1 {
    grid-area: heading;
    text-align: center;
    padding: 50px;
    margin: 0;
    font-family: "Isometra", serif;
    font-weight: 400;
    font-style: normal;
    color: rgba(0, 0, 0, 0.5);
}
#image {
    grid-area: hero;
    text-align: center;
    margin: 0;
    height: 100%;
    width: 100%;
}
#P1 {
    grid-area: art;
    text-align: center;
    margin: 0;
    padding-bottom: 200px;
}
#P2 {
    grid-area: art2;
    text-align: center;
    margin: 0;
}
#P3 {
    grid-area: art3;
    text-align: center;
    margin: 0;
}
#P4 {
    grid-area: art4;
    text-align: center;
    margin: 0;
}
#footer {
    grid-area: footer;
    text-align: center;
    margin: 0;
    padding: 50px;
    font-family: 'Wingdings', sans-serif;
    color: rgba(0, 0, 0, 0.5);
}
p{
    font-family: 'Wingdings', sans-serif;
    color: rgba(0, 0, 0, 0.5);
}
body { background-image: url("images/Kaboom.png");
        background-repeat: no-repeat;
        background-position: center center; 
        background-size: contain; 
        background-attachment: fixed; 

}
img{
    opacity: 0.5;
}