h1 {
    /* grid-column is a shorthand of grid-column-start and grid-column-end
       the '/' divides where to start and end */
    grid-area: heading;

    text-align: center;
    padding: 50px;
    margin: 0;
}
main > * {
    border: 1px solid black;
}
main {
    display: grid;
        grid-template-areas:
        "heading heading heading"
        "hero1 hero hero"
        "hero1 art2 art3"
        "poem poem footer"
        "poem poem image";
        
    /* 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%;
}
#poem {
    grid-area: poem;
    text-align: center;
    padding: 50px;
}
#image{
    grid-area: image;
    text-align: center;
     width: 100%;
}
#flag{
    grid-area: footer;
    text-align: center;
    width: 100%;
}
#meme{
    grid-area: art3;
    text-align: center;
    padding: 50px;

}
#cords{
    grid-area: art2;
    text-align: center;
}
#list{
    grid-area: hero1;
    text-align: center;
    padding: 50px;
}
#video{
    grid-area: hero;
    text-align: center;
}
p{
    margin: 0;
}
iframe{
    width: 100%;
    height: 100%;
}
img {
    margin: 0;
    height: 100px;
    width: 200px;
}
figure {
    margin: 0;
}