body { 
  margin-left: 25%; 
  margin-right: 5%; 
  margin-top: 1%;
  
  font-family: Verdana, sans-serif; 
   font-size: 100%; 
  color: gray;
}

/* Style for the bibliography container */
.biblio {
  margin-top: 20px;
}

.biblio h1 h2 h3 h4{
  font-size: 18px;
  margin-bottom: 5px;
}

#biblio p {
  margin: 0;
}

#biblio .entry {
  margin-bottom: 10px;
}

#biblio .entry p {
  margin: 5px 0;
}

#biblio .entry a {
  color: #007bff; /* Link color */
}

#biblio .entry a:hover {
  text-decoration: underline;
}

/* colors */
h1, h2, h3, h4 { 
  /* font-size: 1.8em; */
  color: #000066;  /* blue */
/*   color: #006600;   green */
  margin-bottom: 1em;
}

a:link {
  text-decoration: none; 
  color: olive; 
} 
a:hover {color: orange; font-weight: bold}

/* color: #2222AA;} */ /* navy blue */

/* *********************************************************/
/* Menu */
/* *********************************************************/
div.menu {
 position: fixed;
 font-family: "Roboto Slab", serif;
 text-transform: uppercase;
 letter-spacing: 0.075em;
 top: 0em;
 left: 0em;
 bottom: 0em;
 right: auto;
 margin: 0;
 color: #3d4449;
/*  border: 1px, solid, red; */
 width: 20em; 
 background-color:  #e5e8e8 ;
}

/* Don't display heading */
div.menu  h2 {
 display: none;
}

div.menu  li {
 margin-left: -1.5em; 
 padding: 0.3em 1.2em;
 font-family: Arial, sans-serif;
 list-style: none;
 font-size: 150%;
 /* font-weight: bold; */
 color: gray;
 line-height: 1.5; 
 text-align: left; 

}

div.menu li  a:link { 
  text-decoration: none; 
  color: #CC0033; } /* maroon */

div.menu li a:hover { 
  background: white; 
  padding: 10px;
  border-radius: 10px;
  color: #FFCC33; }


div.interests {
  width: 50%;
}
/* *********************************************************/
/* SubMenu */
/* *********************************************************/
div.sub-menu {
 position: fixed;
 /* font-family: "Roboto Slab", serif; */
 text-transform:capitalize;
 letter-spacing: 0.075em;
 top: 24em;
 left: 2em;
 right: auto;
 margin: 0;
 border-radius: 20px;
 background-color:  white ;
/*  border: 1px, solid, red; */
 width: 16em; 
}

/* Don't display heading */
div.sub-menu  h2 {
 display: none;
}

div.sub-menu  li {
 margin-left: -1.5em; 
 padding: 0.3em 1.2em;
 font-family: Arial, sans-serif;
 list-style: none;
 font-size: 110%;
 line-height: 1.5; 
 font-weight: bold;
 text-align: left; 

}

div.sub-menu li  a:link { 
  text-decoration: none; 
  color: #CC0033; } /* maroon */

div.sub-menu li a:hover { 
  /* background: white;  */
  color: #FFCC33; }


div.project_section {
  display: flex;
  width: 100%;
}

div.project_section h2 {
  display: none;
}

.project-container {
  display: flex;
  
}
.p-img {
  width: 100%;
  height: 55%;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0;
}

.p-text {
  padding: 10px;
  color: black;
  font-weight: bold;
}

.project-card {
  float: left;
  width: 25%;
  border: solid 2px lavender;
  /* box-shadow: 2px 2px 2px 2px lavender; */
  border-radius: 10px;
  padding: 0;
  margin-right: 20px;
  background-color: lavender;
}

/* *********************************************************/
/* Announcements */
/* *********************************************************/
div.announcements {
  margin-top: 50px;
  margin-bottom: 50px;
  width: 50%;
  background-color: Lavender; 
 /*background-image: linear-gradient(to right top, #e4e982, #e6db75, #e6cc6b, #e6be62, #e5af5b);*/
 padding: 20px;
 border-radius: 20px;
 box-shadow: 5px 10px 18px #888888;
}

div.announcements h2 {
/*	color: maroon; */
 display: none; 
 
}
 
div.announcement {
 margin-left: 2em; 
 margin-right: 2em;
/*  border:2px solid blue; */
 color: DarkRed; 
/*  font-family: 'Gloria Hallelujah', cursive; */
}

div.announcements ol li a:link { 
  text-decoration: none; 
  color: navy; 
} 

div.announcements ol li a:hover { 
  background: white; 
  color: purple; 
}



/* *********************************************************/
/* Main */
/* *********************************************************/

img {
  /* margin-left: 70%; */
  margin: 10px;
  border-radius: 20px;
  /* height: 400px; */
}

div.main  h2 {
 display: none;
}


div.main  h3 {
  /* color: #CC0033; */
  /* font-family: "Roboto Slab", serif; */
  font-size: 1.75em;
  /* text-transform: uppercase; */
}


/* *********************************************************/
/* Postamble */
/* *********************************************************/
#postamble {
 font-size: 80%;
}

.postamble span[class="source-file-name"] {
  color: green;
}

.postamble span[class="date"] {
  color: brown;
}

div.content {
 margin-left: 15%;
 margin-right: 5%;
 font-size: 150% /*larger*/;
/*  line-height: 1.1; 
 text-align: center; */
}



#bibliography {
display: none;
}

dd {
 margin-bottom: 1em;
}
/* Collapsible lists could be useful for open/close blackboard

http://bernholdtech.blogspot.de/2013/04/very-simple-pure-css-collapsible-list.html 


Also, 

http://www.cssportal.com/css3-preview/showing-and-hiding-content-with-pure-css3.htm

*/