How to make each card flip on its own. Also, how to stay flipped until user wants to try again.

<title>Card Game
    
    
    h1 {
      margin: 75px;
      text-align: center;
    }
    
    .flip-card {
      background-color: transparent;
      width: 300px;
      height: 300px;
      perspective: 1000px;
    }
    
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
    
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
      transition: all 1s ease;
      border-color: #004E89;
    }
    
    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    
    .flip-card-front {
      background-color: orange;
      color: black;
      font-size: 30px;
      margin-top: 50p%;
      position: fixed;
      text-align: center;
    }
    
    .flip-card-back {
      background-color: #2980b9;
      color: white;
      transform: rotateY(180deg);
    }
    
    #second-card {
      position: relative;
      text-align: center;
      top: 65px;
    }
    
    .flip-card2 {
      background-color: transparent;
      width: 300px;
      height: 300px;
      perspective: 1000px;
    }
    
    .flip-card-inner2 {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
    
    .flip-card2:hover .flip-card-inner2 {
      transform: rotateY(180deg);
      transition: all 1s ease;
    }
    
    .flip-card-front2, .flip-card-back2 {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    
    .flip-card-front2 {
      background-color: orange;
      color: black;
      font-size: 30px;
      margin-top: 50p%;
      position: fixed;
      text-align: center;
    }
    
    .flip-card-back2 {
      background-color: #2980b9;
      color: white;
      transform: rotateY(180deg);
    }


    

    
    
        <h1>Do you want to play?</h1>
        <div class="flip-card">
           <div class="flip-card-inner">
           <div class="flip-card-front">
          <h2>Penguino</h2>
        </div>
        <div class="flip-card-back">
           
       <div>
         <div id="second-card">
         <div class="flip-card2">
           <div class="flip-card-inner2">
           <div class="flip-card-front2">
          <h2>Leon</h2>
        </div>
      
    </div></div></div></div></div></div></div>