Update style.css

style.css

@@ -9,12 +9,22 @@ body{
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    background: radial-gradient(gray,black);
+    min-height: 100vh;
 }
 fieldset{
+    justify-content: center;
     margin-top: 5rem;
     width: 50%;
     border: none;
 }
+input, select{
+    background: linear-gradient(90deg, yellow, gray);
+    border-radius: 5px;
+}
+option{
+    background-color: yellow;
+}
 .inputs-container{
     display: flex;
     gap: 1rem;
@@ -29,16 +39,80 @@ fieldset{
     padding: 5rem 0;
 }
 .pokemon-card {
+    border-radius: 25px;
     border: 1px solid black;
     width: 15rem;
     display: flex;
     justify-content: center;
     flex-direction: column;
+    text-align: center;
+    padding: 1em;
+    background: linear-gradient(45deg, gray, yellow, gray, yellow, gray);
+    box-shadow: 0px 5px 12px black;
+}
+.pokemon-card:hover{
+    cursor: pointer;
+    transform:perspective(400px) rotateY(-15deg);
+    z-index: 1;
+    background: linear-gradient(45deg, gray, yellow, aqua, gray, yellow);
+    background-size: 400% 400%;
+    animation: bg 1.4s ease-in-out infinite;
+    scale: 1.2;
+    transition: .5s;
+}
+@keyframes bg {
+    from{
+        background-position: 0% 100%;
+    }
+    50%{
+        rotate: -5deg; 
+        transform:perspective(400px) rotateY(15deg)}
+    to{
+        background-position: 100% 0%;
+    }
+}
+.pokemon-card:not(hover){
+    z-index: 0;
+    transition: .5s;
+}
+.pokemon-card>div>p{
+    margin: 1px;
+    border: 2px solid darkblue;
+    border-radius: 0 0 5px 5px;
+    background-color: red;
+    color: darkblue;
+    font-weight: 600;
+}
+.pokemon-card>div>p:first-child{
+    background-color: greenyellow;
+    font-weight: 600;
+}
+.pokemon-card>div>p:last-child{
+    background-color: gray;
 }
 .pokemon-card>img{
     width: 100%;
-    height: 40vh;
+    height: 17em;
     object-fit: cover;
+    border: 12px solid darkblue;
+    border-radius: 5px 5px 0px 0px;
+    font-weight: 600;
+}
+.pokemon-card:hover>img{
+    animation: img 1.4s ease-in-out infinite alternate;
+    transition: .25s;
+}
+@keyframes img {
+    from{
+        filter:brightness(100%) ;
+    }
+    50%{
+
+        filter:brightness(130%) ;
+    }
+    to{
+        filter:brightness(100%) ;
+    }
 }
 .flex{
     display: flex;