diff --git a/EjemploDOM.html b/EjemploDOM.html
index 1951eb6..3a16812 100644
--- a/EjemploDOM.html
+++ b/EjemploDOM.html
@@ -1,9 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Practica Javacript Prospercity</title>
+    <title>Ejercicio Practica</title>
     <link rel="shortcut icon" href="#">
     <link rel="stylesheet" href="css/estilos.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Roboto+Condensed:ital,wght@1,700&display=swap" rel="stylesheet">
 </head>
 <body>
     <header>
@@ -39,7 +42,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>
@@ -66,7 +69,19 @@ <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..a482dc6 100644
--- a/css/estilos.css
+++ b/css/estilos.css
@@ -2,7 +2,17 @@
     margin: 0;
     padding: 0;
   }
-  
+
+  html {font-family: 'Open Sans', sans-serif;
+font-family: 'Roboto Condensed', sans-serif;}
+
+ body{ background-color: rgb(255, 255, 255);}
+ h1{
+  text-align: center;
+ }
+  
+  h2
+  .color{background-color: aqua;}
   .clear{
     clear: both;
   }
@@ -40,7 +50,7 @@
   }
   
   .slidemenu label .icon{
-    font-size: 20px;
+    font-size: 25px;
     border: solid 2px #333;
     text-align: center;
     height: 50px;
@@ -88,4 +98,32 @@
   .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%; }
+
+  .nav { background-color: aqua;}
+
+  .dark-mode-button{
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    padding: 20px;
+    background:white;
+  }
+
+  html.dark-mode{
+    filter: invert(100%);
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
   
\ No newline at end of file
