Create DetailCard.css

src/components/DetailCard.css

@@ -0,0 +1,84 @@
+.card-container {
+    width: 80vw;
+    height: auto;
+}
+
+.pokemon-name {
+    font-size: xx-large;
+    font-weight: bold;
+    line-height: 0%;
+    text-transform: capitalize;
+}
+
+.top-content {
+    display: grid;
+}
+
+.pokemon-img {
+    width: 100%;
+    max-height: 200px;
+    object-fit: cover;
+}
+
+table {
+    width: 100%;
+    text-align: left;
+    padding: 5px;
+    border: 1px aliceblue solid;
+}
+
+td, th {
+    text-transform: capitalize;
+}
+
+.table-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.barchart-wrapper {
+    width: 100%;
+    padding-top: 20px;
+    margin: 0 auto;
+}
+
+.bar-box {
+    background-color: #302e2e;
+    width: 150px;
+    height: 6px;
+}
+
+.progress-bar {
+    background-color: yellow;
+    height: 6px;
+}
+
+button {
+    padding: 5px;
+    background-color: yellow;
+    color: black;
+    margin-top: 20px;
+}
+
+@media only screen and (min-width: 770px) {
+    .card-container {
+        width: 600px;
+    }
+    .top-content {
+        grid-template-columns: 50% 50%;
+    }
+    .pokemon-img {
+        width: 80%;
+        height: auto;
+        max-height: none;
+        object-fit: cover;
+    }
+
+    .barchart-wrapper {
+        padding-top: 0;
+    }
+
+    .bar-box {
+        width: 200px;
+    }
+}