/*-----------------ANIMACION DE LA CARTA EFECTO SOLID-----------------*/
@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height:40px;
  --card-width: 1600px;
}

.card {
  position: relative;
  background: transparent;
  border-radius: 20px;
  padding: 20px;
  z-index: 0;
}

.card::after {
  position: absolute;
  content: "";
  inset: 0;
  padding: 1px; /* grosor del borde */
  border-radius: inherit;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
              #F42B61, #9fa8da, #ba9fda, transparent 60%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}


@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}
/*-----------------ANIMACION DE LA CARTA EFECTO BANISHED-----------------*/


.card-banished {
  background: black;
  position: relative;
  justify-content: center;
  align-items: center;
  color: rgb(88 199 250 / 0%);
}

.card-banished:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
.card-banished:hover:before, .card-banished:hover:after {
  animation: none;
  opacity: 0;
}


.card-banished::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  /*transform: scale(0.8);*/
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
    var(--rotate)
    , #F42B61FF, #d2c2e3, #9fa8da, #ba9fda, #F42B61FF);
    opacity: 1;
  transition: opacity .5s;
}

/*-----------------ANIMACION ORIGINAL DE LA CARTA-----------------*/

@property --rotate {
	syntax: "<angle>";
	initial-value: 132deg;
	inherits: false;
  }

  :root {
	--card-original-height: 65vh;
	--card-original-width: calc(var(--card-height) / 1.5);
  }



  .card-original {
	background: #191c29;
	width: var(--card-original-width);
	height: var(--card-original-height);
	padding: 3px;
	position: relative;
	border-radius: 6px;
	justify-content: center;
	align-items: center;
	text-align: center;
	display: flex;
	font-size: 1.5em;
	color: rgb(88 199 250 / 0%);
	cursor: pointer;
	font-family: cursive;
	font-weight: 540;
  }

  .card-original:hover {
	color: rgb(88 199 250 / 100%);
	transition: color 1s;
  }
  .card-original:hover:before, .card-original:hover:after {
	animation: none;
	opacity: 0;
  }


  .card-original::before {
	content: "";
	width: 104%;
	height: 102%;
	border-radius: 8px;
	background-image: linear-gradient(
	  var(--rotate)
	  , #F42B61FF, #d2c2e3, #9fa8da, #ba9fda, #F42B61FF);
	  position: absolute;
	  z-index: -1;
	  top: -1%;
	  left: -2%;
	  animation: spin 2.5s linear infinite;
  }

  .card-original::after {
	position: absolute;
	content: "";
	top: calc(var(--card-original-height) / 6);
	left: 0;
	right: 0;
	z-index: -1;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	transform: scale(0.8);
	filter: blur(calc(var(--card-original-height) / 6));
	background-image: linear-gradient(
	  var(--rotate)
	  , #F42B61FF, #d2c2e3, #9fa8da, #ba9fda, #F42B61FF);
	  opacity: 1;
	transition: opacity .5s;
	animation: spin 2.5s linear infinite;
  }

  @keyframes spin {
	0% {
	  --rotate: 0deg;
	}
	100% {
	  --rotate: 360deg;
	}
  }