/* 	Copyright: Xavier ten Hove. */

/*[TODO]*/
/* 
	- Make it mobile friendly.
*/


@media screen and (max-width: 8640px)
{
	.IfScreenResolutionLessThan8640px { display: block; }
	.IfScreenResolutionLessThan1320px { display: none;  }
	.IfScreenResolutionLessThan1035px { display: none;  }
}

@media screen and (max-width: 1320px)
{
	.IfScreenResolutionLessThan8640px { display: none;  }
	.IfScreenResolutionLessThan1320px { display: block; }
	.IfScreenResolutionLessThan1035px { display: none;  }
}

@media screen and (max-width: 1035px)
{
	.IfScreenResolutionLessThan8640px { display: none;  }
	.IfScreenResolutionLessThan1320px { display: none; }
	.IfScreenResolutionLessThan1035px 
	{ 
		display: block;  
		font-size: 75%;
	}
}


body 
{
	color: white;
	font-size: 32px;

	/*font-family: Arial, Helvetica, sans-serif;*/
	font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif;

	background-color: #0C0C0C; 
}
body a
{
	color: purple;
}

hr
{
    height: 1px;
	width: 1225px;

    border: none;
    background-color: white;

	font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif;
}

a
{
	font-weight: bolder;
}

#Red 
{ 
	color: red; 
	font-weight: bolder;
}
#Blue 
{ 
	color: dodgerblue; 
	font-weight: bolder;
}
#Green 
{ 
	color: limegreen; 
	font-weight: bolder;
}

.CenterMe
{
	text-align: center;
}


/* ********************* */
/* Header/Content/Footer */
/* ********************* */

/* Header */
.PageHeader
{
	width: 1000px;
	margin: 0 auto;

	color: white;

	/*font-family: "Times New Roman", Times, serif, Arial;*/
	font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif;
}
.PageHeader h1
{
	text-align: center;
	font-size: 50px;
}
.PageHeader p
{
	text-align: left;
	font-size: 20px;
}
.PageHeader li
{
	font-size: 20px;
}


/* Content */
.ArticleInSpace
{
	width: 60%;
	margin: 0 auto;
	font-size: 20px;
}
.SmallerArticleInSpace
{
	width: 30%;
	margin: 0 auto;
	font-size: 20px;
}

.SectionOfImagesInSpace
{
	text-align: center;
}
.ImgInSpace
{
	border: 2px groove white;
	margin: 5px;
}

.Padding10pxLeft10pxRight
{
	padding-left: 10px;
	padding-right: 10px;
}

.GridOfImages
{
	margin: 0 auto;
	width: 100%;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	grid-gap: 8px;
}
.GridOfImages img
{
	border: 2px groove white;
}



/* Footer */
.PageFooter
{
	position: fixed;
	left: 0;
	bottom: 0;
	
	height: 40px;
	width: 100%;

	text-align: right;
	font-size: 24px;
}
.LeftFooterElement
{
	position: fixed;
	left:   10px;
	bottom: -10px;

	width: 0%;
}
.RightFooterElement
{
	position: fixed;
	left:   -10px;
	bottom: -10px;

	width: 100%;
}