/* Main body */
body
{
	margin: 0; 
	min-width: var(--body_min_width);
	background-color: var(--body_background_color);
    font-family: var(--body_font_family);
	color: var(--body_color);
	font-size: var(--body_font_size);
	font-weight: var(--body_font_weight);
}
a{
	text-decoration: none;
}

/* Main body */
/** Block Organization **/
section.container{
	padding: var(--container_padding);
	margin: var(--container_margin);
	border: var(--container_border);
	border-radius: var(--container_radius); 
}
section.container a{
	text-decoration: none;
	color: var(--body_font_color);
}
section.container a:hover{
	color: var(--color_link_hover);
}
section.container table a:hover, section.container p a:hover{
	font-style: italic;
}
div.section_body{
	display: flex;
	overflow: scroll;
	padding-top:1em; padding-bottom: 1em;
}
article.display{
	position: relative;
	display: inline-block;
	margin-left: 1em;
	min-width: 20em; 
	max-width: 20em;
	min-height: 25em;
	border-radius: var(--article_border);
	padding: .5em 1em .5em 1em;
	box-shadow: .2em .2em 1em silver;
	color: gray;
}
article.display:hover{
	box-shadow: 0em .1em 0em gray;	
	color: black;
}
article.display img{
	width: 70%;
	transform: translate(20%, 0);
	border-radius: 1em;
	border: silver solid 3px;
	opacity: .5;
}
article.display:hover img
{
	opacity: 1;
	border: gray solid 3px;
}
div.main_body_picture_display{
	display: flex;
	flex-wrap: wrap;
	background-color: black;
}
article.picture_display{
	display: block;
	width: var(--display_width);
	position: relative;
	opacity: .7;
}
article.picture_display:hover{
	opacity: 1;
}
article.picture_display img{
	width: 100%;
	height: 100%;
}
article.picture_display h2{
	bottom: 2em;
	font-size: var(--legent_font_size);
	left: 2em;
	right: var(--legend_right_pos);
	margin: 0;
	color: white;
	background-color: rgb(0,0,0,1);
	padding: 1em;
	border-radius: 5px;
	position: absolute;
	z-index: 1;
}
article.picture_display > p{
	display: none;
}
table.timeline td.date{
	font-weight: bold;
	position: relative;
	right: 1em;
}
table.timeline td.date:after{
	content: '';
	position: absolute;
 	width: 10px;
  	height: 10px;
  	right:-1.4em;
 	background-color: black;
  	border-radius: 100%;
  	z-index: 20;
}
table.timeline td + td{
	border-left: 1px solid black;
	padding: .25em 0 .25em 1em;
}

table.timeline{
	border-collapse: collapse;
	margin:2em;
}