* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

main {
  height: 100%;
  width: 100%;
  background-color: #f4f4f4;
  display: grid;
  gap: 10px;
  padding: 5px;  
  
  grid-template-columns: 450px 280px 250px 400px;
  grid-template-rows: 300px 80px 300px 250px;
  grid-template-areas:  "left-one center-one center-two top-right"
                        "left-two center-one center-two top-right"
                        "left-three center-four center-four bottom-right"
                        "left-four left-four center-five bottom-right";
  
}


#left-one {
    background-image: url(./leftOne.PNG);
    background-size: cover;
    background-color: bisque;
    grid-area: left-one;
    border-radius: 5px;
}

#center-one{
    background-image: url(./centerOne.PNG);
    background-size: cover;
    background-color: blueviolet;
    grid-area: center-one;
    border-radius: 5px;

}

#center-two {
    background-image: url(./centerTwo.PNG);
    background-size: cover;
    background-color: aquamarine;
    grid-area: center-two;
    border-radius: 5px;
}

#top-right{
    background-image: url(./topRight.PNG);
    background-size: cover;
background-color: burlywood;
grid-area: top-right;
border-radius: 5px;
}

#left-two{
    background-image: url(./leftTwo.PNG);
    background-size: cover;
background-color: chocolate;
grid-area: left-two;
border-radius: 5px;
}

#center-four{
    background-image: url(./centerFour.PNG);
    background-size: cover;
background-color: cornflowerblue;
grid-area: center-four;
border-radius: 5px;
}

#bottom-right{
    background-image: url(./bottomRight.PNG);
    background-size: cover;
background-color: crimson;
grid-area: bottom-right;
border-radius: 5px;
}

#left-four{
    background-image: url(./leftFour.PNG);
    background-size: cover;
background-color: yellow;
grid-area: left-four;
border-radius: 5px;
}

#left-three{
    background-image: url(./leftThree.PNG);
    background-size: cover;
background-color: turquoise;
grid-area: left-three;
border-radius: 5px;
}

#center-five{
    background-image: url(./centerFive.PNG);
    background-size: cover;
background-color: yellowgreen;
grid-area: center-five;
border-radius: 5px;
}