body{background-color:gray}table.organizecards,td.organizecardsB{border:50px solid gray}*{font-family:Lato,Gill Sans,Gill Sans MT,sans-serif;font-stretch:ultra-condensed}div.blue{background:linear-gradient(to bottom right,#d9e4ec,#adc1d1,#7d99af,#557792,#7d99af,#adc1d1)}div.yellow{background:linear-gradient(to bottom right,#ffffa4,#fff870,#fff200,#fff870,#ffffa4,#fff870)}div.redorange{background:linear-gradient(to bottom right,#ffbfba,#ff978f,#ff756b,#ff594c,#ff756b,#ff978f)}div.green{background:linear-gradient(to bottom right,#aae5b7,#78cf8b,#4fb665,#319d49,#4fb665,#78cf8b)}div.nameimageinfo{margins:0;border:10px solid gold;border-radius:20px;height:480px;padding:5px 10px;width:310px}div.infoonly{border-opacity:50%;border:1px dotted gray;border-radius:5px;height:240px}table.costs,table.nameheaders,table.stats{vertical-align:center;width:310px}td.basic{font-size:9px;font-weight:600;margin:0;padding:0}td.nameofanimal{font-size:20px;font-weight:700;margin:0;padding:0}td.hp{color:crimson;font-size:18px;font-weight:600;text-align:right;width:50px}td.typesign{font-size:20px;text-align:center;width:20px}img{border:5px outset #ff0;box-shadow:3px 3px 10px #000;height:190px;margin:0 0 5px;padding:0;width:300px}p.description{background:linear-gradient(90deg,#daa520,#ff0,#daa520);font-size:10px;font-style:italic;font-weight:600;margin:0 0 5px 30px;padding:2px;text-align:center;width:250px}td.energy{margins:0;font-size:18px;padding:0;text-align:center;width:50px}td.attackdesc,td.attackdescCENTER{margins:5px;padding:5px}td.attackdescCENTER{text-align:center}span.label{font-size:14px;font-weight:700}span.labeltext{font-size:12px;font-weight:400}td.damage{font-size:20px;font-weight:400;text-align:center;width:25px}table.stats{border-bottom:1.5px solid #000}table.costs{font-size:10px;text-align:center}tr.costheaders{font-weight:900}tr.costicons{align:center;font-size:18px;vertical-align:center}li,ul{margins:0;list-style:none;padding:0}li.italicize{border:1px ridge gold;border-radius:2px;font-size:10px;font-style:italic;font-weight:600;margin:5px 0 0;padding:5px;width:298px}li.copyrights{margins:0;font-size:7.2px;padding:0;text-align:center;width:308px}span.medium{font-weight:500}span.strong{font-weight:700}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,ins,kbd,label,legend,mark,menu,nav,object,ol,output,pre,q,ruby,s,samp,section,small,strike,strong,sub,summary,sup,tbody,tfoot,th,thead,time,tt,u,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}*{font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}
div{align-items:center;display:flex;height:100vh;justify-content:center}@-webkit-keyframes TransitioningBackground{0%{background-position:1% 0}50%{background-position:99% 100%}to{background-position:1% 0}}.subscribe-button{-webkit-animation:TransitioningBackground 10s ease infinite;animation:TransitioningBackground 10s ease infinite;background-image:linear-gradient(270deg,#8e9ac2,#42579a);background-size:400% 400%;border-radius:5px;color:#fff;font-size:1rem;font-weight:600;height:60px;overflow:hidden;position:relative;text-align:center;transition:.6s;width:200px}.subscribe-button:before{background:hsla(0,0%,100%,.5);filter:blur(30px);width:60px}.subscribe-button:after,.subscribe-button:before{content:"";display:block;height:100%;position:absolute;top:0;transform:translateX(-100px) skewX(-15deg)}.subscribe-button:after{background:hsla(0,0%,100%,.2);filter:blur(5px);width:30px}.subscribe-button div{align-items:center;display:flex;height:100vh;justify-content:center}@keyframes TransitioningBackground{0%{background-position:1% 0}50%{background-position:99% 100%}to{background-position:1% 0}}.subscribe-button .subscribe-button{-webkit-animation:TransitioningBackground 10s ease infinite;animation:TransitioningBackground 10s ease infinite;background-image:linear-gradient(270deg,#8e9ac2,#42579a);background-size:400% 400%;border-radius:5px;color:#fff;font-size:1rem;font-weight:600;height:60px;overflow:hidden;position:relative;text-align:center;transition:.6s;width:200px}.subscribe-button .subscribe-button:before{background:hsla(0,0%,100%,.5);filter:blur(30px);width:60px}.subscribe-button .subscribe-button:after,.subscribe-button .subscribe-button:before{content:"";display:block;height:100%;position:absolute;top:0;transform:translateX(-100px) skewX(-15deg)}.subscribe-button .subscribe-button:after{background:hsla(0,0%,100%,.2);filter:blur(5px);width:30px}.subscribe-button .subscribe-button:hover{background-image:linear-gradient(270deg,#2d8fe5,#d155b8);cursor:pointer;transform:scale(1.2)}.subscribe-button .subscribe-button:hover:after,.subscribe-button .subscribe-button:hover:before{transform:translateX(300px) skewX(-15deg);transition:.7s}.subscribe-button:hover{background-image:linear-gradient(270deg,#2d8fe5,#d155b8);cursor:pointer;transform:scale(1.2)}.subscribe-button:hover:after,.subscribe-button:hover:before{transform:translateX(300px) skewX(-15deg);transition:.7s}: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)}.card{background-color:#040712;background-image:var(--front);background-position:50% 50%;background-repeat:no-repeat;background-size:cover;border-radius:5%/3.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 55px 35px -20px rgba(0,0,0,.5);height:100vw;margin:20px;overflow:hidden;position:relative;touch-action:none;transform-origin:center;transition:transform .5s ease,box-shadow .2s ease;width:71.5vw;will-change:transform,filter;z-index:10}@media screen and (min-width:600px){.card{height:clamp(18vw,85vh,25.2vw);width:clamp(12.9vw,61vh,18vw)}}.card:hover{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: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:before{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%;filter:brightness(.5) contrast(1);opacity:.5;z-index:1}.card: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%;filter:brightness(1) contrast(1);mix-blend-mode:color-dodge;opacity:1;opacity:.75;transition:all .33s ease;z-index:2}.card.active:after,.card:hover:after{filter:brightness(1) contrast(1);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%,var(--color1) 48%,var(--color2) 52%,transparent 75%);background-position:50% 50%;background-size:250% 250%;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}@-webkit-keyframes holoSparkle{0%,to{background-position:50% 50%;filter:brightness(1.2) contrast(1.25);opacity:.75}5%,8%{background-position:40% 40%;filter:brightness(.8) contrast(1.2);opacity:1}13%,16%{background-position:50% 50%;filter:brightness(1.2) contrast(.8);opacity:.5}35%,38%{background-position:60% 60%;filter:brightness(1) contrast(1);opacity:1}55%{background-position:45% 45%;filter:brightness(1.2) contrast(1.25);opacity:.33}}@keyframes holoSparkle{0%,to{background-position:50% 50%;filter:brightness(1.2) contrast(1.25);opacity:.75}5%,8%{background-position:40% 40%;filter:brightness(.8) contrast(1.2);opacity:1}13%,16%{background-position:50% 50%;filter:brightness(1.2) contrast(.8);opacity:.5}35%,38%{background-position:60% 60%;filter:brightness(1) contrast(1);opacity:1}55%{background-position:45% 45%;filter:brightness(1.2) contrast(1.25);opacity:.33}}@-webkit-keyframes holoGradient{0%,to{background-position:50% 50%;filter:brightness(.5) contrast(1);opacity:.5}5%,9%{background-position:100% 100%;filter:brightness(.75) contrast(1.25);opacity:1}13%,17%{background-position:0 0;opacity:.88}35%,39%{background-position:100% 100%;filter:brightness(.5) contrast(1);opacity:1}55%{background-position:0 0;filter:brightness(.75) contrast(1.25);opacity:1}}@keyframes holoGradient{0%,to{background-position:50% 50%;filter:brightness(.5) contrast(1);opacity:.5}5%,9%{background-position:100% 100%;filter:brightness(.75) contrast(1.25);opacity:1}13%,17%{background-position:0 0;opacity:.88}35%,39%{background-position:100% 100%;filter:brightness(.5) contrast(1);opacity:1}55%{background-position:0 0;filter:brightness(.75) contrast(1.25);opacity:1}}@-webkit-keyframes holoCard{0%,to{transform:rotate(0deg) rotateX(0deg) rotateY(0deg)}5%,8%{transform:rotate(0deg) rotateX(6deg) rotateY(-20deg)}13%,16%{transform:rotate(0deg) rotateX(-9deg) rotateY(32deg)}35%,38%{transform:rotate(3deg) rotateX(12deg) rotateY(20deg)}55%{transform:rotate(-3deg) rotateX(-12deg) rotateY(-27deg)}}@keyframes holoCard{0%,to{transform:rotate(0deg) rotateX(0deg) rotateY(0deg)}5%,8%{transform:rotate(0deg) rotateX(6deg) rotateY(-20deg)}13%,16%{transform:rotate(0deg) rotateX(-9deg) rotateY(32deg)}35%,38%{transform:rotate(3deg) rotateX(12deg) rotateY(20deg)}55%{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%,var(--color1) 36%,var(--color2) 43%,var(--color3) 50%,var(--color4) 57%,var(--color5) 64%,transparent 80%)}.demo .card{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:27.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}body,html{height:100%;padding:0;transform:translateZ(.1px);z-index:1}body,html{background-color:#333844}body{color:#fff;font-family:Heebo,sans-serif;text-align:center}h1{display:block;margin:30px 0}p{font-weight:200;margin-top:5px}#app,.cards,.demo{position:relative}.cards,.demo{align-items:center;display:flex;flex-direction:column;justify-content:space-evenly;perspective:2000px;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}.container{align-items:center;display:flex;font-family:Roboto,Helvetica Neue,Arial,sans-serif;height:100vh;justify-content:center}.flip-card{background-color:transparent;height:300px;perspective:1000px;width:300px}.flip-card .inner{height:100%;position:relative;transform-style:preserve-3d;transition:transform .8s;width:100%}.flip-card .inner .back,.flip-card .inner .front{align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;height:100%;justify-content:center;position:absolute;width:100%}.flip-card .inner .front{background-color:#bbb}.flip-card .inner .back{background-color:teal;color:#fff}.flip-card .inner .back,.flip-card:hover .inner{transform:rotateY(180deg)}