@import"https://fonts.googleapis.com/css?family=Roboto:400,900&display=swap";html,body{padding:0;margin:0;font-family:"Roboto",sans-serif;font-weight:400}#root{display:flex;align-items:center;justify-content:center;height:100vh;background-color:#d9afd9;background-image:linear-gradient(0deg, #d9afd9 0%, #97d9e1 100%)}.card{flex-grow:0;flex-basis:0;margin:3em auto;min-height:200px;min-width:300px;width:50%;border-top:1px solid rgba(0,0,0,.1);border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.11),0 2px 2px rgba(0,0,0,.11),0 4px 4px rgba(0,0,0,.11),0 8px 8px rgba(0,0,0,.11),0 16px 16px rgba(0,0,0,.11),0 32px 32px rgba(0,0,0,.11);background:#f1f1f1;color:#333;text-decoration:none;display:block;transition:box-shadow .2s ease-in-out}.card:hover{box-shadow:0 1px 1px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.15),0 4px 4px rgba(0,0,0,.15),0 8px 8px rgba(0,0,0,.15),0 16px 16px rgba(0,0,0,.15),0 32px 32px rgba(0,0,0,.15)}.name{margin:0;padding:.5em 1em;text-transform:uppercase;border-bottom:1px solid rgba(0,0,0,.25)}.weight{display:block;text-align:center;font-size:20px;font-weight:400;margin-bottom:1em}.weight span{font-size:10px;text-transform:uppercase;color:#333;font-weight:400}.sprite{display:flex;align-items:center;justify-content:center;margin:1em auto 0;width:100%;min-height:128px}.sprite img{flex-grow:0;flex-basis:auto}