/*styles.css */

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
  font-family:arial
}

#start-button {
  animation: wiggle 2s linear infinite;
}

@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

#linkSiteStart{
	color:black;
  position: absolute;
  /*left: calc(50%);*/
  top: calc(10% - 2em);
  text-decoration:none;
  text-transform:uppercase;
}


#start-button {
  position: absolute;
  left: calc(50% - 3em);
  top: calc(50% - 2em);
  
  height: 4em;
  width: 7em;
  

  background-color: #ecc4f2; /* Hintergrundfarbe des Buttons */
  color: rgb(255, 255, 255); /* Textfarbe */
  padding: 10px 20px; /* Innenabstand des Buttons */
  border: none; /* Entfernt die Standardtaste */
  cursor: pointer; /* Zeigt die Handcursor-Anzeige beim Überfahren mit der Maus an */
  font-size: 16px; /* Schriftgröße */
  border-radius: 5px; /* Abgerundete Ecken */
}

#start-button:hover {
  background-color: #f55da7; /* Farbe ändern, wenn der Mauszeiger über dem Button ist */
}


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

  
.memory-game {
  width: 640px;
  height: 640px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}



.memory-card {
  width: calc(16.6667% - 10px); /* Ändere die Breite auf 16.6667% für 6 Karten in einer Reihe */
  height: calc(16.6667% - 10px); /* Ändere die Höhe auf 16.6667% für quadratische Karten */
  margin: 5px;
  position: relative;
  transform-style: preserve-3d;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
  transform: scale(1);
  transition: transform .5s;
  backface-visibility: hidden;
}



.memory-game {
    width: 800px;
    height: 800px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    perspective: 1000px;
  }



.front-face,
.back-face {
  width: 100%;
  height: 100%;
  padding: 2px;
  position: absolute;
  border-radius: 5px;
  background: #CBff00;
 backface-visibility: hidden;
}

.front-face {
  transform: rotateY(180deg);
}

.memory-card:active {
  transform: scale(0.97);
  transition: transform .2s;
}

.memory-card.flip {
  transform: rotateY(180deg);
}

/* CSS */
.zoom-in {
  transform: scale(1.2);
  transition: transform 1s; /* Fügen Sie eine Übergangsanimation hinzu */
}

.zoom-out {
  transform: scale(1);
  transition: transform 1s; /* Übergangsanimation für das Verkleinern */
}

#restart-button {
  position: absolute;
  top: 50%; /* Zentriert vertikal */
  left: 70px; /* Abstand vom linken Rand der Seite */
  transform: translate(0, -50%); /* Korrigiert die vertikale Position */
  height: 4em;
  width: 7em;
  background-color: #ecc4f2;
  color: rgb(255, 255, 255);
  padding: 10px 20px;
  border-color: #f55da7;
  border-style: solid;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

#restart-button:hover {
  background-color: #f55da7; /* Farbe ändern, wenn der Mauszeiger über dem Button ist */
}


#timer {
  position: absolute;
  top: 60%; 
  left: 86px; 
  transform: translate(0, -50%); 
  height: 2em;
  width: 5em;
  background-color: #f4f8f5;
  color:#636a66;
  padding: 5px 20px;
  border-color: #CBff00;
  border-style: solid;
  border-width: 3px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 10px;
  animation: mymove 3s infinite;
}

#linkSite{
	color:black;
position: absolute;
  top: calc(10% - 2em);
  left: 70px; /* Abstand vom linken Rand der Seite */
  text-decoration:none;
  text-transform:uppercase;
}


@keyframes mymove {
  50% {border-color: lightblue;}
  50% {border-color: #f55da7;}
}


