.grid-container{
  display: grid;
  grid-template-areas:
  'b-1 h-1 h-1 h-1 h-1 h-1 h-1 b-2'
  'b-1 n-1 n-2 n-b n-b n-b n-b b-2'
  'b-1 p-1 p-2 p-2 p-3 p-3 p-4 b-2'
  'b-1 p-5 p-6 p-6 p-7 p-7 p-8 b-2';
  min-height:100vh;
  grid-template-rows:10% 10% 40% 40%;
  grid-template-columns:12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
}

.bd{
border: 5px;
}

.bdl{
border-color: rgb(225, 225, 225);
}

.bdd{
border-color: rgb(40, 40, 40);
}

.txtd{
color: rgb(40, 40, 40);
}

.txtl{
color: rgb(225, 225, 225);
}

.bgd{
background-color: rgb(40, 40, 40);
}

.bgl{
background-color: rgb(225, 225, 225);
}

.bgd2{
background-color: rgb(50, 50, 50);
}

.txtar{
text-align: right;
}

.txtac{
text-align: center;
}

.txtal{
text-align: left;
}

.b1{
grid-area: b-1;
  font-size: 30px;
  padding-top:0px;
}

.h1{
grid-area: h-1;
  font-size: 30px;
  padding-top:0px;
}

.b2{
grid-area: b-2;
  font-size: 30px;
  padding-top:0px;
}

.n1{
grid-area: n-1;
  font-size: 30px;
  padding-top:0px;
  border-bottom: 5px;
  border-top: 5px;
  border-left: 5px;
  border-color: rgb(225, 225, 225);
  border-bottom-color: rgb(225, 225, 225);
  border-top-color: rgb(225, 225, 225);
  border-left-color: rgb(225, 225, 225);
}

.n2{
grid-area: n-2;
  font-size: 30px;
  padding-top:0px;
  border-bottom: 5px;
  border-top: 5px;
  border-bottom-color: rgb(225, 225, 225);
  border-top-color: rgb(225, 225, 225);
}

.nb{
grid-area: n-b;
  font-size: 30px;
  padding-top:0px;
  border-bottom: 5px;
  border-top: 5px;
  border-right: 5px;
  border-bottom-color: rgb(225, 225, 225);
  border-top-color: rgb(225, 225, 225);
  border-right-color: rgb(225, 225, 225);
}

.p1{
grid-area: p-1;
  font-size: 30px;
  padding-top:0px;
}

.p2{
grid-area: p-2;
 font-size: 30px;
 padding-top:0px;
}

.p3{
grid-area: p-3;
  font-size: 30px;
  padding-top:0px;
}
  
.p4{
grid-area: p-4;
  font-size: 30px;
  padding-top:0px;
}

.p5{
grid-area: p-5;
  font-size: 30px;
  padding-top:0px;
}

.p6{
grid-area: p-6;
  font-size: 30px;
  padding-top:0px;
}

.p7{
grid-area: p-7;
  font-size: 30px;
  padding-top:0px;
}

.p8{
grid-area: p-8;
  font-size: 30px;
  padding-top:0px;
}