@import url(https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media(prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}::-webkit-scrollbar{display:none}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:gray;border:1px solid gray;border-radius:20px}::-webkit-scrollbar-thumb:hover{background:#555}.scroller{scrollbar-color:#fff transparent;scrollbar-width:thin}.user-panel{background-clip:content-box,border-box;background-image:linear-gradient(#1a1a1e,#1a1a1e),linear-gradient(90deg,#eb46a6,#e20ff5);background-origin:border-box;cursor:pointer;height:100%;position:fixed;top:0;width:25%}:root{--color1:#00e7ff;--color2:#ff00e7;--back:url(https://cdn2.bulbagarden.net/upload/1/17/Cardback.jpg);--charizard1:#fac;--charizard2:#dca;--charizardfront:url(https://assets.codepen.io/13471/charizard-gx.webp);--pika1:#54a29e;--pika2:#a79d66;--pikafront:url(https://assets.codepen.io/13471/pikachu-gx.webp);--eevee1:#efb2fb;--eevee2:#acc6f8;--eeveefront:url(https://assets.codepen.io/13471/eevee-gx.webp);--mewtwo1:#efb2fb;--mewtwo2:#acc6f8;--mewtwofront:url(https://assets.codepen.io/13471/mewtwo-gx.webp);--prize1:#f8e68a;--prize2:#685625}.card{background-color:#040712;background-image:var(--front);background-position:50% 50%;background-repeat:no-repeat;background-size:cover;border-radius:10px;box-shadow:-5px -5px 5px -5px #00e7ff,5px 5px 5px -5px #ff00e7,-7px -7px 10px -5px transparent,7px 7px 10px -5px transparent,0 0 5px 0 hsla(0,0%,100%,0),0 10px 10px -2px rgba(0,0,0,.5);box-shadow:-5px -5px 5px -5px var(--color1),5px 5px 5px -5px var(--color2),-7px -7px 10px -5px transparent,7px 7px 10px -5px transparent,0 0 5px 0 hsla(0,0%,100%,0),0 10px 10px -2px rgba(0,0,0,.5);height:71.5vw;overflow:hidden;position:relative;touch-action:none;-webkit-transform-origin:center;transform-origin:center;transition:box-shadow .2s ease,-webkit-transform .5s ease;transition:transform .5s ease,box-shadow .2s ease;transition:transform .5s ease,box-shadow .2s ease,-webkit-transform .5s ease;width:71.5vw;will-change:transform,filter;z-index:10}@media screen and (min-width:600px){.card{height:clamp(17vw,61vh,17vw);width:clamp(17vw,61vh,17vw)}}.card:hover{box-shadow:-20px -20px 30px -25px #00e7ff,20px 20px 30px -25px #ff00e7,-7px -7px 10px -5px #00e7ff,7px 7px 10px -5px #ff00e7,0 0 13px 4px hsla(0,0%,100%,.3),0 55px 35px -20px rgba(0,0,0,.5);box-shadow:-20px -20px 30px -25px var(--color1),20px 20px 30px -25px var(--color2),-7px -7px 10px -5px var(--color1),7px 7px 10px -5px var(--color2),0 0 13px 4px hsla(0,0%,100%,.3),0 55px 35px -20px rgba(0,0,0,.5)}.card.charizard{--color1:var(--charizard1);--color2:var(--charizard2);--front:var(--charizardfront)}.card.pika{--color1:var(--pika1);--color2:var(--pika2);--front:var(--pikafront)}.card.mewtwo{--color1:var(--mewtwo1);--color2:var(--mewtwo2);--front:var(--mewtwofront)}.card.eevee{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--eeveefront)}.card.prize{--color1:var(--prize1);--color2:var(--prize2)}.card:after,.card:before{background-repeat:no-repeat;bottom:0;content:"";left:0;mix-blend-mode:color-dodge;opacity:.5;position:absolute;right:0;top:0;transition:all .33s ease}.card.mythic:before,.card.rare:before{background-image:linear-gradient(115deg,transparent,#00e7ff 25%,transparent 47%,transparent 53%,#ff00e7 75%,transparent);background-image:linear-gradient(115deg,transparent 0,var(--color1) 25%,transparent 47%,transparent 53%,var(--color2) 75%,transparent 100%);background-position:50% 50%;background-size:300% 300%;-webkit-filter:brightness(.5) contrast(1);filter:brightness(.5) contrast(1);opacity:.5;z-index:1}.card.mythic:after{background-blend-mode:overlay;background-image:url(https://assets.codepen.io/13471/sparkles.gif),url(https://assets.codepen.io/13471/holo.png),linear-gradient(125deg,rgba(255,0,132,.314) 15%,rgba(252,164,0,.251) 30%,rgba(255,255,0,.188) 40%,rgba(0,255,138,.125) 60%,rgba(0,207,255,.251) 70%,rgba(204,76,250,.314) 85%);background-position:50% 50%;background-size:160%;-webkit-filter:brightness(1) contrast(1);filter:brightness(1) contrast(1);mix-blend-mode:color-dodge;opacity:1;opacity:.75;transition:all .33s ease;z-index:2}.card.prize:before{background-image:linear-gradient(115deg,transparent,#f8e68a 25%,transparent 47%,transparent 53%,#685625 75%,transparent);background-position:50% 50%;background-size:300% 300%;-webkit-filter:brightness(.5) contrast(1);filter:brightness(.5) contrast(1);opacity:.5;z-index:1}.card.prize:after{background-blend-mode:overlay;background-image:url(https://assets.codepen.io/13471/sparkles.gif),url(https://assets.codepen.io/13471/holo.png),linear-gradient(115deg,transparent,#f8e68a 25%,transparent 47%,transparent 53%,#685625 75%,transparent);background-position:50% 50%;background-size:160%;mix-blend-mode:color-dodge;opacity:1;opacity:.75;transition:all .33s ease;z-index:2}.card.active:after,.card.prize:after,.card:hover:after{-webkit-filter:brightness(1) contrast(1);filter:brightness(1) contrast(1)}.card.active:after,.card:hover:after{opacity:1}.card.active,.card:hover{-webkit-animation:none;animation:none;transition:box-shadow .1s ease-out}.card.active:before,.card:hover:before{background-image:linear-gradient(110deg,transparent 25%,#00e7ff 48%,#ff00e7 52%,transparent 75%);background-image:linear-gradient(110deg,transparent 25%,var(--color1) 48%,var(--color2) 52%,transparent 75%);background-position:50% 50%;background-size:250% 250%;-webkit-filter:brightness(.66) contrast(1.33);filter:brightness(.66) contrast(1.33);opacity:.88}.card.active:after,.card.active:before,.card:hover:after,.card:hover:before{-webkit-animation:none;animation:none;transition:none}.card.animated{-webkit-animation:holoCard 12s ease 0s 1;animation:holoCard 12s ease 0s 1;transition:none}.card.animated:before{-webkit-animation:holoGradient 12s ease 0s 1;animation:holoGradient 12s ease 0s 1;transition:none}.card.animated:after{-webkit-animation:holoSparkle 12s ease 0s 1;animation:holoSparkle 12s ease 0s 1;transition:none}.shimmer{-webkit-animation:shimmer 2.5s infinite;animation:shimmer 2.5s infinite;background-repeat:no-repeat;color:gray;display:inline-block;-webkit-mask:linear-gradient(-60deg,#fff 30%,rgba(0,0,0,.333),#fff 70%) right/300% 100%;mask:linear-gradient(-60deg,#fff 30%,rgba(0,0,0,.333),#fff 70%) right/300% 100%}@-webkit-keyframes shimmer{to{-webkit-mask-position:left}}@keyframes shimmer{to{-webkit-mask-position:left}}@-webkit-keyframes holoSparkle{0%,to{background-position:50% 50%;-webkit-filter:brightness(1.2) contrast(1.25);filter:brightness(1.2) contrast(1.25);opacity:.75}5%,8%{background-position:40% 40%;-webkit-filter:brightness(.8) contrast(1.2);filter:brightness(.8) contrast(1.2);opacity:1}13%,16%{background-position:50% 50%;-webkit-filter:brightness(1.2) contrast(.8);filter:brightness(1.2) contrast(.8);opacity:.5}35%,38%{background-position:60% 60%;-webkit-filter:brightness(1) contrast(1);filter:brightness(1) contrast(1);opacity:1}55%{background-position:45% 45%;-webkit-filter:brightness(1.2) contrast(1.25);filter:brightness(1.2) contrast(1.25);opacity:.33}}@keyframes holoSparkle{0%,to{background-position:50% 50%;-webkit-filter:brightness(1.2) contrast(1.25);filter:brightness(1.2) contrast(1.25);opacity:.75}5%,8%{background-position:40% 40%;-webkit-filter:brightness(.8) contrast(1.2);filter:brightness(.8) contrast(1.2);opacity:1}13%,16%{background-position:50% 50%;-webkit-filter:brightness(1.2) contrast(.8);filter:brightness(1.2) contrast(.8);opacity:.5}35%,38%{background-position:60% 60%;-webkit-filter:brightness(1) contrast(1);filter:brightness(1) contrast(1);opacity:1}55%{background-position:45% 45%;-webkit-filter:brightness(1.2) contrast(1.25);filter:brightness(1.2) contrast(1.25);opacity:.33}}@-webkit-keyframes holoGradient{0%,to{background-position:50% 50%;-webkit-filter:brightness(.5) contrast(1);filter:brightness(.5) contrast(1);opacity:.5}5%,9%{background-position:100% 100%;-webkit-filter:brightness(.75) contrast(1.25);filter:brightness(.75) contrast(1.25);opacity:1}13%,17%{background-position:0 0;opacity:.88}35%,39%{background-position:100% 100%;-webkit-filter:brightness(.5) contrast(1);filter:brightness(.5) contrast(1);opacity:1}55%{background-position:0 0;-webkit-filter:brightness(.75) contrast(1.25);filter:brightness(.75) contrast(1.25);opacity:1}}@keyframes holoGradient{0%,to{background-position:50% 50%;-webkit-filter:brightness(.5) contrast(1);filter:brightness(.5) contrast(1);opacity:.5}5%,9%{background-position:100% 100%;-webkit-filter:brightness(.75) contrast(1.25);filter:brightness(.75) contrast(1.25);opacity:1}13%,17%{background-position:0 0;opacity:.88}35%,39%{background-position:100% 100%;-webkit-filter:brightness(.5) contrast(1);filter:brightness(.5) contrast(1);opacity:1}55%{background-position:0 0;-webkit-filter:brightness(.75) contrast(1.25);filter:brightness(.75) contrast(1.25);opacity:1}}@-webkit-keyframes holoCard{0%,to{-webkit-transform:rotate(0deg) rotateX(0deg) rotateY(0deg);transform:rotate(0deg) rotateX(0deg) rotateY(0deg)}5%,8%{-webkit-transform:rotate(0deg) rotateX(6deg) rotateY(-20deg);transform:rotate(0deg) rotateX(6deg) rotateY(-20deg)}13%,16%{-webkit-transform:rotate(0deg) rotateX(-9deg) rotateY(32deg);transform:rotate(0deg) rotateX(-9deg) rotateY(32deg)}35%,38%{-webkit-transform:rotate(3deg) rotateX(12deg) rotateY(20deg);transform:rotate(3deg) rotateX(12deg) rotateY(20deg)}55%{-webkit-transform:rotate(-3deg) rotateX(-12deg) rotateY(-27deg);transform:rotate(-3deg) rotateX(-12deg) rotateY(-27deg)}}@keyframes holoCard{0%,to{-webkit-transform:rotate(0deg) rotateX(0deg) rotateY(0deg);transform:rotate(0deg) rotateX(0deg) rotateY(0deg)}5%,8%{-webkit-transform:rotate(0deg) rotateX(6deg) rotateY(-20deg);transform:rotate(0deg) rotateX(6deg) rotateY(-20deg)}13%,16%{-webkit-transform:rotate(0deg) rotateX(-9deg) rotateY(32deg);transform:rotate(0deg) rotateX(-9deg) rotateY(32deg)}35%,38%{-webkit-transform:rotate(3deg) rotateX(12deg) rotateY(20deg);transform:rotate(3deg) rotateX(12deg) rotateY(20deg)}55%{-webkit-transform:rotate(-3deg) rotateX(-12deg) rotateY(-27deg);transform:rotate(-3deg) rotateX(-12deg) rotateY(-27deg)}}.card.eevee:hover{box-shadow:0 0 30px -5px #fff,0 0 10px -2px #fff,0 55px 35px -20px rgba(0,0,0,.5)}.card.eevee.active:before,.card.eevee:hover:before{background-image:linear-gradient(115deg,transparent 20%,#00e7ff 36%,#ff00e7 43%,var(--color3) 50%,var(--color4) 57%,var(--color5) 64%,transparent 80%);background-image:linear-gradient(115deg,transparent 20%,var(--color1) 36%,var(--color2) 43%,var(--color3) 50%,var(--color4) 57%,var(--color5) 64%,transparent 80%)}.demo .card{background-image:url(https://cdn2.bulbagarden.net/upload/1/17/Cardback.jpg);background-image:var(--back);font-size:2vh}.demo .card>span{position:relative;top:45%}.demo .card:first-of-type,.demo .card:nth-of-type(2),.demo .card:nth-of-type(3){-webkit-animation:none;animation:none;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.4),0 25px 15px -10px rgba(0,0,0,.5);height:20.5vh;width:20vh}.demo .card:first-of-type:after,.demo .card:first-of-type:before,.demo .card:nth-of-type(2):after,.demo .card:nth-of-type(2):before,.demo .card:nth-of-type(3):after,.demo .card:nth-of-type(3):before{-webkit-animation:none;animation:none}.demo .card:first-of-type:after,.demo .card:first-of-type:before{display:none}.demo .card:nth-of-type(2){background:none}.demo .card:nth-of-type(2):before{display:none}.demo .card:nth-of-type(3){background:none}.demo .card:nth-of-type(3):after{display:none}.operator{display:inline-block;font-size:6vh;vertical-align:middle}.cards,.demo{align-items:center;display:flex;flex-direction:column;justify-content:space-evenly;-webkit-perspective:2000px;perspective:2000px;position:relative;-webkit-transform:translate3d(.1px,.1px,.1px);transform:translate3d(.1px,.1px,.1px);z-index:1}.demo{flex-direction:row;justify-content:center}@media screen and (min-width:600px){.cards{flex-direction:row}}.cards .card:nth-child(2),.cards .card:nth-child(2):after,.cards .card:nth-child(2):before{-webkit-animation-delay:.25s;animation-delay:.25s}.cards .card:nth-child(3),.cards .card:nth-child(3):after,.cards .card:nth-child(3):before{-webkit-animation-delay:.5s;animation-delay:.5s}.cards .card:nth-child(4),.cards .card:nth-child(4):after,.cards .card:nth-child(4):before{-webkit-animation-delay:.75s;animation-delay:.75s}.bg-image{background-position:50%;background-size:cover;bottom:0;-webkit-filter:blur(5px);filter:blur(5px);left:0;position:absolute;right:0;top:0;z-index:-1}.triangle{border-bottom:50px solid #000;border-left:50px solid transparent;height:0;width:0}
/*# sourceMappingURL=main.15a36035.css.map*/