body{

  
  background: radial-gradient(circle, #B39DDB, #9575CD);
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  h1{
    margin: 0;
  }
  
  div#fullBox{
    display: flex;
      height: 90vh;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }

#contenedorMolino
{
  position: relative;
  margin: 0 auto;
}



.tarjeta
{
  color: rgba(50 , 50, 50, 1);
  background: rgb(255,255,255);
  border:  1px solid ;
  border-radius: 5px;
  width: 80px;
  height: 100px;
  text-align: left;
  padding: 10px;
  position: absolute;
  cursor: pointer;
  font-size: 6px;


  -ms-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;

  overflow: hidden;

  
}
.tarjeta h1{
  font-size: 10px;
}
h1{
  text-align: center;
}

.animar
{
 -webkit-animation-name: animarTarjeta;
 animation-name: animarTarjeta;
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-iteration-count: 1;
 animation-iteration-count:1;
 -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
 animation-fill-mode: forwards;
}



@keyframes animarTarjeta {  
  100%{
    transform: rotate(0deg);
    left: 60%;
    top: 50px;
    transform: scale(2.5);
    z-index: 5 !important;
    position: absolute;
  }

}



#refrescar
{
  position: absolute;
  right: 10px;
  top: 10px;
  height: 26px;
  width: 26px;
  cursor: pointer;
}