:root {
  --glow: #69d1e9;
  --radius: 4.55% / 3.5%;
  --space: 2px;
  --h: 21;
  --s: 70%;
  --l: 50%;
  --angle: 133deg;
  --imgsize: 500px;
  --red: #f80e7b;
  --yel: #eedf10;
  --gre: #21e985;
  --blu: #0dbde9;
  --vio: #c929f1;
  --mx: 50%;
  --my: 50%;
  --tx: 0px;
  --ty: 0px;
  --s: 1;
  --o: 1;
  --rx: 0deg;
  --ry: 0deg;
  --pos: 50% 50%;
  --posx: 50%;
  --posy: 50%;
  --hyp: 0;
  --bars: 24px;
  --bar-color: rgba(255, 255, 255, 0.6);
  --bar-bg: rgb(10, 10, 10);
  --radius: 4.55% / 3.5%;
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Lato;
  background-color: rgb(57, 60, 66);
}

.mainContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 2.5rem;
  margin: 1em;
  font-family: 'Roboto', sans-serif;
  background-color: rgb(255, 178, 62);
  background-image: linear-gradient(268.67deg, rgb(255, 255, 255) 3.43%, rgb(255, 240, 102) 15.69%, rgb(255, 163, 26) 55.54%, rgb(255, 0, 115) 99%);
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-family: 'Roboto', sans-serif;
  color: white;
}


.inputs {
  visibility: visible;
  position: fixed;
  left: 0;
  right: 0px;
  color: azure;
  border: white 1px solid;
  border: 1px solid var(--color-primary);
  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.233), 0 2px 4px rgba(255, 255, 255, 0.556),
    0 4px 8px rgba(255, 255, 255, 0.843), 0 8px 16px rgba(255, 255, 255, 0.03),
    0 16px 32px rgba(255, 255, 255, 0.02), 0 32px 64px rgba(255, 255, 255, 0.02);
  width: 250px;
}

.inputsHeader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mobileShowInputs {
  visibility: hidden;
  position: fixed;
  bottom: 15px;
  background-color: aquamarine;
  border-radius: 100px;
  width: 10rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.hideInputsButton {
  background-color: aquamarine;
  border-radius: 100px;
  width: 10rem;
  height: 3rem;
  border: none;
  margin: auto;
}

.hideInputsButtonWrapper {
  display: none;
}

@media only screen 
  and (max-width: 1000px) {
    .inputs {
      visibility: hidden;
    }

    .mobileShowInputs {
      visibility: visible;
    }

    .inputs.mobileInputs {
      visibility: visible;
      background-color: rgb(65, 65, 65);
      color: azure;
      border-radius: 1rem;
      border: 1px solid var(--color-primary);
      width: 250px;
      z-index: 2;
      width: 100%;
    }

    .hideInputsButtonWrapper {
      display: flex;
      justify-content: center;
    }

    .hide {
      visibility: hidden;
    }
}

.label {
  display: inline-block;
  width: 150px;
  text-align: right;
}

.inputField {
  margin-left: 2rem;
}

.labelInputRow {
  display: flex;
  flex-direction: row;
  margin: 1rem;
}

.cardContainer {
  max-width: min(330px,80vw);
  margin: auto;
}

.explainer {
  color: white;
}

a {
  color: white;

}

.card {
  --radius: 4.55% / 3.5%;
  transform: translateZ(0.1px);
  will-change: transform,visibility;
  transform-style: preserve-3d;
  width: 100%;
  aspect-ratio: .714;
}

.card__front {
  width: 100%;
  height: 100%;
  display: grid;
  grid-area: 1/1;
  border-radius: var(--radius);
  image-rendering: optimizeQuality;
  transform-style: preserve-3d;
  display: grid;
  grid-area: 1/1;
}

.cardImage {
  width: 330px;
  display: grid;
  grid-area: 1/1;
  border-radius: var(--radius);
  image-rendering: optimizeQuality;
  transform-style: preserve-3d;
}

.cardImage img {
  width: 330px;
  display: grid;
  grid-area: 1/1;
}

.textureImage {
  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  background-image: 
  url(https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp);
}

.textureImageTiled {
  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  background-image: 
  url(https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp);
  background-size: 50%;
  background-position: center;
}

.rainbowGradientOne {
  --space: 5%;

  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  background-image: 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));
  background-size: 200% 700%;
  background-position: 0% var(--posy);
}

.rainbowGradientTwo {
  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  background-image: 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%);
  background-size: 300%;
  background-position: var(--posx) var(--posy);
}

.radialGradient {
  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  background-image: 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-size: 200%;
  background-position: var(--posx) var(--posy);
}

.rainbowsCombined {
  --space: 5%;

  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  background-image: 
  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%);
  background-size: 200% 700%, 300%;
  background-blend-mode: hue, hard-light;
  background-position: 0% var(--posy), var(--posx) var(--posy);
}

.allGradientsCombined {
  --space: 5%;

  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  background-image: 
  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-size: 200% 700%, 300%, 200%;
  background-blend-mode: hue, hard-light, exclusion;
  background-position: 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
}

.textureAndAllGradientsCombined {
  --space: 5%;

  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  background-image:
  url(https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp),
  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-size: 50%, 200% 700%, 300%, 200%;
  background-blend-mode: exclusion, hue, hard-light, exclusion;
  background-position: 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
}

.allWithBackgroundPosition {
  --space: 5%;

  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  background-image:
  url(https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp),
  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-size: 50%, 200% 700%, 300%, 200%;
  background-blend-mode: exclusion, hue, hard-light, exclusion;
  background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
}

.allWithFilter {
  --space: 5%;

  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  background-image:
  url(https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp),
  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-size: 50%, 200% 700%, 300%, 200%;
  background-blend-mode: exclusion, hue, hard-light, exclusion;
  background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
  filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2) saturate(1.5);
  -webkit-filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2) saturate(1.5);

}

.allWithColorDodge {
  --space: 5%;
  --angle: 133deg;
  --imgsize: 50%;

  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  mix-blend-mode: color-dodge;
  background-image:
  url(https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp),
  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-size: 50%, 200% 700%, 300%, 200%;
  background-blend-mode: exclusion, hue, hard-light, exclusion;
  background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
  filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2) saturate(1.5);
  -webkit-filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2) saturate(1.5);
}

.cardShine {
  --space: 5%;
  --angle: 133deg;
  --imgsize: 50%;

  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  mix-blend-mode: color-dodge;
  background-image: url(https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp),
  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: exclusion, hue, hard-light;
  background-size: var(--imgsize), 200% 700%, 300%, 200%;
  background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
  filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2) saturate(1.5);
  -webkit-filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2) saturate(1.5);
}

.cardShineAfterOnly {
  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  background-color: red;
  visibility: hidden;
}

.cardShineAfterOnly::after {
  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);

  /* content required in order to display */
  content: " ";
  background-size: var(--imgsize), 200% 400%, 195%, 200%;
  background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy);
  filter: brightness(calc((var(--hyp)*0.5) + .8)) contrast(1.6) saturate(1.4);
  -webkit-filter: brightness(calc((var(--hyp)*0.5) + .8)) contrast(1.6) saturate(1.4);
  mix-blend-mode: exclusion;
  --space: 5%;
  --angle: 133deg;
  --imgsize: 50%;
  background-image: url(https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp), 
  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: exclusion, hue, hard-light, exclusion;
  visibility: visible;
  display: grid;
  grid-area: 1/1;
}

.cardShinePlusAfterElement {
  --space: 5%;
  --angle: 133deg;
  --imgsize: 50%;

  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  mix-blend-mode: color-dodge;
  background-image: url(https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp),
  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: exclusion, hue, hard-light, exclusion;
  background-size: var(--imgsize), 200% 700%, 300%, 200%;
  background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
  filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2) saturate(1.5);
  -webkit-filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2) saturate(1.5);
  display: grid;
  grid-area: 1/1;
  opacity: var(--o);
}

.cardShinePlusAfterElement::after {
  /* content required in order to display */
  content: " ";
  visibility: visible;

  --space: 5%;
  --angle: 133deg;
  --imgsize: 50%;

  width: 330px;
  aspect-ratio: .714;
  border-radius: var(--radius);
  mix-blend-mode: exclusion;
  background-image: url(https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp), 
  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: exclusion, hue, hard-light, exclusion;
  background-size: var(--imgsize), 200% 400%, 195%, 200%;
  background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy);
  filter: brightness(calc((var(--hyp)*0.5) + .8)) contrast(1.6) saturate(1.4);
  -webkit-filter: brightness(calc((var(--hyp)*0.5) + .8)) contrast(1.6) saturate(1.4);
  display: grid;
  grid-area: 1/1;
}

.cardFront {
  width: 330px;
  aspect-ratio: .714;
  display: grid;
  grid-area: 1/1;
}

.cardFront img {
  width: 100%;
  display: grid;
  grid-area: 1/1;
}

.cardFrontSecond {
  width: 330px;
  aspect-ratio: .714;
  display: grid;
  grid-area: 1/1;
}

.cardFrontSecond img{
  margin-top: -15px;
  width: 100%;
  display: grid;
  grid-area: 1/1;
}

/* twitter badge */

.twitter {
  position: fixed;
  display: block;
  right: 12px;
  top: 12px;
}

.twitter svg {
  width: 32px;
  height: 32px;
  fill: rgb(66, 239, 255);
  border: none;
}