:root {
  --cardWidth: 421px;
  --cardHeight: 700px;
}

#card_front_pic {
  width: var(--cardWidth);
  height: var(--cardHeight);
}

html, body {
  height: 100%;
  width: 100%;
  background-color: #F0F1F4;
  overflow: hidden;
}

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

#card {
    
  width: var(--cardWidth);
  height: var(--cardHeight);
  border-radius: 5px;
  transition: .2s;
  transform: perspective(1000px);
  filter: brightness(1);
  box-shadow: 0 0 0 0 rgba(48, 65, 0, 0.5);

  
}

/*

    FOIL ADDS

*/
.card__shine {

	--grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMyI+PC9yZWN0Pgo8L3N2Zz4=");
  
	--space: 6%;
	--angle: 133deg;
	--imgsize: calc(var(--cardHeight) * 2);

	--red: #f80e7b;
	--yel: #eedf10;
	--gre: #21e985;
	--blu: #0dbde9;
	--vio: #c929f1;

  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;

  mix-blend-mode: color-dodge;

	mask-image: url(katta-mask.png);
	mask-size: var(--cardWidth) var(--cardHeight);

}

.card[data-rarity*="foil"] .card__shine,
.card[data-rarity*="foil"] .card__shine:after {

  --space: 5%;
  --angle: 133deg;
  --imgsize: calc(var(--cardHeight) * 2);

  background-image:
    var(--grain),
    repeating-linear-gradient( 0deg, 
      rgb(255, 119, 115) calc(var(--space)*1), 
      rgba(255,237,95,1) calc(var(--space)*2), 
      rgba(168,255,95,1) calc(var(--space)*3), 
      rgba(131,255,247,1) calc(var(--space)*4), 
      rgba(120,148,255,1) calc(var(--space)*5), 
      rgb(216, 117, 255) calc(var(--space)*6), 
      rgb(255, 119, 115) calc(var(--space)*7)
    ),
    repeating-linear-gradient( 
      var(--angle), 
      #0e152e 0%, 
      hsl(180, 10%, 60%) 3.8%, 
      hsl(180, 29%, 66%) 4.5%, 
      hsl(180, 10%, 60%) 5.2%, 
      #0e152e 10% , 
      #0e152e 12% 
      ),
    radial-gradient(
      farthest-corner circle 
      at var(--mx) var(--my),
      rgba(0, 0, 0, .1) 12%,
      rgba(0, 0, 0, .15) 20%,
      rgba(0, 0, 0, .25) 120%
    );

  background-blend-mode: screen, hue, hard-light;
  background-size: var(--imgsize) 100%, 200% 700%, 300% 100%, 200% 100%;
  background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
  
  filter: brightness(.8) contrast(2.95) saturate(.5);

}

.card[data-rarity="foil"] .card__shine:after {

  content: "";

  background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy);
  background-size: var(--imgsize) 100%, 200% 400%, 195% 100%, 200% 100%;

  filter: brightness(1) contrast(2.5) saturate(1.75);
  mix-blend-mode: soft-light;

}