main {
    display: grid;
    /* sets up the layout of the grid */
    grid-template-areas:
        "heading heading heading"
        "top10 hero hero"
        "top10 art2 art3"
        "poem poem footer"
        "poem poem bob";
    /* sets up the size of the rows */
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    
    /* sets up the size of the columns */
    grid-template-columns: 1fr 1fr 1fr;

    margin-left: 10%;
    margin-right: 10%;

    column-gap: 0px;
    row-gap: 0px;
}

h1 {
    grid-area: heading;
    text-align: center;
}

#art2 {
    grid-area: art2;
}

#art3 {
    grid-area: art3;
}

footer {
    grid-area: footer;
    text-align: center;
}

main > * {
    border: 1px solid black;
}
p{
    grid-area: poem;
}
#fry{
    grid-area: hero;
}
#fine{
    grid-area: art3;
}
#list{
    grid-area: top10;
}
#cap{
    grid-area: art2;
}
#flag{
    grid-area: footer;
}
#bob{
    grid-area: bob;
}