/* ----------------------------------------------------------- */
.button-container 
{
	display: flex;
	justify-content: center; 
	align-items: center;
	height: 5vh; 
}

.steam-button 
{
	display: inline-block;
	
	padding: 0px 0px;
	font-size: 16px;
	font-weight: bold;
	color: white;
	background-color: #1b2838; 
	border: none;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.steam-button img 
{
	max-width: 	300px; 
	height: 	auto; 
	cursor: 	pointer;
	transition:	transform 0.3s ease; 
}			

.steam-button:hover 
{
	background-color: #2a475e;
}

.steam-button img:hover 
{
	transform: scale(1.1);
}
/* ----------------------------------------------------------- */
.anLogo 
{	
    float: 						left;
    width: 						100px;
	height: 					65px;
}
/* ----------------------------------------------------------- */
.anFooter
{
	display: 					inline-block;
    position:		 			fixed;
	z-index:					1;
    left: 						0;
    bottom: 					0;
    width: 						100%;
	height:						40px;
	font-size:					100%;
    background-color: 			black;
	margin:						0;
	padding:					0;
    color: 						#aaaaaa;
    text-align: 				center;
}
/* ----------------------------------------------------------- */
.anDeployHunter
{
    display: 					block;
    margin-left: 				auto;
    margin-right: 				auto;
	margin-top:					0;
	margin-bottom:				0;
	padding:					0 0 0 0;
    width: 						50%;
}
/* ----------------------------------------------------------- */
p.title 
{
    color: 						#ffff00;
	text-shadow:				0px 4px black;
	font-weight: 				bold;
	font-size:					200%;
	text-align:					center;
	text-transform:				uppercase;
}
/* ----------------------------------------------------------- */
p.subtitle
{
    color: 						#ffffff;
	text-shadow:				0px 3px black;
	font-weight: 				bold;
	font-size:					130%;
	text-align: 				center;
	text-transform:				uppercase;
}	
/* ----------------------------------------------------------- */
p.text
{
    color: 						#DDDDDD;
	text-shadow:				0px 2px black;
	font-weight: 				bold;
	font-size:					100%;
	text-align: 				justify;	
	margin-left:				10%;
	margin-right:				10%;
}	
/* ----------------------------------------------------------- */
p.copyright
{
    color: 						#aaaaaa;
	text-shadow:				0px 2px black;
	font-weight: 				normal;
	font-size:					80%;
	text-align: 				center;	
}
/* ----------------------------------------------------------- */
.anTextContainer 
{
	width: 						30%;
	min-width: 					500px;
	margin-left: 				auto; 
	margin-right: 				auto; 
	margin-top:					0;
	margin-bottom:				0;
	padding: 					3px 30px 13px 30px; 
	background:		 			linear-gradient(rgba(0, 0, 0, 0.8), rgba(50, 30, 0, 0.3));
	color: 						#fff; 
	border-radius: 				10px; 
	text-align: 				center;
}
/* ----------------------------------------------------------- */
.anDropdown
{
	position: 					fixed;
	z-index:					3;
}
/* ----------------------------------------------------------- */
.anBar
{
	width:						100%;
	position:					fixed;
	z-index:					1;
	top:						0;
	margin-left: 				15%;
    margin-right:	 			auto;
	width: 						70%;
	background-color:			#000000;
	color:						#ffffff;
}
/* ----------------------------------------------------------- */
.anBar2,.anBar2:hover
{
	margin-left: 				15%;
    margin-right:	 			auto;
	position: 					fixed;
	z-index:					1;
	top:						0;
	width: 						70%;
	background-color:			#000000;
	color:						#ffffff;
}
/* ----------------------------------------------------------- */
.anDummy
{
	display:					block;
	min-height: 				70px;
	max-height:					70px;
	width:						100%;
	margin:						2px;
}
/* ----------------------------------------------------------- */
.anListSpacer 
{
  height: 1.2em;
  list-style: none;
}
/* ----------------------------------------------------------- */
.anSpacer10
{
	display:					block;
	min-height: 				10px;
	max-height:					10px;
	width:						100%;
	margin:						2px;
}
.anSpacer20
{
	display:					block;
	min-height: 				20px;
	max-height:					20px;
	width:						100%;
	margin:						2px;
}
/* ----------------------------------------------------------- */
.anContainer
{
	display: 					inline-block;
	padding:					0;
	width:						70%;
	margin-left:				15%;
	margin-right:				15%;
	margin-top:					5px;
}
/* ----------------------------------------------------------- */
.anBarFont
{
	color:						#CCCCCC;
	font-weight:				normal;
	font-size:					100%;
	text-transform:				uppercase;
	padding-top:				24px!important;
	padding-bottom:				24px!important;
}
/* ----------------------------------------------------------- */
.anItemFont
{
	color:						#000000;
	font-weight:				bold;
	font-size:					100%;
}
/* ----------------------------------------------------------- */
.anStandardFont
{
	font-family: 				"Trebuchet MS", Arial, sans-serif;
	/*color:						#CCCCCC;*/
	color:						red;
	font-weight:				normal;
    font-size: 					20%;
    line-height: 				1.25;
    margin: 					0;
}
/* ----------------------------------------------------------- */
.anScreenyContainer
{
	display: 					inline-block;
	padding:					0;
	height:						auto;
	width:						60%;
	margin-left:				20%;
	margin-right:				20%;
}
/* ----------------------------------------------------------- */
.anRedBorder
{
	border:						5px solid #ff0000;	
}
/* ----------------------------------------------------------- */
.anImage
{
	float:						left;
	margin:						0px auto;
	padding:					0 0 0 0;
	width:						auto;
	max-width:					200px;
	height:						220px;
}
/* ----------------------------------------------------------- */
.anUp150	{	margin-top:			-150px;	}
.anUp125	{	margin-top:			-125px;	}
.anUp100	{	margin-top:			-100px;	}
.anUp80		{	margin-top:			 -80px;	}
.anUp55		{	margin-top:			 -55px;	}
.anUp50		{	margin-top:			 -50px;	}
.anUp40		{	margin-top:			 -40px;	}
.anUp30		{	margin-top:			 -30px;	}
.anUp25		{	margin-top:			 -25px;	}
.anUp15		{	margin-top:			 -15px;	}
.anUp10		{	margin-top:			 -10px;	}
.anUp5		{	margin-top:		   	  -5px;	}
.anUp2		{	margin-top:			  -2px;	}
.anDown10	{	margin-top:			  10px;	}
.anDown20	{	margin-top:			  20px;	}
.anDown40	{	margin-top:			  40px;	}
/* ----------------------------------------------------------- */
.anImageCenter20
{
	display:					block;
	margin-left:				auto;
	margin-right:				auto;
	padding:					0 0 0 0;
	width:						20%;	
	max-width:					200px;
}
.anImageCenter40
{
	display:					block;
	margin-left:				auto;
	margin-right:				auto;
	padding:					0 0 0 0;
	width:						40%;	
	max-width:					400px;
}
.anImageCenter70
{
	display:					block;
	margin-left:				auto;
	margin-right:				auto;
	padding:					0 0 0 0;
	width:						70%;	
	max-width:					700px;
}
.anImageCenter80
{
	display:					block;
	margin-left:				auto;
	margin-right:				auto;
	padding:					0 0 0 0;
	width:						80%;	
	max-width:					800px;
}
.anImageCenter90
{
	display:					block;
	margin-left:				auto;
	margin-right:				auto;
	padding:					0 0 0 0;
	width:						90%;	
	max-width:					1024px;
}
.anImageCenter1200
{
	display:					block;
	margin-left:				auto;
	margin-right:				auto;
	padding:					0 0 0 0;
	width:						100%;	
	max-width:					1170px;
}
.anImageCenter100
{
	display:					block;
	margin-left:				auto;
	margin-right:				auto;
	padding:					0 0 0 0;
	width:						100%;	
	max-width:					1980px;
}
.anGoogle
{
	display:					block;
	margin-left:				auto;
	margin-right:				auto;
	width:						15%;	
	min-width:					200px;
	padding:					0 0 0 0;
}
.anImageCenter
{
	display:					block;
	margin-left:				auto;
	margin-right:				auto;
	padding:					0 0 0 0;
}
.anIsBackground
{
	z-index: 1;
}
.anIsForground
{
	z-index: 2;
}
/* ------------------------------------------------------------ */
/* OVERLAY														*/
/* ------------------------------------------------------------	*/
.anOverlay 
{
	display:					block;
	position: 					relative;
	margin-left:				auto;
	margin-right:				auto;
}
.anOverlayBackdrop, .anOverlayForeground
{
	display:					block;
	position: 					absolute;
	top:						0;
	left:						50%;
	transform: 					translate(-50%,0);
	width:						100%;	
	max-width:					1980px;
	z-index: 					1; 
}
.anOverlayForeground
{
	width: 						100%; 
	height: 					100%;
	z-index: 					2; 
}
/* ------------------------------------------------------------ */
/* BLOCK LEVEL ELEMENTS											*/
/* ------------------------------------------------------------	*/
img
{
	vertical-align:				middle;
}
div
{
	margin: 0;
}
html, body 
{
    height: 					100%; 
    margin: 					0; 
}
.anDefaultText
{
	width: 						40%;
	min-width: 					500px;
	margin-left: 				auto; 
	margin-right: 				auto; 
	margin-top:					0;
	margin-bottom:				0;
	padding: 					30px 60px 13px 60px; 
	background:		 			linear-gradient(rgba(0, 0, 0, 0.8), rgba(50, 30, 0, 0.3));
	color: 						#fff; 
	border-radius: 				10px; 
}
.anDefaultText p 
{
	font-family: 				'anTextFontFace', sans-serif;
	font-size: 					1.2em;
	color: 						#ffffff;	
	margin-left: 				10%; 
	margin-right: 				10%; 
	text-align:					left;
}
.anDefaultText h1
{
	font-family: 				'anTitleFontFace', sans-serif;
	font-size: 					2.0em;
	color: 						#ff9;
	text-align: 				center;
}
.anDefaultText h2
{
	font-family: 				'anTitleFontFace', sans-serif;
	font-size: 					1.5em;
	color: 						#ff9;
	text-align: 				left;
}

/* ----------------------------------------------------------- */
.anScreeny
{
	margin-left:				auto;
	margin-right:				auto;
	padding-left:				3px;
	padding-right:				3px;
	width:						33%;	
	float:						left;
}
/* ------------------------------------------------------------ */
/* TITLE														*/
/* ------------------------------------------------------------	*/
.anTitleBlock
{
	display: 					grid;
	grid-template-columns: 		200px 1fr 200px; 
	grid-template-rows: 		200px;
	justify-content: 			center; 
    align-items: 				center;
	margin-left: 				auto;
	margin-right: 				auto;
	max-width:					1200px;
	min-width:					500px;
	grid-gap: 					0px;
}
.anTitleBlockItem
{
	padding:					0;
	justify-content: 			center; 
}
.anTitleBlockItemLeft
{
	padding:					0;
	position: 					relative;
	left:						106px;
}
.anTitleBlockItemRight
{
	padding:					0;
	position: 					relative;
	right:						116px;
}
.anTitleBlock img 
{
    max-width: 					200px;
	max-height:					200px;
	min-width: 					200px;
	min-height: 				200px;
}
.anTitleBlock h1 
{
	padding:					15px;
	max-height:					80px;
	min-width:					500px;
    margin: 					0;
	background:		 			linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5));
	border-radius: 				20px 20px 20px 20px; 
	text-align: 				center; 
}
/* ------------------------------------------------------------ */
/* LINK BLOCK													*/
/* ------------------------------------------------------------	*/
.anLinkBlock
{
	display: 					flex;
	gap: 						20px;
	justify-content: 			center; 
	align-items: 				center;
}
/* ------------------------------------------------------------ */
/* TEXT AND IMAGE												*/
/* ------------------------------------------------------------	*/
.anTextBox 
{
    max-width: 300px;
    margin: 0 auto;
    padding: 20px;

    text-align: left;

    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #CCCCCC;
    font-size: 18px;
	font-weight: normal;
    line-height: 1.5;


	background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;	
}
.anTextBoxTitle
{
    max-width: 300px;
    margin: 0 auto;
    padding: 5px ;

    text-align: left;

    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #CCCCCC;
    font-size: 20px;
	font-weight: bold;
    line-height: 1.5;
}
.anImageTextBlock 
{
	display: 					grid;
	justify-content: 			center; 
    align-items: 				center;
	grid-template-columns: 		repeat(2,1fr);
	grid-auto-rows: 			456px;
	margin-left: 				30%;
	margin-right: 				30%;
	border-radius: 				20px; 
	grid-gap: 					0px;
	max-width:					1000px;
}
.anImageTextBlock img 
{
	display:					block;
    max-width: 					500px;
	border-radius: 				20px 20px 20px 20px; 
}
.anImageTextBlock p 
{
	align-self: 				start;
	text-align: 				left; 
    max-width: 					500px;	
	padding:					25px;
    margin: 					0;
	background:		 			linear-gradient(rgba(0, 93, 103, 1), rgba(224, 242, 230, 0.5));
	border-radius: 				20px 20px 20px 20px; 
}
.anBlockLeft
{
	background:		 			linear-gradient(rgba(93, 103, 0, 1), rgba(224, 242, 230, 0.2));
    display: 					flex;
    width:						500px;
	height:						456px;
	border-radius: 				20px 20px 20px 20px; 
	margin:						0;
	padding:					0;
}
.anBlockRight
{
	background:		 			linear-gradient(rgba(1, 0, 0, 1), rgba(0,0,0, 0.8));
    display: 					flex;
    width:						500px;
	height:						456px;
	border-radius: 				20px 20px 20px 20px; 
	margin:						0;
	padding:					0;
}
.anImageBlock 
{
	display: 					grid;
	justify-content: 			center; 
    align-items: 				center;
	grid-template-columns: 		repeat(3,1fr);
	grid-auto-rows: 			456px;
	margin-left: 				30%;
	margin-right: 				30%;
}
.anImageBlock img 
{
	display:					block;
    max-width: 					280px;	
}
/* ------------------------------------------------------------ */
/* GALLERY														*/
/* ------------------------------------------------------------	*/
.anGallery 
{
    display: 					grid;
    grid-template-columns: 		repeat(auto-fill, minmax(340px, 1fr)); /* Automatische Spaltenanpassung */
    gap: 						20px;
	place-items: 				center;
	margin-left: 				27%;
	margin-right: 				27%;
}
.anGalleryItem 
{  
    position: 					relative;
    overflow: 					hidden;
	width: 						340px;
}
.anGalleryItem img 
{
    
    height: 					auto;
    display: 					block;
    border-radius: 				10px;
    cursor: 					pointer;
}
/* ------------------------------------------------------------ */
/* MODAL														*/
/* ------------------------------------------------------------	*/
.anModal 
{
	display: 					none; 
	position: 					fixed; 
	z-index: 					1; 
	left: 						0;
	top: 						0;
	width: 						100%; 
	height: 					100%; 
	background-color: 			rgba(0, 0, 0, 0.8); 
}
.anModalContent 
{
	margin: 					auto;
	display: 					block;
	width: 						100%;
	max-width: 					1980px;
}
.anModalClose
{
	position: 					absolute;
	top: 						15px;
	right: 						35px;
	color: 						white;
	font-size: 					40px;
	font-weight: 				bold;
	cursor: 					pointer;
}
/* ------------------------------------------------------------ */
/* TEXT & FONTS													*/
/* ------------------------------------------------------------	*/
@font-face 
{
	font-family: 				anTextFontFace;
	src: 						url('fonts/OpenSans-Semibold.ttf') format('truetype');
	font-weight: 				normal; 
	font-style: 				normal;  
}
@font-face 
{
	font-family: 				anTitleFontFace;
	src: 						url('fonts/Philosopher-Regular.ttf') format('truetype');
	font-weight: 				normal; 
	font-style: 				normal;  
}
.anLeftTitleFont 
{
	font-family: 				'anTitleFontFace', sans-serif;
	font-size: 					2.0em;
	text-align: 				left;
	color: 						#ff9;
}
.anLeftTextFont 
{
	font-family: 				'anTextFontFace', sans-serif;
	font-size: 					1.0em;
	text-align: 				left;
	color: 						#ffffff;	
}
.anTextFont 
{
	font-family: 				'anTextFontFace', sans-serif;
	font-size: 					1.2em;
	color: 						#ffffff;	
}
.anTextFontSpecial
{
	font-family: 				'anTextFontFace', sans-serif;
	font-size: 					1.2em;
	color: 						#55aaff;	
}
.anTitleFont 
{
	font-family: 				'anTitleFontFace', sans-serif;
	font-size: 					2.0em;
	color: 						#ff9;
}
.anSubTitleFont 
{
	font-family: 				'anTitleFontFace', sans-serif;
	font-size: 					1.5em;
	color: 						#ff9;
}
.anTitleFontInBlock
{
	font-family: 				'anTitleFontFace', sans-serif;
	font-size: 					2.0em;
	color: 						#ff9;
	display:					block;
	text-align:					center;
	margin-bottom: 				20px;
}
.anTextFontInBlock
{
	font-family: 				'anTextFontFace', sans-serif;
	font-size: 					1.2em;
	color: 						#ffffff;	
	display:					block;
}
/* ----------------------------------------------------------- */
.anList
{	
	list-style-type: 			square;
    color: 						#BBBBBB;
/*	text-shadow:				0px 2px black;*/
	font-weight: 				bold;
	font-size:					100%;
	margin-left:				10%;
	margin-right:				10%;
	font-family: 				'anTextFontFace', sans-serif;
}
.anMarkedText
{
	color: 						#ffffff; 
	font-weight:				bold;	
	font-style:					italic;
/*	text-shadow:				0px 2px black;*/
	font-family: 				'anTextFontFace', sans-serif;
}
.anHighlightedText
{
	color: 						#ffffff; 
	font-weight:				bold;	
	font-style:					normal;
	font-family: 				'anTextFontFace', sans-serif;
}
/* ----------------------------------------------------------- */
/*@media (hover: none) and all and (orientation:portrait)*/
@media (hover: none) and (orientation:portrait)
{
	.anLogo
	{
		margin-top:				10px;
		margin-bottom:			10px;
		vertical-align:			middle!important;	
	}
	.anBarFont
	{
		font-size:				200%;
	}
	.anItemFont
	{
		font-size:				200%;
	}
	.anBar,.anBar:hover
	{
		margin-left: 			0;
		margin-right:		 	0;
		position: 				fixed;
		width: 					100%;
	}
	.anList
	{
		font-weight: 			bold;
		font-size:				300%;
	}
	.anContainer
	{
		width:					100%;
		margin-left:			0;
		margin-right:			0;
	}
	.anScreenyContainer
	{
		width:					100%;
		margin-left:			0;
		margin-right:			0;
	}
	.anFooter
	{
		font-size:				200%;
	}
	p.title
	{
		font-size:				500%;
		margin-left:			0%;
		margin-right:			0%;
	}
	p.subtitle
	{
		font-size:				400%;
		margin-left:			0%;
		margin-right:			0%;
	}
	p.text
	{
		font-size:				300%;
		font-weight:			bold;
		margin-left:			0%;
		margin-right:			0%;
	}
	p.copyright
	{
		font-size:				120%;
		margin-left:			0%;
		margin-right:			0%;
	}
}	
@media screen and (max-width: 600px)
{
	.anBar, .anBar:hover
	{
		margin-left: 			0;
		margin-right:	 		0;
		position: 				fixed;
		width: 					100%;
	}

	.anImageTextBlock 
	{
        grid-template-columns:	1fr;
    }	
}
@media screen and (max-width: 1000px)
{
	.anImageTextBlock 
	{
        grid-template-columns:	1fr;
    }	
}

.anMainWrapper 
{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.anLeftColumn 
{
  flex: 1;
  min-width: 200px;
  max-width: 200px;
  font-size: 0.9em;
  background-color: #000000;
  opacity: 0.65;
  padding: 10px 15px 55px 15px; 
  border-radius: 18px;
  position: sticky;
  top: 20px;
  height: fit-content;
}

.anRightColumn 
{
  flex: 3;
  min-width: 0;
}

.anRightColumn ul 
{
  list-style-type: none;
  padding-left: 0;
}

.anRightColumn li 
{
  margin-bottom: 8px;
}