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

body {
	/*font: 100% Verdana, Arial, Helvetica, sans-serif; */
	/*background: #666666; */
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
/*	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}


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


.code {

	background: #EEEEEE;
}


.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:#006633;
}


.content h1 {
    color:#006633;
}


.content h2 {
    color:#006633;
}

.content h3 {
    color:#006633;
}



.content a {
  /*//font-weight: bold;*/
  text-decoration: none;
    color:#006633;
}

.content a:hover {
	color:#ffCC33;
}



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

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



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

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

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


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

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

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

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


div.header h1 {
	margin: 0; 	
        padding: 10px 0;
        font-size: 20px
}


div.container
{
width:100%;
/* height: 100%; */
margin:0px;
/*border:1px solid #004D99;  solid grey; */
line-height:100%;
}
div.header,div.footer
{
	font: 100% Verdana, Arial, Helvetica, sans-serif;

	padding: 0 10px 0 20px; 
	color:#ffCC33;

	background: #006633; 

/* border:1px solid grey; */
}

.footer a
{
	color:#ffCC33;
}

h1.header
{
padding:0;
margin:0;
}
div.content
{
/*margin-left:180px;*/
/*border-left:1px solid #006633;*/
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;
   }
}