body{
      background: ;
    }
    .flashCardButtons{
      display: flex;
      flex-wrap: nowrap;
      width: 300px;
      height: 40px;
      margin: auto;
    }
    .flashCardButtons button{
      flex-grow: 1;
    }
    .flashCardButtons button + button{
      margin-left: 2px;
    }

    .cardHolder{
      position: relative;
      transform: translate(-15%, 0%);
      height: 350px;
      width: 300px;
      margin: auto;
    }
    .card{
      position: absolute;
    }
    .card div{
      width: 300px;
      height: 200px;
      padding: 50px;
      text-align: center;
      cursor: pointer;
    }
    .card div.front{
      background: purple;
      color: white;
      border: 2px solid white;
      border-radius: 5px;
      line-height: 180px;
    }
    .card div.back{
      background: white;
      color: purple;
      border: 2px solid purple;
      border-radius: 5px;
      line-height: 20px;
    }
    .card div.front.switched{
      background: white;
      color: purple;
      border: 2px solid purple;
      border-radius: 5px;
      line-height: 20px;
    }
    .card div.back.switched{
      background: purple;
      color: white;
      border: 2px solid white;
      border-radius: 5px;
      line-height: 20px;
    }

   

    /* ANIMATION STYLES */
    .card div.back{
      transform: rotateY(90deg);
          position: absolute;
    }

    .card div.front{
      position: absolute;
    }
  

    .card div.front.animate{
      animation: twirl 0.2s ease-in forwards;
    }

    .card div.back.animate{
      animation: twirl 0.2s 0.2s ease-out forwards reverse;
    }

    .card div.back.animateReverse{
      animation: twirlReverse 0.2s ease-in forwards ;
    }
    .card div.front.animateReverse{
      transform: rotateY(90deg);
      animation: twirlReverse 0.2s 0.2s  ease-out forwards reverse;
    }

    /* Animation styles = switched */
    .card div.back.switched{
      transform: rotateY(90deg);
    }

    .card div.front.switched{
      position: absolute;
    }

    .card div.front.animate.switched{
      animation: twirl 0.2s ease-in forwards;
    }

    .card div.back.animate.switched{
      animation: twirl 0.2s 0.2s ease-out forwards reverse;
    }

    .card div.back.animateReverse.switched{
      animation: twirlReverse 0.2s ease-in forwards ;
    }
    .card div.front.animateReverse.switched{
      transform: rotateY(90deg);
      animation: twirlReverse 0.2s 0.2s  ease-out forwards reverse;
    }

    /* Show / Hide Card styles */
    .hidden{
      display: none;
    }

    

    @keyframes twirl{
      0%{ transform: rotateY(0deg) }
      100%{ transform: rotateY(90deg) }
    }

    @keyframes twirlReverse{
      0%{ 
        transform: rotateY(0deg) 
        }
      100%{ 
        transform: rotateY(90deg) 
        }
    }






    #JustHereToAddSpace{
      
    }