:root{--green:#24aca0;--red:#da6780;--secondary:#869a9c}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body,html{background-color:#e4f3f0;padding:0;margin:0;font-family:Lato,sans-serif}#app,body,html{width:100%;height:100%}#app{overflow:hidden}.flex{display:flex}.flex.column{flex-direction:column}.h100{height:100%}.w100{width:100%}.justify-center{justify-content:center}.align-center{align-items:center}.option{cursor:pointer;border:none;border-radius:50px;padding:15px 20px;color:#fff;font-weight:500;font-size:16px;font-family:Lato,sans-serif;text-transform:uppercase;box-shadow:0 3px 5px 0 rgba(0,0,0,.1);transition:all .1s ease-out}.option:hover{transform:scale(1.08)}.option.bad{background-color:var(--red)}.option.good{background-color:var(--green)}.option.neutral{background-color:var(--secondary)}.option.correct{pointer-events:none;animation:anim-correct 2s ease-out forwards}.option.wrong{opacity:0;pointer-events:none}.type-label{text-align:center;color:var(--secondary);font-size:14px;margin-bottom:10px}.vs{background-color:var(--secondary);border-radius:50%;color:#fff;margin:20px 10px 0 10px;width:30px;height:30px;display:flex;justify-content:center;align-items:center;font-size:10px}.score{border:none;position:absolute;left:15px;top:15px;background-color:#fff;border-radius:10px;padding:10px;box-shadow:0 0 8px 0 rgba(0,0,0,.1)}.score .text{font-size:18px;color:var(--green);font-weight:600;text-align:center}.score .label{color:var(--secondary);font-size:10px}button.score{height:54px;width:54px;right:15px;left:auto;font-size:20px;font-weight:600;color:var(--secondary);cursor:pointer;transition:all .1s ease-out}button.score:hover{transform:scale(1.1)}.type{border-radius:50%}.type.BUG{box-shadow:0 0 40px 0 rgba(144,193,44,.5)}.type.DARK{box-shadow:0 0 40px 0 rgba(90,83,102,.5)}.type.DRAGON{box-shadow:0 0 40px 0 rgba(9,109,196,.5)}.type.ELECTRIC{box-shadow:0 0 40px 0 rgba(243,210,59,.5)}.type.FAIRY{box-shadow:0 0 40px 0 rgba(236,143,230,.5)}.type.FIGHTING{box-shadow:0 0 40px 0 rgba(206,64,105,.5)}.type.FIRE{box-shadow:0 0 40px 0 rgba(255,156,84,.5)}.type.FLYING{box-shadow:0 0 40px 0 rgba(146,170,222,.5)}.type.GHOST{box-shadow:0 0 40px 0 rgba(82,105,172,.5)}.type.GRASS{box-shadow:0 0 40px 0 rgba(99,187,91,.5)}.type.GROUND{box-shadow:0 0 40px 0 rgba(217,119,70,.5)}.type.ICE{box-shadow:0 0 40px 0 rgba(116,206,192,.5)}.type.NORMAL{box-shadow:0 0 40px 0 rgba(144,153,161,.5)}.type.POISON{box-shadow:0 0 40px 0 rgba(171,106,200,.5)}.type.PSYCHIC{box-shadow:0 0 40px 0 rgba(249,113,118,.5)}.type.ROCK{box-shadow:0 0 40px 0 rgba(199,183,139,.5)}.type.STEEL{box-shadow:0 0 40px 0 rgba(90,142,161,.5)}.type.WATER{box-shadow:0 0 40px 0 rgba(77,144,213,.5)}.type.selectable{margin:5px;transition:all .1s ease-out;cursor:pointer;opacity:.6}.type.selectable:hover,.type.selected{transform:scale(1.1)}.type.selected{opacity:1;outline:3px solid #044742;box-shadow:0 0 10px 5px var(--green)}.slideIn{animation:anim-slide-in .2s ease-out forwards}.slideOut{animation:anim-slide-out .2s ease-in forwards}@keyframes anim-correct{50%{opacity:1}to{opacity:0;transform:scale(1.2)}}@keyframes anim-slide-in{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes anim-slide-out{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}