styles changes

src/components/pages/CharacterDetail.jsx

@@ -14,6 +14,7 @@ function CharacterDetail({ findCharacter }) {
             <p className='p__text'>El personaje que buscas no existe</p>
         )
     }
+    console.log(characterToShow);
 
     //HTML code
     return (

src/styles/layout/_characterDetail.scss

@@ -2,8 +2,6 @@
   display: flex;
   flex-direction: column;
   align-items: center; /* Center the card horizontally */
-  justify-content: center; /* Center the card vertically */
-  min-height: 100vh; /* Make the section take up the full height of the viewport */
 }
 
 .card__detail {

src/styles/layout/_filters.scss

@@ -1,46 +1,83 @@
-.form__input {
-  width: 20rem;
-  height: 2rem;
+// .form__input {
+//   width: 25rem;
+//   height: 2rem;
+//   font-size: 16px;
+//   margin: 1rem;
+//   background-color: grey;
+//   border: solid rgba(154, 154, 28, 0.692);
+// }
 
-  margin-bottom: 1rem;
-  font-size: 16px;
-  background-color: grey;
+// .form__select {
+//   width: 25rem;
+//   height: 2.2rem;
+//   font-size: 16px;
+//   margin: 1rem;
+//   background-color: grey;
+//   border: solid rgba(154, 154, 28, 0.692);
+// }
+
+// .form__label {
+//   color: whitesmoke;
+//   font-size: 16px;
+// }
+
+// .filter__house {
+//   font-size: 16px;
+// }
+
+// @media (min-width: 600px) {
+//   .filters__section {
+//     grid-template-columns: 1fr 1fr;
+//     gap: 0.5rem;
+//   }
+
+//   .form__input .form__select {
+//     font-size: 14px;
+//   }
+// }
+.filters__section {
+  display: grid;
+  grid-template-columns: auto 25rem; /* Labels take up auto width, fields take up 25rem */
+  gap: 0.5rem 1rem; /* Row gap of 0.5rem and column gap of 1rem */
+  margin: 1rem 0;
+  width: 100%;
+}
+
+.form__label {
   color: whitesmoke;
-  border: solid rgba(154, 154, 28, 0.692);
-  box-sizing: border-box;
+  font-size: 16px;
+  text-align: left; /* Align the label text to the left */
+  align-self: center; /* Vertically center the label in its grid cell */
 }
 
+.form__input,
 .form__select {
-  width: 20rem;
-  height: 2.1rem;
-
-  margin-bottom: 1rem;
+  width: 25rem; /* Ensure fields have the specified width */
+  height: 2rem; /* Ensure fields have the specified height */
   font-size: 16px;
-  background-color: grey;
+  padding: 0.5rem;
+  background-color: #3a3a3a;
+  border: 1px solid #9a9a1c;
+  border-radius: 5px;
   color: whitesmoke;
-  border: solid rgba(154, 154, 28, 0.692);
-  box-sizing: border-box;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  transition: border-color 0.3s ease;
+  margin: 0; /* Remove margin to avoid unintended spacing */
 }
 
-.form__label {
-  margin-bottom: 0.5rem;
-  color: whitesmoke;
-  font-size: 16px;
-  text-align: center;
+.form__input:focus,
+.form__select:focus {
+  border-color: #e1c100;
+  outline: none;
 }
 
-@media (min-width: 600px) {
+@media (max-width: 600px) {
   .filters__section {
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
-  }
-
-  .form__input .form__select {
-    font-size: 14px;
+    grid-template-columns: 1fr; /* Single column layout on smaller screens */
   }
 
-  .form__label {
-    margin-bottom: 0;
-    margin-right: 1rem;
+  .form__input,
+  .form__select {
+    width: 100%; /* Make inputs responsive on smaller screens */
   }
 }

src/styles/layout/_footer.scss

@@ -1,9 +1,9 @@
 .footer {
-  display: block;
-  margin-top: 20%;
+  display: inline-block;
   margin-left: 2rem;
   margin-bottom: 2rem;
   justify-content: relative;
   color: whitesmoke;
   font-size: 12px;
+  color: whitesmoke;
 }

src/styles/layout/_landing.scss

@@ -10,20 +10,21 @@
 
 .filters__section {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
 }
 .cards__section {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr;
   align-items: center;
   justify-content: center;
   gap: 1rem;
+  margin-top: 1rem;
 }
 
 .cards__ul {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 1rem;
 }
 
 .card__li {