html {
  width: 100%;                    /* 100% width of parent (root) element */
  height: 100vh;                  /* 100% height of viewport */
  background: rgb(0, 0, 0, 0.1);  /* 10% opacity black (very light gray) */
  font-size: 1.0em;               /* our root font size */
}
body {
  margin: 0;                      /* content goes to edge of viewport */
  height: 100vh;                  /* and spans height of viewport */
}

div.count
{
text-align: center;
background-color: #3E8DA8;
color:white;


}
div.container {
  min-height: 25rem;            /* mainbody height never squishes < 25rem */
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns:
    [left] 10rem auto 10rem [right];
  grid-template-rows:
    [top] 5rem auto 5rem [bottom];
  grid-template-areas:
    "head head head"
    "panleft mainbody panright"
    "foot foot foot";
}
div.header {
  background: rgb(0, 0, 0, 0.2);                             /* 20% black */
  grid-area: head;                /* head corresponds to name in template */
  background-color: #3E8DA8;;
  
}
div.footer {
  background: rgb(0, 0, 0, 0.2);
  grid-area: foot;
}
div.panel {                            /* div elements with "panel" class */
  background: rgb(0, 0, 0, 0.1);                             /* 10% black */
}
div.panel.left {                    /* with both "panel" and "left" class */
  grid-area: panleft;
  background-color: green;
  height:100%;
  width: 100%;
}
div.panel.right {
  
  grid-area: panright;
  background-color: blueviolet;
}
div.mainbody {
  grid-area: mainbody;
  width: 60rem;                   /* mainbody width is fixed */ justify-self: center;           /* and always centered in grid area */
  background-color: plum;
  text-align: center;
}
@media screen and (max-width: 50rem) {     /* if viewport width < 50rem */
  div.panel.left {
    grid-column-end: left;            /* left panel stops at left edge */
  }
  div.panel.right {
    grid-column-start: right;         /* right panel starts at right edge */
  }
  div.panel {
    display: none;                    /* neither panel is displayed */
  }
  div.mainbody {
    grid-column-start: left;          /* mainbody starts at left edge */
    grid-column-end: right;           /* mainbody ends at right edge */
  }
}