From 35b2f15ab8a97b734ffea47401410b01c72af785 Mon Sep 17 00:00:00 2001
From: Manuel <manuelpinedacabeza@gmail.com>
Date: Wed, 1 Nov 2023 18:30:55 +0100
Subject: [PATCH] Added display, width, max-width and margin rules to
 .submit-button and .cancel-button.

Updated .cancel-button bg color.

Added min-width: 600px media query.

Added display flex and space around to .button-container and
added max-width to both buttons.
---
 src/index.css | 59 +++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/index.css b/src/index.css
index 79ff176..0671710 100644
--- a/src/index.css
+++ b/src/index.css
@@ -83,6 +83,10 @@ p {
   border: 3px solid gray;
 }
 .input-box {
+  display: block;
+  width: 90%;
+  max-width: 500px;
+  margin: 0 auto 20px !important;
   font-size: 1.2rem;
   padding: 1rem;
   border: 2px solid #161d28;
@@ -92,8 +96,9 @@ p {
 }
 
 .submit-button {
-  margin-top: 1rem;
-  margin-left: 1rem;
+  display: block;
+  width: 90%;
+  margin: 0 auto 5px;
   font-family: Arial, sans-serif;
   background-color: #7c77fe;
   border-radius: 10em;
@@ -101,21 +106,30 @@ p {
   cursor: pointer;
 }
 
+.submit-button:hover {
+  background-color: #6c7077;
+}
+
 .cancel-button {
+  display: block;
+  width: 90%;
+  margin: 0 auto 5px;
   color: white;
-  background-color: transparent;
-  border: none;
+  background-color: #91969d;
+  border-radius: 10em;
   outline: none;
   cursor: pointer;
 }
 
+.cancel-button:hover {
+  background-color: #5b5e62;
+}
+
 .form {
   justify-content: center;
 }
 
-.submit-button:hover {
-  background-color: #6c7077;
-}
+
 
 /* INFORMATION CARD */
 
@@ -217,6 +231,33 @@ p {
   justify-content: space-around;
 }
 
+@media (min-width: 600px) {
+  .button-container {
+    display: flex;
+    justify-content: space-around;
+    max-width: 550px;
+    margin: auto;
+  }
+
+  .submit-button {
+    max-width: 250px;
+    font-family: Arial, sans-serif;
+    background-color: #7c77fe;
+    border-radius: 10em;
+    padding: 0 2rem;
+    cursor: pointer;
+  }
+  
+  .cancel-button {
+    max-width: 250px;
+    color: white;
+    background-color: #91969d;
+    border-radius: 10em;
+    outline: none;
+    cursor: pointer;
+  }
+}
+
 @media (max-width: 700px) {
   html {
     font-size: 14px;
@@ -227,7 +268,7 @@ p {
   }
 
   .container-medium {
-    margin: 1rem 0;
+    margin: 1rem auto;
     width: 90%;
     transition: transform 0.5s ease;
   }
@@ -237,7 +278,7 @@ p {
   }
 
   .container-small {
-    margin: 1rem 0;
+    margin: 1rem auto;
     width: 90%;
     transition: transform 0.5s ease;
   }