* {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

body{
  padding: 3px 3px 3px 3px;

  background-color: #D8DBE2;

  font-family: Monospace;
  font-size: 10pt;
  text-align: center;
}

main {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 7fr;
  grid-template-rows: auto;
  grid-template-areas:  "header header"
                        "nav main";
  grid-gap: 3px 3px;
  justify-items: stretch;
  align-items: stretch;

  width: 65%;

  margin-left: auto;
  margin-right: auto;
  padding: 4px;

  border-width: 2px;
  border-color: #212738;
  border-style: solid;

  background-color: #FFFFFF;

  text-align: left;
}

header {
  grid-area: header;
  text-align: center;
}

header > #encrypt {
  color: white;
}

nav {
  grid-area: nav;
}

nav.content_section_text {
  
}

article {
  grid-area: main;
  
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-auto-flow: row;
}

div.content_section_text {
  margin: 4px;
  padding: 8px;
  
  border-width: 1px;
  border-style: dotted;
  border-color: #000000;
  background-color: #F5F6F7;

  color: #000000;
  font-size: 100%;

  font-style: italic;
}

div.content_section_text a {
  text-decoration: none;
  font-weight: bold;
}

div.content_section_text a:link,
div.content_section_text a:visited,
 div.content_section_text a:active {
  background-color: #DCDFE6;

  color: #000000;
}

div.content_section_text a:hover {
  background-color: #000000;

  color: #DCDFE6;
}

div.section_header {
  margin: 0px 0px 0px 0px;
  padding: 3px 6px 3px 6px;

  background-color: #8E9CB2;

  color: #FFFFFF;
  font-weight: bold;
  font-size: 112%;
  text-align: center;

  border-style: solid;
  border-color: #000000;
  border-width: 1px;
}

div.section_header_red {
  background-color: #CD214F;
}

div.section_header_grey {
  background-color: #9F9386;
}

@media (max-width: 1510px) {
main {
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-auto-flow: row;
  grid-template-areas:  "header"
                        "nav"
                        "main";
  width: auto;
}

}