html {
	height: 100%;
}

body {
	height: 100%;
	display: flex;
	flex-direction: column;
	
	margin: 0 auto;
	padding: 0px;
	border: 0px;
	background-position: left top;
	font-family: Helvetica, Arial, Verdana, Sans-Serif;
	font-size: 0.8em;
	line-height: 1.5em;
	letter-spacing:0.00em;
	color: #000000;
	background-color: #ffffff;
	background-image:url('../images/background04.jpg');
	background-repeat: repeat-x;
}

a:link { color:#000000; }
a:visited { color:#000000; }
a:hover { color:#0000c0; }

#masthead {
	width: 950px;
	margin: 0px auto;
	padding: 0px;
	border: 0px;
	/* 
	margin: 0px 0px 0px 0px;
	position:relative;
	overflow: auto;
	*/
}

#masthead img {
	max-width: 100%;
	height: auto; 	
	border-bottom: 0px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	float: left;
}

#footer {
	width: 100%;
	margin: 0px auto;
	background-color: #707000;
	background-repeat: repeat-y;
	background-attachment: scroll;
	border-right-color: #FFFFFF;
	border-right-style: solid;
	border-right-width: 0px;
	color: #ffffff;
}

#footer div{
	width: 950px;
	margin: 0px auto;
}

#footer p{
	margin-left: 0px;
	margin-top: 10px;
	text-align: left;
}

#page_content {
  flex: 1; /* this makes it fill the rest of the page and thus makes the footer stick to the bottom */
	width: 950px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	text-align:left;
	border: 0px;
	background-position: top;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
#page_content h1{
	font-size: small;
	text-align: left;
	padding-left: 0px;
	padding-bottom: 5px;
	margin-bottom: 10px;
}
#page_content h2{
	font-size: medium;
	padding-left: 0px;
}
#page_content h3{
	font-size: small;
	padding-left: 0px;
	font-weight: bold;
}
#page_content p{
}

.projects-container{
	display: grid; 
	grid-template-columns: repeat(auto-fill, 20% 20% 20% 20% 20%); 
 	/* 
	grid-template-rows: 25% 25% 25% 25%;
	grid-template-columns: 20% 20% 20% 20% 20%; 
	*/
}

.project-tile{
	width: 180px;
	height: 135px;
	max-width: 100%;
	max-height:100%;
	position: relative;
	background-color: #909090;
	margin: 5px;
}

.project-tile img{
	margin: 0;
	max-height: 100%;
	max-width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	filter: grayscale(100%);
	transition: transform 500ms;
	/*
	object-fit: cover;
	object-position: center;
	height: auto;
	width: auto;
	*/
}

.project-tile img:hover{
	z-index: 1;
	border: 1px solid #FFFFFF;
	filter: grayscale(0%);
	transform: translate(-50%, -50%) scale(1.8);
}

.project-tile img:active{
	z-index: 1;
	border: 1px solid #FFFFFF;
	filter: grayscale(0%);
	transform: translate(-50%, -50%) scale(3.6);
}

#title1{
	/* position: absolute; */
	height: 80;
	z-index: 1;
	width: 100%;
	top: 55px;
	color: #000000;
}
#title1 h1{
	text-align: left;
	font-weight: bold;
	font-size: medium;
}
#title2{
	position: absolute;
	z-index: 1;
	width: 100%;
	top: 370px;
	color: #000000;
	text-align: right;
	font-weight: bold;
	font-size: medium;
}
#title2 a:link { 
	/* color: #ffffff;  */
	text-decoration: none;
}
/*
#title2 a:visited { 
	color: #ffffff; 
}
#title2 a:hover {
	color: #000000; 
}
*/

#title3{
	position: absolute;
	z-index: 1;
	width: 50%;
	top: 370px;
	/* color: #ffffff;  */
	text-align: left;
	font-weight: bold;
	font-size: medium;
}
/*
#title3 a:link { 
	color:#ffffff; 
	text-decoration: none;
}
#title3 a:visited { 
	color:#ffffff; 
}
#title3 a:hover { 
	color:#000000; 
}
*/

.columns-container{
	display: flex;
	flex-direction: row;
	gap: 30px;
}

.illustration{
	flex: 1 1 0%;
	max-width: 50%;
}

.illustration img{
	max-width: 100%;
	filter: grayscale(100%);
	transition: filter 1000ms;
}

.illustration img:hover{
	filter: grayscale(0%);
}

.description{
	flex: 1 1 0%;
}

.description p{
	margin: 0;
}

.smallText p{
	font-size: 0.75em;
	line-height: 1.35em;
	text-align: justify;
}

.bigText{
	margin: 0;
	font-size: 1.2em;
	padding-left: 10px;
}

.bigText li{
	margin-left: 0;
	margin-bottom: 5px;
}

.simpleList {
	padding-top:0px;
	padding-left:0; /*0.6em;*/
	margin-top:0px;
	margin-left:0; /*0.6em;*/
	list-style:none;
}

.simpleList li{
}