html {
  font-size: 62.5%; /* trick to make 1rem = 10px */
}

body {
  background-color:#fff;
  margin:0;
  padding:0;
  font-family: Verdana,Arial;
}

.container div {
  outline: 1px solid #eee;
}

.container {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto  auto  auto auto  auto;
  grid-template-areas:
      "box1 box2 box3 box4 box5"
      "box1 box7 box8 box9 box10"
      "box11 box12 box13 box14 box10"
      "box16 box17 box13 box19 box10"
      "box21 box22 box23 box24 box25"
      "box26 box28 box28 box29 box30";            
  min-height: 80vh;
}

/* Naming the Area */



.box01 {
    grid-area:box1;
    background-color: none; 
}

.box02 {
    grid-area:box2;
    background-color: none; 
}

.box03 {
    grid-area:box3;
    background-color: none; 
}

.box04 {
    grid-area:box4;
    background-color: none; 
}

.box05 {
    grid-area:box5;
    background-color: none; 
}


.box06 {
    grid-area:box6;
    background-color: none; 
}

.box07 {
    grid-area:box7;
    background-color: none; 
}

.box08 {
    grid-area:box8;
    background-color: none; 
}

.box09 {
    grid-area:box9;
    background-color: none; 
}

.box10 {
    grid-area:box10;
    background-color: none; 
}


.box11 {
    grid-area:box11;
    background-color: none; 
}

.box12 {
    grid-area:box12;
    background-color: none; 
}

.box13 {
    grid-area:box13;
    background-color: none; 
}

.box14 {
    grid-area:box14;
    background-color: none; 
}

.box15 {
    grid-area:box15
    background-color: none; 
}

.box16 {
    grid-area:box16;
    background-color: none; 
}

.box17 {
    grid-area:box17;
    background-color: none; 
}

.box18 {
    grid-area:box18;
    background-color: none; 
}

.box19 {
    grid-area:box19;
    background-color: none; 
}

box20 {
    grid-area:box20;
    background-color: none; 
}


.box21 {
    grid-area:box21;
    background-color: none; 
}

.box22 {
    grid-area:box22;
    background-color: none; 
}

.box23 {
    grid-area:box23;
    background-color: none; 
}

.box24 {
    grid-area:box24;
    background-color: none; 
}

.box25 {
    grid-area:box25
    background-color: none; 
}

.box26 {
    grid-area:box26;
    background-color: none; 
}

.box27 {
    grid-area:box27;
    background-color: none; 
}

.box28 {
    grid-area:box28;
    background-color: none; 
}

.box29 {
    grid-area:box29;
    background-color: none; 
}

.box30 {
    grid-area:box30;
    background-color: none; 
}





@media (max-width: 1024px){ /* only need for smaller screens */
    .container {
	grid-template-columns: 1fr;
	grid-template-rows: auto minmax(5rem,auto) 1fr minmax(5rem, auto) auto;
	grid-template-areas:
	    "box1"
	    "box2"
	    "box3"
	    "box4"
	    "box5"
	    "box6"
	    "box7"
	    "box8"
	    "box9"
	    "box10"
	    "box11"
	    "box12"
	    "box13"
	    "box14"
	    "box15"
	    "box16"
	    "box17"
	    "box18"
	    "box19"
	    "box20"
	    "box21"
	    "box22"
	    "box23"
	    "box24"
	    "box25"
	    "box26"
	    "box27"
	    "box28"
	    "box29"
	    "box30";	    	   	    
    }
}