html {
    background: black;
    height: 100%;
  }
  
  body {
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
  
  #defaultCanvas0 {
    position: absolute;
    top: 0;
  }
  
  #app {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
  }
  
  #app.stacked .card {
    position: absolute;
    margin: auto;
  }
  
  .card {
    width: 250px;
    height: 444px;
    margin: 0px 5px;
    perspective: 1000px;
  }

  
  .card-inner,
  .card-front {
    width: 100%;
  }
  
  .card-inner {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: all 0.8s;
    transform-style: preserve-3d;
  }
  
  .fade {
    opacity: 0;
    transform: translateY(-200px);
  }
  
  .deck {
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: transform 1.6s, opacity 1s;
  }
  
  .deck-cards {
    width: 250px;
    min-height: 450px;
    position: relative;
  }
  
  .deck-cards img {
    max-width: 250px;
    position: absolute;
    top: 25px;
  }

  @media(max-width: 500px){
    .card {
        width: 200px;
      }

      .deck-cards {
        max-width: 200px;
      }

      .deck-cards img {
        max-width: 200px;
        position: absolute;
        top: 25px;
      }
  }
  
  .deck-cards img:nth-child(1) {
    top: -35px;
  }
  
  .deck-cards img:nth-child(2) {
    top: -15px;
  }
  
  .card-back {
    width: 100%;
    height: 100%;
    background-image: url("img/reverso.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
  }
  
  .card-front,
  .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  .card-img {
    max-width: 100%;
  }
  
  .card-text {
    display: none;
    color: white;
    font-size: 20px;
  }
  
  /* Animaciones */
  #app:not(.stacked):not(.single) .card:hover .card-inner {
    bottom: 50px;
    cursor: pointer;
  }
  
  .flipped {
    transform: rotateY(180deg);
    cursor: pointer;
  }
  
  .rotated {
    transform: rotate(180deg);
  }
  
  /* Board */
  .board {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .spot {
    width: 250px;
    height: 444px;
    border: 1px solid green;
  }
  
  .selected {
    transform: scale(1.5);
  }
  
  .single .card {
    display: none;
  }
  
  .single .selected {
    display: flex;
    flex-direction: column;
  }
  
  .single .selected {
    display: flex;
    flex-direction: row;
    min-width: 400px;
  }
  
  .single .selected .card-inner{
    min-width: 200px;
  }
  
  .single .selected .card-text{
    padding: 3px 12px;
  }

  @media (min-width: 500px) {
    .single .selected {
      min-width: 480px;
    }
  }
  
  @media (min-width: 768px) {
    .single .selected {
      min-width: 740px;
    }
  }

  @media (min-width: 1366px) {
    .single .selected {
      min-width: 800px;
    }
  }
  
  .single .card-text {
    display: block;
  }
  
  .single .card:hover .card-inner {
    bottom: 0;
  }