@import "reset.css";

body{
    background-color: skyblue;

}
main{
    display:grid;
    grid-template-areas:
    'header header header'
    'yoda yoda yoda'
    'section1 section2 section3'
    'section4 section5 section5'
    'section4 section6 section6'
    'section7 section6 section6'
    'footer footer footer';
    background-color: white;
    width: 600px;
  margin-left:auto;
  margin-right:auto;
  border:1px solid black;
}

h1{
    grid-area:header;
    text-align:center;
    font-size: x-large;
    font-family: Arial, Helvetica, sans-serif;
    padding-top:50px;
    padding-bottom:40px;
    border:1px solid black;
}



.section1{
    grid-area:section1;
    border:1px solid black;
    text-align:center;
    width:200px;
    height:150px;
}

.section2{
    grid-area:section2;
    border:1px solid black;
    width:200px;
    height:150px;
    text-align:center;
}

.section3{
    grid-area:section3;
    border:1px solid black;
    width:200px;
    height:150px;
}

.section4{
    grid-area:section4;
    border:1px solid black;
    height:300px;
}

.section5{
    grid-area:section5;
    border:1px solid black;
    height:150px;
    text-align:center;
}

.section6{
    grid-area:section6;
    border:1px solid black;
    height:300px;
    font-size: xx-large;
    text-align:left;
}

.section7{
    grid-area:section7;
    border:1px solid black;
    height:150px;
}

p{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: small;
}

div.poem{
    line-height:1.8;
}

li{
    display:list-item;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: xx-small;
    line-height:2.5;
    margin-left:5%;
}



footer{
    grid-area:footer;
}

main>*{
    background-color: white;
    border:5px black;
}

ol{
    list-style-type:number;
    font-size: medium;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    margin-left:10%;
    margin-top:10%;
}