añadida paginas de proyecto y CV

public/css/styles.css

@@ -1,51 +1,130 @@
+/* Contenedor del artículo */
 article {
-    display: flex;
-    flex-flow: column;
-    line-height: 1lh;
-
-    background-color: whitesmoke;
-
-    img{
-        margin-top: 1lh;
-    }
-
-    h1{
-        font-size: 2rem;
-        margin-top:1lh;
-        text-align: center;
-    }
-
-    h1::before{
-        content:"# ";
-        opacity: 0.5;
-    }
-
-    h2{
-        font-size: 1.7rem;
-        margin-top:1lh;
-        text-align: left;
-    }
-
-    h2::before{
-        content:"## ";
-        opacity: 0.4;
-    }
-
-    ol, pre {
-        margin-top:0.8rem;
-    }
-
-    p{
-        line-height:1lh;
-        margin-top:0.5lh;
-    }
-
-    img{
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-        padding: 0%;
-        box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.5);
-    }
+    max-width: 800px;
+    padding: 1.5rem;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    font-family: "Inter", sans-serif;
+    color: #333;
+    line-height: 1.8;
 }
 
+/* Títulos */
+article h1 {
+    font-size: 2.5rem;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 1.5rem;
+    color: #222;
+}
+
+article h2 {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin: 2rem 0 1rem;
+    color: #444;
+}
+
+article h3 {
+    font-size: 1.4rem;
+    font-weight: 500;
+    margin: 1.5rem 0 1rem;
+    color: #555;
+}
+
+/* Párrafos */
+article p {
+    margin: 1rem 0;
+    font-size: 1.1rem;
+}
+
+/* Imágenes */
+article img {
+    width: 100%;
+    max-height: 400px;
+    object-fit: cover;
+    border-radius: 8px;
+    margin: 1.5rem 0;
+    display: block;
+}
+
+/* Listas */
+article ul {
+    list-style: disc inside;
+    margin: 1rem 0;
+    padding-left: 1rem;
+}
+
+article ol {
+    list-style: decimal inside;
+    margin: 1rem 0;
+    padding-left: 1rem;
+}
+
+/* Citas */
+article blockquote {
+    font-style: italic;
+    border-left: 4px solid #4b9ce2;
+    background: #f4faff;
+    padding: 0.75rem 1rem;
+    margin: 1.5rem 0;
+}
+
+/* Líneas divisorias */
+article hr {
+    border: none;
+    border-top: 2px solid #ddd;
+    margin: 2rem 0;
+}
+
+/* Enlaces */
+article a {
+    color: #4b9ce2;
+    text-decoration: underline;
+    transition: color 0.2s ease;
+}
+
+article a:hover {
+    color: #2563eb;
+}
+
+/* Código en línea */
+article code {
+    background: #f3f4f6;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-family: monospace;
+    font-size: 0.95rem;
+}
+
+/* Bloques de código */
+article pre {
+    background: #f3f4f6;
+    padding: 1rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    font-family: monospace;
+    font-size: 1rem;
+    margin: 1.5rem 0;
+}
+
+/* Secciones dentro del artículo */
+article section {
+    margin-top: 2rem;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+    article h1 {
+        font-size: 2rem;
+    }
+
+    article h2 {
+        font-size: 1.5rem;
+    }
+
+    article h3 {
+        font-size: 1.2rem;
+    }
+}