/* controlling the look of the left-hand menu */

.about {
margin-left:30px;
  text-align:center;
}


.menu {
 float:left; 
/*    height: 88%;  */
 line-height:110%; 
  margin-left:-30px; 
/* border-right:1px solid #004D99; /* solid grey;  */
 padding:1em; 
 width:178px; 
/*   font-family: Helvetica, sans-serif;
   color: #66EEEE; */ 
}

.menu ul {
   list-style-type: none;
}

.menu a {
  font-weight: bold;
  text-decoration: none;
    color:#004D99;
}

.menu a:hover {
  color: #BD1F00;
}

.menu a:visited {
/*    color:grey; */
}



.about a {
  font-weight: bold;
  text-decoration: none;
   color:#003366; 
}

.about a:hover {
  color: #BD1F00;
}

.about a:visited {
/*    color:grey; */
}


.text, .personal {
   margin: 0px 100px 100px 200px;
   position: absolute;
   font-family: Helvetica, sans-serif;
}

.text a {
  color: #800055;
  text-decoration: none;
}

.text a:hover {
  color: #BD1F00;
}

.text a:visited {
  color: #703100;
}
.personal a {
  color: #AA0000;
  text-decoration: none;
}

.personal a:hover {
  color: #EE3300;
}

.personal a:visited {
  color: #880000;
}



div.container
{
width:100%;
/* height: 100%; */
margin:0px;
border:1px solid #004D99; /* solid grey; */
line-height:100%;
}
div.header,div.footer
{
 padding:0.5em; 
color:white;

background-color:#004D99;
/* border:1px solid grey; */
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.content
{
margin-left:180px;
border-left:1px solid #004D99;
padding:1em;
}


div.header, div.footer a {
   color: white;
}

.header, .footer a:hover {
   color: blue;
}
.header, .footer a:visited {
   color: white;
}




.contact {
   text-align: center;
   margin: 25px 0px 0px 400px;
   position: absolute;
   font-family: Helvetica, sans-serif;
}


/* ---- Responsive: stack the sidebar above the content on small screens ---- */
img {
   max-width: 100%;
   height: auto;
}
pre {
   overflow-x: auto;
}
div.container {
   box-sizing: border-box;
}
@media (max-width: 768px) {
   .menu {
      float: none;
      width: auto;
      margin: 0;
      padding: 0.5em 1em;
   }
   .menu ul {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25em 1em;
      margin: 0;
      padding-left: 0;
   }
   .menu > br {
      display: none;
   }
   .about {
      margin: 0.5em 0 0;
      text-align: left;
   }
   div.content {
      margin-left: 0;
      border-left: none;
   }
   .content table {
      display: block;
      max-width: 100%;
      overflow-x: auto;
   }
   .text, .personal, .contact {
      position: static;
      margin: 1em;
   }
   div.header h1, h1.header {
      font-size: 1.4em;
   }
}