.grass{
    background-color:green;
    bottom:0px;
    position: relative;
    height:200px;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
   
    
}

body {
    background-color: azure;
}


h3{
    text-align: center;
}


.container{
    display:flex;
    justify-content: center;
    transform:translate(0,-26.7%);
    margin:0;
}

.box1 {
  height:300px;
      width:300px;
      background-color:lavenderblush;
    margin:0;
}

.box2 {
  height:300px;
      width:300px;
      background-color:mistyrose;
    margin:0;
}

.box3 {
  height:300px;
      width:300px;
      background-color:lightgoldenrodyellow;
    margin:0;
}

.container2{
    display:flex;
    justify-content: center;
    height:200px;
}
.box4 {
  height:300px;
      width:300px;
      background-color:plum;
}

.box5 {
  height:300px;
      width:300px;
      background-color:lightsteelblue;
}

.absolute{
    position:relative; 
    transform:translate(0px,-40%);
    margin:0;

}

.roof{
    position:relative;
     z-index: 1;
    bottom:-460px;
    left:145px;
     
  
}
.medium {
  opacity: 0.5;
}