@charset "utf-8";

body{
 padding: 0;   
 margin:0;    
}
  
	.BOX	{
		text-align:center;
        display: flex;
        flex-direction:column;
        gap: 0px;
		padding: 0px;
		margin: 0px;
		height: auto;
		width: 100%;
		background-color:#f1ebe7;
	    font-family: 'arial';
		
		}

		.nav-logo {
			height: 40px;  /* Höhe des Logos, anpassbar nach Bedarf */
			margin-right: 40px; /* Abstand zwischen Logo und den Navigationslinks */
			margin-top: 9px; /* Vergrößert den oberen Rand, um das Logo nach unten zu bewegen */
			align-self: center; /* Vertikale Zentrierung innerhalb der Flex-Container */
		}
		
		.MainNav {
			display: flex;
			align-items: center; /* Zentriert die Elemente vertikal */
			justify-content: center; /* Startet die Inhalte am Anfang der Navigationsleiste */
			height: 50px;                                            
			width: 100%;                                            
			background-color: #FF813F;
			border-bottom: solid 2px black;
			border-top: solid 2px black;
			padding-left: 20px; /* Fügt ein Padding auf der linken Seite hinzu, für Abstand vom Bildschirmrand */
		}
		
		.NavLevel1, .NavLevel2 a { /* Formatierung aller Texte */
			display: grid;
			z-index: 999;
			text-decoration: none;
			color: #000000;
			font-size: 25px;
			text-align: center;
			font-family: "arial";
			font-weight: bold;
		}
		
		.NavLevel1 { /* Stil für die erste Ebene */
			display: flex;
			text-align: center;
			justify-content: center;
			padding: 10px 20px; /* Raum um den Text */
			z-index: 999;
			background-color: transparent;
			justify-content: center;
		}
		
		.NavLevel1 a {
			text-decoration: none; 
			color: #000000;
		}
		
		/* Ändern des Hintergrunds, wenn der Mauszeiger über ein Element schwebt */
		.NavLevel1:hover {
			background-color: #cacbcb;
			cursor: pointer;
		}
		
		.NavLevel1 a:visited {
			color: #000000;
			text-decoration: none;
		}
		
		/* Stil für die zweite Ebene */
		.NavLevel2 {
			display: none;											
			position: absolute;										 
			height: auto;
			width: 223px;
			background-color: #FF813F;
			text-align: center;
			z-index: 999;
			top: 52px; /* Platzierung 100px unterhalb der Nav-Leiste */
		}
		
		.NavLevel2 a {
			display: grid;
			line-height: 2.5;
			border-left: solid 2px black;
			border-right: solid 2px black;
			border-bottom: solid 2px black;
		}
		
		/* Ändern des Hintergrunds der zweiten Ebene beim Hovern */
		.NavLevel2 a:hover {
			background-color: #cacbcb;
			z-index: 999;  
		}
		
		.NavLevel1:hover > .NavLevel2 {                                    
			display: block;                                            
		}
			
		.FOOTER {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50px;
			background-color: #FF813F;
			padding-left: 0;
			font-family: 'arial';
			border-top: solid 2px black;
			border-bottom: solid 2px black;
			z-index: 999; /* Stelle sicher, dass der Footer über anderen Inhalten liegt */
		}		
		  
		  .FOOTER ul 
		{
			display: flex;
			justify-content: space-between;
			align-items:center;
			width: 80%;
			margin: 0 auto;
		}
		  
		  
		.FOOTER ul li 
		{
			display: inline-block;
			align-self:end ;
			padding:10px;
			margin: auto;
			justify-content:space-between;
		}
		  
		.FOOTER ul li a {
			font-family: 'arial';
			color: #000000;
			text-decoration:none;
				
			display:block;
			padding: 10px;
				  
		}

		@keyframes fahrenderBagger {
			0% {
				transform: translateX(-920%); /* Startet außerhalb des Bildschirms links */
			}
			100% {
				transform: translateX(920%); /* Bewegt sich bis außerhalb des Bildschirms rechts */
			}
		}
		
		.bagger-animation {
			position: absolute;
			bottom: 50px; /* Reduzierter Abstand vom unteren Rand des Footers */
			width: 70px; /* Breite des Baggerbildes */
			animation: fahrenderBagger 30s linear infinite; /* Dauer, Art und Wiederholung der Animation */
		}
		
		@media (max-width: 768px) {
			.bagger-animation {
				width: 50px; /* Kleinere Breite für kleinere Bildschirme */
			}
		}

.MAIN 
{
  width: 80%;
  color: #59351f;
  background-color: #e8ded4;
  margin: 50px auto;
  /*font-family: 'arial';
  font-size: 24px; 
  border-radius: 15px; */
  text-align: left; 
  padding-left: 35px;
  padding-right: 40px;
  height: auto;
	
}

.memory-game {
    width: 640px;
    height: 640px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    perspective: 1000px;
  }
  
  .memory-card {
    width: calc(25% - 10px);
    height: calc(33.333% - 10px);
    margin: 5px;
    position: relative;
    transform: scale(1);
    transform-style: preserve-3d;
    transition: transform .5s;
    box-shadow: 1px 1px 1px rgba(0,0,0,.3);
  }
  
  .memory-card:active {
    transform: scale(0.97);
    transition: transform .2s;
  }
  
  .memory-card.flip { 
    transform: rotateY(180deg);
  }
  
  .front-face,
  .back-face {
    width: 100%;
    height: 100%;
 
    position: absolute;
    border-radius: 5px;
    background: #f1ebe7;
    backface-visibility: hidden;
  }
  
  .front-face {
    transform: rotateY(180deg);
  }

  .timer-container {
    text-align: center;
    font-size: 20px;
    font-family: 'Arial', sans-serif;
    margin-top: 20px;
	}

	h2 {
		margin-bottom: 10px;
	}

	.score-container {
		display: none;
		text-align: center; 
		margin-top: 20px;
		font-family: 'Arial', sans-serif;
		font-size: 20px;
		
}



.FOOTER    
  {
	display: flex;
    height: 50px;
    width: 100%;
    background-color: #FF813F;
    padding-left: 0;
		font-family: 'arial';
		justify-content:space-between;
	 	text-align:center;
   	align-items:center;
	  border-top: solid 2px black;
		border-bottom: solid 2px black;
  }		

.FOOTER ul 
  {
  	display: flex;
    justify-content: space-between;
    align-items:center;
    width: 80%;
    margin: 0 auto;
	}


	.FOOTER ul li {
 		display: inline-block;
		align-self:end ;
		padding:10px;
		margin: auto;
		justify-content:space-between;
	}

	.FOOTER ul li a {
		font-family: 'arial';
		color: #000000;
  		text-decoration:none;
      
 		display:block;
  		padding: 10px;
		
		}

.popup-container {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	}
		  
.popup-content {
	background-color: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	text-align: center;
	}
		  
.popup-content h2 {
	color: #000000;
}
		  
.popup-content button {
	padding: 10px 20px;
	font-size: 16px;
	color: white;
	background-color: #FF813F;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	}
		  
.popup-content button:hover {
	background-color: #e57235;
}