diff --git a/EjemploDOM.html b/EjemploDOM.html
index 1951eb6..91526c8 100644
--- a/EjemploDOM.html
+++ b/EjemploDOM.html
@@ -4,26 +4,27 @@
     <title>Practica Javacript Prospercity</title>
     <link rel="shortcut icon" href="#">
     <link rel="stylesheet" href="css/estilos.css">
-</head>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;900&display=swap" rel="stylesheet">
+   
 <body>
     <header>
         <nav class="slidemenu">
   
             <!-- Item 1 -->
             <input type="radio" name="slideItem" id="slide-item-1" class="slide-toggle" checked/>
-            <label for="slide-item-1"><p class="icon">♬</p><span>Home</span></label>
+            <label for="slide-item-1"><p class="icon">🏠</p><span>Home</span></label>
             
             <!-- Item 2 -->
             <input type="radio" name="slideItem" id="slide-item-2" class="slide-toggle"/>
-            <label for="slide-item-2"><p class="icon">★</p><span>About</span></label>
+            <label for="slide-item-2"><p class="icon">⭐</p><span>About</span></label>
             
             <!-- Item 3 -->
             <input type="radio" name="slideItem" id="slide-item-3" class="slide-toggle"/>
-            <label for="slide-item-3"><p class="icon">✈</p><span>Folio</span></label>
+            <label for="slide-item-3"><p class="icon">💼</p><span>Folio</span></label>
             
             <!-- Item 4 -->
             <input type="radio" name="slideItem" id="slide-item-4" class="slide-toggle"/>
-            <label for="slide-item-4"><p class="icon">✎</p><span>Blog</span></label>
+            <label for="slide-item-4"><p class="icon">📓</p><span>Blog</span></label>
             
             <div class="clear"></div>
             
@@ -39,7 +40,7 @@ <h1>Bienvenidos a las noticias</h1>
 
         <div class="container">
             <section class="section-a">
-                <h2>
+                <h2 id="titulo1">
                     Hubble y Webb capturan el momento en el que misión de la NASA impacta contra un asteroide
                 </h2>
                 <p>
@@ -49,7 +50,7 @@ <h2>
                 <button>Leer Mas</button>
             </section>
             <section class="section-b">
-                <h2>
+                <h2 id="titulo2">
                     Explotarlos vs. desviarlos: ¿qué opciones existen para evitar que un asteroide choque con la Tierra?
                 </h2>
                 <p>
@@ -66,7 +67,14 @@ <h2>
                 <button onclick="changeColor('blue');">Azul</button>
                 <button onclick="changeColor('red');">Rojo</button>
             </section>
+
         </div>
+        <label for="dark-mode" clase="dark-mode-button">
+            <input id="dark-mode" type="checkbox";
+            onclick="document.documentElement.classList.toggle('dark-mode')">;
+            modo oscuro
+        </label>
+        
     </main>
     <script src="js/main.js"></script>
 </body>
diff --git a/css/estilos.css b/css/estilos.css
index 4258008..c737dea 100644
--- a/css/estilos.css
+++ b/css/estilos.css
@@ -1,7 +1,50 @@
-*{
+* {
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
+
+html {
+    font-size: 62.5%;
+    font-family: 'Rubik', sans-serif;
+}
+
+
+
+main {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.section-a {
+  padding: 25px;
+}
+
+.section-b {
+  padding: 25px;
+}
+
+.section-c {
+  padding: 25px;
+}
+
+h1 {
+  padding: 25px;
+  font-size: 4rem;
+  /*background-color: #0062d2;*/
+  color: #0062d2;
+
+}
+
+
+h2 {
+  font-size: 2.5rem;
+  color: #333366;
+}
+
+p{
+  font-size: 2rem;
+}
   
   .clear{
     clear: both;
@@ -14,9 +57,12 @@
   
   .slidemenu{
     font-family: arial, sans-serif;
-    max-width: 600px;
-    margin: 50px auto;
+    /*max-width: 600px; */
+    /*margin: 50px auto; */
     overflow: hidden;
+    background-color: #0062d2;
+    padding: 20px;
+    
   }
   
   .slidemenu label{
@@ -24,14 +70,16 @@
     text-align: center;
     display: block;
     float: left;
-    color: #333;
+    /*color: #333; */
+    color: #ccc;
     opacity: 0.2;
   
   }
   
   .slidemenu label:hover{
     cursor: pointer;
-    color: #666;
+    /*color: #666;*/
+    color: #000000;
   }
   
   .slidemenu label span{
@@ -41,7 +89,8 @@
   
   .slidemenu label .icon{
     font-size: 20px;
-    border: solid 2px #333;
+   /* border: solid 2px #333; */
+   border: solid 2px #fefefe;
     text-align: center;
     height: 50px;
     width: 50px;
@@ -88,4 +137,5 @@
   .slidemenu #slide-item-2:checked ~ .slider .bar{ margin-left: 25%; }
   .slidemenu #slide-item-3:checked ~ .slider .bar{ margin-left: 50%; }
   .slidemenu #slide-item-4:checked ~ .slider .bar{ margin-left: 75%; }
+  
   
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index db67841..861f547 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,6 +1,9 @@
 function changeColor(newColor) {
-    const elem = document.getElementById('para');
-    elem.style.color = newColor;
+   // const elem = document.getElementById('para');
+   const elem1 = document.getElementById('titulo1');
+   const elem2 = document.getElementById('titulo2');
+    elem1.style.color = newColor;
+    elem2.style.color = newColor;
   }
   
 let firstHeading = document.querySelector('h1');
