@import url(https://fonts.googleapis.com/css2?family=Open+Sans);*{margin:0;padding:0;box-sizing:border-box}#app{font-family:Open-sans,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:1px}.header{background:#e91b1b;color:#fff;font-size:36px;text-align:center;padding:20px 0}.card-container{height:100%;width:90%;padding:32px 20px;margin:0 auto;display:flex;flex-wrap:wrap}.card-container .card{height:310px;width:250px;border-radius:10px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.2));margin:20px;padding:1rem 2rem;cursor:pointer;transition:filter .3s ease-in-out}.card-container .card img{width:80%;height:auto;-o-object-fit:cover;object-fit:cover;display:block;margin:0 auto}.card-container .card .card-type{padding:.2rem .75rem;border-radius:.5rem;background:#eef}.card-container .card .card-type,.card-container .card p:nth-of-type(2){width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:10px auto;text-align:center}.card-container .card p:nth-of-type(2){font-weight:600}.card-container .card:hover{filter:drop-shadow(0 20px 10px rgba(0,0,0,.25))}.card-title{margin-top:20px;text-align:center;text-transform:capitalize}.fire{background:#ff7226}.grass{background:#45f531}.water{background:#009dc4}.bug{background:brown}.normal{background:#a8a878}.poison{background:#639}.ground{background:#f4a460}.electric{background:#ffdc13}.fairy{background:#ffb6c1}.fighting{background:#ff2020}.psychic{background:#95bb0c}.rock{background:#8b4513}.ghost{background:purple}.ice{background:#00d9ff}.dragon{background:#ff1663}.steel{background:#4682b4}.dark{background:#000;color:#fff}.dark .card-type{color:#000}