/* 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;
    
}

.menu li {
   margin-top: 20px;
}

.content p{
   text-transform: uppercase;
   background-color: #0c87c0;
   color: #EEEEEE;
   margin-left: 100px;
   text-align: center;
   padding: 10px;
   width: 60vw;
   border-radius: 25px;
}

.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;
}

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

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



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

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

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

.personal a:visited {
  color: #0c87c0;
}


div.header h1 {
	margin: 0; 	padding: 10px 0;
}


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: 15px;
	color:#ffffff;

	background: #0c87c0;
   text-align: center;

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

.footer a
{
	color:#ffffff;
}

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;
}

.content .items-body {
   padding: 10px;
   /* margin: 10px; */
   display: grid;
   grid-gap: 10px;
 }
 
 .content .items-body-content {
   padding: 7px;
   padding-right: 0px;
   display: grid;
   grid-template-columns: 10fr 1fr;
   background-color: lightblue;
   font-size: 15px;
   grid-gap: 10px;
   border: 1px solid transparent;
   cursor: pointer;
 }
 
 .content .items-body-content:hover {
   border-radius: 15px;
   border: 1px solid #0c87c0;
 }
 
 .content .items-body-content i {
   align-self: center;
   font-size: 15px;
   color: #0B5AA2;
   font-weight: bold;
   animation: icon 1.5s infinite forwards;
 }
 
 @keyframes icon {
   0%,100%{
     transform: translate(0px);
   }
   50% {
     transform: translate(3px);
   }
 }