:root{
    --main-radius: 5px;
  --main-padding: 5px;
}

body {
background-image: url("https://assets.codepen.io/13917157/POSS_BG_DARK.png");
		background-repeat: repeat; 
   
}

.container {
	display:grid;
height: auto;
horizontally 
  align-items: center; /* centers items vertically */
	grid-template-columns: 375px 375px 375px ;
	grid-template-rows: 200px 100px 140px 670px 670px 670px 100px 263px;
  grid-gap: 0.3cm;
    font-family: "Gill Sans", sans-serif;
  font-weight: 800;
  font-size:12px;
 
  color: @004d40;
  text-align:center;
  grid-template-areas:
    "header header header"
    "menu menu menu"
    "a_chapter a_chapter a_chapter"
    "content1 content2 content3"
 "content4 content5 content6"
    "content7 content8 content9"
    "DL DL DL"
    "footer footer footer"
}


header{ 
    background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/TSWlogo2.png");
background-repeat: no-repeat;
 border: 4px solid #c1c2c7;
      grid-area: header;
  border-radius:var(--main-radius);
   padding-top: 0.5cm;
}
#menu{   background: #F3F4F9;
  background-image: url("https://assets.codepen.io/13917157/StoneWash_7-225.png");
 border: 5px solid #919297;
      grid-area: menu;
	    padding-top: 0.2cm;
  	padding-bottom: 0.2cm;
  border-radius:var(--main-radius);

}

#a_chapter{ 
  background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
  grid-area: a_chapter;
  padding-top: 0.2cm;
  	padding-bottom: 0.2cm;
   padding-top: var(--main-padding);
}

#content1{ 
  background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
  grid-area: content1;
  border-radius:var(--main-radius);
   padding-top: var(--main-padding);
}
         
#content2{ 
  background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
  grid-area: content2;
  border-radius:var(--main-radius);
   padding-top: var(--main-padding);
}
  #content3{ background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
     grid-area: content3;
      border-radius:var(--main-radius);
   padding-top: var(--main-padding);
}


#content4{ 
  background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
  grid-area: content4;
  border-radius:var(--main-radius);
   padding-top: var(--main-padding);
}
         
#content5{ 
  background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
  grid-area: content5;
  border-radius:var(--main-radius);
   padding-top: var(--main-padding);
}

#content6{ 
  background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
  grid-area: content6;
  border-radius:var(--main-radius);
   padding-top: var(--main-padding);
}

#content7{ 
  background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
  grid-area: content7;
  border-radius:var(--main-radius);
   padding-top: var(--main-padding);
}
         
#content8{ 
  background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
  grid-area: content8;
  border-radius:var(--main-radius);
   padding-top: var(--main-padding);
}

#content9{ 
  background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
  grid-area: content9;
  border-radius:var(--main-radius);
   padding-top: var(--main-padding);
}



#DL{ 
  background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
  grid-area: DL;
  border-radius:var(--main-radius);
   padding-top: var(--main-padding);
}


footer{background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/FOOTER2b.png");
background-repeat: no-repeat;
 border: 4px solid #c1c2c7;
      grid-area: footer;
  border-radius:var(--main-radius);
   padding-top: 0.5cm;
}
   

@media only screen and (max-width:1000px){
  .container{
    grid-template-columns: 375px;
  
grid-template-rows: 200px 275px 270px 670px 670px 670px 670px 670px 670px 670px 670px 670px 240px 263px;
      grid-gap: 0.2cm;
    grid-template-areas:
      "header"
      "menu"
      "a_chapter"
      "content1"
      "content2"
      "content3"
    "content4"
      "content5"
      "content6"
      "content7"
      "content8"
      "content9"
     "DL"
      "footer";
  }
}