body {
  /* background-color: #b2e9e4;  */
  background-color: white;
  /*font-family: 'Roboto', sans-serif;*/
  font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
  
  display: flex;
  justify-content: center;

 
}

html
{
  font-size: 16px;
}

.header {
  grid-area: header;
  background-color: #f1f1f1;
  padding: 30px;
  text-align: left;
}

a:link {
  text-decoration: none;
  color: #4d5f7a;
}

a:visited {
  text-decoration: none;
  color: #4d5f7a;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}


.sub-header {
  grid-area: sub-header;
  background-color: #adb8c9;
  padding: 5px 30px 5px 30px;
  text-align: left;
}

/* @media screen and (min-width: 500px){ */
  @media screen { 
  .grid-container {
    width: 85%;
    display: grid;
    min-height: 100%;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      'header header header header'
      'sub-header sub-header sub-header sub-header'
      'left subheader subheader right'
      'left middle middle right'
      'footer footer footer footer';
  }



  .left {
    /* margin-left: 20px; */
  }

  .article {
    /* font-size: 1.2em; */
  }

  .article-subscript {
    font-size: 0.6rem;
  }
}

/*mobile*/
@media screen and (max-width: 1100px){
  .grid-container {
    width: 100%;
    display: grid;
    width: 100%;
    min-height: 100%;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
      'header'
      'sub-header'
      'left'
      'middle'
      'right'
      'footer';
  }

  html
{
  font-size: 36px;
}

  .article {
    /* font-size: 2rem;  */
  }

  .article-subscript {
    /* font-size: 2.0em; */
  }
}

.left,
.middle,
.right {
  padding: 10px;
}

.left {
  grid-area: left;
}

.middle {
  grid-area: middle;

}


.middle_left {
  padding: 10px;
  /*width: 300px;*/
  /*border-collapse: collapse; */
  /*border: 1px solid rgb(0, 0, 0); */
  background-color: #f1f1f1;
  margin: 10px;
}

.middle_right {
  padding: 10px;
}

.right {
  grid-area: right;
  margin-right: 20px;
}


.sub_header {
  padding: 5px;
  grid-area: subheader;
  /* font-size: 1em; */
}

.footer {
  grid-area: footer;

  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
/*
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header header header header header header' 
      'left left left left left left' 
      'middle middle middle middle middle middle' 
      'right right right right right right' 
      'footer footer footer footer footer footer';
  }
}
*/


.centered {
  text-align: center;
}

.footerlink {
  font-size: .8rem;
  font-weight: 200;
}

.copyright {
  font-size: .6rem;
  font-weight: 200;
}

/* ------- */




.inset {
  background-color: #f1f1f1;
  border: 10px;
  border-radius: 10px;
}

.article {
  /* padding: 10px 10px 12px 10px; */
  padding: .3rem .3rem .4rem .3rem;

  display: flex;
  flex-direction: column; 
}

.article a:link {
  text-decoration: none;
  color: black;
}

.article a:visited {
  text-decoration: none;
  color: black;
}

.article a:hover {
  text-decoration: underline;
}

.article-separator {
  /*margin-top: 10px;
  margin-bottom: 10px;*/

  margin-left: 30px;
  margin-right: 30px;

  border-bottom: 1px solid #808080;
}

.article-subscript {
  padding-left: 10px;
  padding-top: 4px;
}