/*Dieser Abschnitt setzt den Padding und Margin auf 0
für alle Elemente und verwendet die border-box-Box-Modell-Eigenschaft.*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.timer-container {
    text-align: center;
    margin-top: 10px;
}

body{
	margin-left: 5em;
	 max-width: 1200px;
    background-color: #c6e2ff;
}



img{
    width: 100%;
    display: block;
}


.main-container{
	
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 792px;
}


.grid{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}


.card{
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);
    cursor: pointer;
    position: relative;
    background-color: #00008b;
	
}


.card:hover {
  background-color: #070124;
}
/*  Definiert das Styling für die Bilder innerhalb der Karten, einschließlich des Abstands und der Anfangsopazität.*/

.card img{
    padding: 1rem;
    opacity: 0;
}

/* .selected{ ... } und .matched{ ... }: Definieren das Styling für ausgewählte bzw. übereinstimmende Karten im Spiel. */

.selected{
    outline: 3px solid 	#8a2be2;
    outline-offset: -3px;
    border-radius: 8px;
}
.selected img{
    opacity: 1;
}
.matched{
    outline: 3px solid #ff3f34;
}


 
#restart-button, #absenden {
      background-color: #551a8b;
      color: #4df505;
      padding: 15px 15px;
      border: groove;
      border-radius: 15px;
     margin-top: 5em;
	  margin-left:20em;
      cursor: pointer;
	  width: 30%;
	 
      
    }
	  
	.restart-button:hover {
  background-color: #070124;
}
.show-all-button:hover {
  background-color: #070124;
}
h1{
	 border: 14px solid;
	 border-style:inset ;
	 border-color:magenta;
	 text-align: center;
	 font-size:50px;
	 background: linear-gradient(
	 90deg,
	 
	 #023603 10%,
	 #a020f0 20%,
	 #6959cd 30%,
	 #000080 40%,
	 #0000ff 50%,
	 #4876ff 60%,
	 #444502 70%,
	 #87cefa 80%,
	 #333201 90%,
	 #454504 100%
	 );
	background-clip: text;
	-webkit-background-clip: text;
	
	color: transparent;
	
 }
/* Setzt den oberen Seitenabstand des Hauptbereichs auf -3em.*/

main{
	margin-top: -3em;
}

/* header{ ... } und h2{ ... }: Definieren das Styling für den Header und die Überschrift im Spiel.*/

header{
	font-size: 50px;
	color:#100969;
	text-align: center;
	border-color: #100969;
	border-width: 10px;
	border-style: groove ;
	margin-left: 1em;
}

h2{
	font-size:35px;
	text-align: center;
	color: #8b0a50;
	margin-top: 1em;
}

.popup {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: #98f5ff; /* Hintergrundfarbe wie der Body */
}

.popup h1 {
  font-size: 50px; /* Gleiche Schriftgröße wie H1 */
  color: #100969; /* Gleiche Farbe wie H1 */
}


/* popup Einstellungen */

.popup-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .popup-content {
            background-color: #00008b;
            padding: 20px;
            border-radius: 10px;
            position: relative;
			font-size:35px;
			text-align: center;
			color: 	#adff2f;
			
        }

        .close-button {
            position: absolute;
            top: -10px;
            right: -10px;
            cursor: pointer;
        }
		
/* passen das Rasterlayout an kleinere Bildschirmgrößen an, indem sie die Anzahl der Spalten ändern.*/
.popup-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.enlarged-image {
    max-width: 100%;
    height: auto;
}

.close-image-button {
    margin-top: 20px; /* Abstand zum Bild */
    padding: 30px 50px; /* Innenabstand */
    background-color: #fff0f5; /* Hintergrundfarbe */
    color: 	#551a8b; /* Textfarbe */
	font-size: 50px;
	text-align: center;
    border: none; /* Kein Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger ändern bei Hover */
}

.close-image-button:hover {
    background-color: 	#8b8386 /* Dunklere Hintergrundfarbe bei Hover */
}

@media(max-width: 1000px){
    .grid{
        grid-template-columns: repeat(4, 1fr);
    }
}

@media(max-width: 500px){
    .grid{
        grid-template-columns: repeat(3, 1fr);
    }
}
.restart-button {
      background-color: #768cde;
      color: #100661;
      padding: 5px 5px;
      border: groove;
      border-radius: 15px;
      margin-top: 20px;
	  margin-bottom: 20px;
      cursor: pointer;
	  font-size: 20px;
	  width: 30%;
      height: 30%;
    }
	  .show-all-button {

      background-color: #768cde;
      color: #100661;
      padding: 5px 5px;
      border: groove;
	  margin-left: 0;
      border-radius: 15px;
      margin-top: 20px;
	  margin-bottom: 20px;
      cursor: pointer;
	  font-size: 20px;
	  width: 30%;
      height: 30%;
    }
	body{
	margin-left: 0;
	 max-width: 1200px;
    background-color: #c6e2ff;
	}
	main{
	margin-top:0em;
}