From d31b494b05cd4d963b4341d67c8a11478d36a3ca Mon Sep 17 00:00:00 2001
From: DavidCornejoB <luisdavidcorbra24@gmail.com>
Date: Tue, 27 Jun 2023 15:46:53 -0500
Subject: [PATCH] =?UTF-8?q?[MODIFIED]=20styles.css=20-=20Se=20han=20a?=
 =?UTF-8?q?=C3=B1adido=20variables=20que=20se=20usar=C3=A1n=20globalmente?=
 =?UTF-8?q?=20en=20todo=20el=20.css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vista-principal/styles.css                | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/curso-frontend-developer/vista-principal/styles.css b/curso-frontend-developer/vista-principal/styles.css
index 47ab9e8..6f201c2 100644
--- a/curso-frontend-developer/vista-principal/styles.css
+++ b/curso-frontend-developer/vista-principal/styles.css
@@ -1,17 +1,23 @@
-body {
-  margin: 0;
-  font-family: 'Muli', sans-serif;
-  background: #8f57fd;
+:root {
+  --primary-color: #8f57fd;
+  --secondary-color: white;
+  --background-color:  rgba(255,255,255,0.1);
 }
 
 * {
   box-sizing: border-box;
 }
 
+body {
+  margin: 0;
+  font-family: 'Muli', sans-serif;
+  background: var(--primary-color);
+}
+
 .header {
   align-items: center;
-  background: #8f57fd;
-  color: white;
+  background: var(--primary-color);
+  color: var(--secondary-color);
   display: flex;
   height: 100px;
   justify-content: space-between;
@@ -47,7 +53,7 @@ body {
 }
 
 .header__menu li a {
-  color: white;
+  color: var(--secondary-color);
   text-decoration: none;
 }
 
@@ -76,13 +82,13 @@ body {
 }
 
 .main__title {
-  color: white;
+  color: var(--secondary-color);
   font-size: 25px;
 }
 
 .categories__title {
-  background: #8f57fd;
-  color: white;
+  background: var(--primary-color);
+  color: var(--secondary-color);
   font-size: 16px;
   margin-top: -16px;
   position: absolute;
@@ -170,26 +176,26 @@ body {
 }
 
 .carousel-item__details--title {
-  color: white;
+  color: var(--secondary-color);
   margin: 5px 0px 0px 0px;
 }
 
 .carousel-item__details--subtitle {
-  color: white;
+  color: var(--secondary-color);
   font-size: 8px;
   margin: 3px 0px;
 }
 
 .footer {
   align-items: center;
-  background-color: #8f57fd;
+  background-color: var(--primary-color);
   display: flex;
   height: 100px;
   width: 100%;
 }
 
 .footer a {
-  color: white;
+  color: var(--secondary-color);
   cursor: pointer;
   font-size: 14px;
   padding-left: 30px;
@@ -201,10 +207,10 @@ body {
 }
 
 .input {
-  background-color: rgba(255,255,255,0.1);
-  border: 2px solid white;
+  background-color: var(--background-color);
+  border: 2px solid var(--secondary-color);
   border-radius: 25px;
-  color: white;
+  color: var(--secondary-color);
   font-family: 'Muli', sans-serif;
   font-size: 16px;
   height: 50px;
@@ -215,7 +221,7 @@ body {
 }
 
 ::placeholder {
-  color: white;
+  color: var(--secondary-color);
 }
 
 @media only screen and (max-width: 600px) {