adaptative

style.css

@@ -1,3 +1,4 @@
+/* Estilos básicos */
 body {
     display: flex;
     flex-direction: column;
@@ -6,9 +7,36 @@ body {
     height: 100vh;
     margin: 0;
     font-family: Arial, sans-serif;
-    text-emphasis-color: #444;
+    color: #444; /* Cambié text-emphasis-color por color */
     background-color: #000000;
+    padding: 1rem; /* Añadí padding para evitar que el contenido toque los bordes en móviles */
+    box-sizing: border-box; /* Para incluir el padding en el tamaño total */
 }
+
+/* Estilos para pantallas pequeñas (móviles) */
+@media (max-width: 600px) {
+    body {
+        font-size: 0.9rem; /* Ajustar el tamaño de la fuente para pantallas pequeñas */
+        padding: 0.5rem; /* Reducir el padding en pantallas pequeñas */
+    }
+}
+
+/* Estilos para pantallas medianas (tablets) */
+@media (min-width: 601px) and (max-width: 1024px) {
+    body {
+        font-size: 1rem; /* Tamaño de fuente base para tablets */
+        padding: 1rem; /* Padding para tablets */
+    }
+}
+
+/* Estilos para pantallas grandes (escritorios) */
+@media (min-width: 1025px) {
+    body {
+        font-size: 1.1rem; /* Tamaño de fuente ligeramente mayor para escritorios */
+        padding: 2rem; /* Más espacio en los bordes para pantallas grandes */
+    }
+}
+
 .title {
     font-size: 36px;
     margin-bottom: 20px;