@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo+Play:wght@200&display=swap');




.color-nav{
    background-image: radial-gradient(circle at 110.4% 28.02%, #ff6cff 0, #aa57ff 25%, #3c3cf2 50%, #0022b0 75%, #000977 100%);
    font-family: 'Cairo Play', cursive;
}

/*--------------------------------------*/
/*CARTAS*/
/*--------------------------------------*/

.card-image:hover img{
    transform: scale(1.2);
    transition-duration: .8;
    filter: grayscale(90%);


}

.card-image{
    overflow:hidden
    
}

.card:hover{
    box-shadow: 21px 27px 9px -11px rgba(0,0,0,0.58);
    cursor: pointer;
}

.card-content{
    height: 15vh;
    color: black;
    overflow: hidden;
    display: inline-block;
}


/*-------------------------------------------*/
/*LOADER*/
/*-------------------------------------------*/

.contenedor{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    animation: rotate 1s infinite;
    height: 50px;
    width: 50px;
  }
  .loader:before,
  .loader:after {
    content: "";
    display: block;
    height: 20px;
    width: 20px;
  }
  .loader:before {
    animation: box1 1s infinite;
    background-color: #00172b;
    box-shadow: 30px 0 0 #025d95;
    margin-bottom: 10px;
  }
  .loader:after {
    animation: box2 1s infinite;
    background-color: #025d95;
    box-shadow: 30px 0 0 #00172b;
  }

  @keyframes rotate {
    0% { transform: rotate(0deg) scale(0.8) }
    50% { transform: rotate(360deg) scale(1.2) }
    100% { transform: rotate(720deg) scale(0.8) }
  }

  @keyframes box1 {
    0% {
      box-shadow: 30px 0 0 #ffff00;
    }
    50% {
      box-shadow: 0 0 0 #ffff00;
      margin-bottom: 0;
      transform: translate(15px, 15px);
    }
    100% {
      box-shadow: 30px 0 0 #ffff00;
      margin-bottom: 10px;
    }
  }

  @keyframes box2 {
    0% {
      box-shadow: 30px 0 0 #ff8000;
    }
    50% {
      box-shadow: 0 0 0 #ff8000;
      margin-top: -20px;
      transform: translate(15px, 15px);
    }
    100% {
      box-shadow: 30px 0 0 #ff8000;
      margin-top: 0;
    }
  }
    
.esconder{
  display: none;
}