body {
    font-family: 'Verdana';
    font-weight: 400;
    font-size: small;
    margin: 0;
    padding: 0;
    background-color: #faf8f4;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px;
}

.about-container {
    display: flex; /* Colocar los elementos en una fila */
    align-items: center; /* Alinear verticalmente */
    justify-content: space-between; /* Espaciar los elementos */
    gap: 20px; /* Espaciado entre texto e imagen */
    margin: 10px 0; /* Reducir espacio vertical */
}

/* Estilo para el texto */
.about-text {
    flex: 1; /* El texto ocupa el espacio restante */
    text-align: left; /* Alinear texto a la izquierda */
    margin: 0; /* Reducir márgenes adicionales */
}

.row {
    display: flex;
}
.column {
    flex: 20%;
    padding: 5px;
}


header {
    color: #333;
    text-align: center;
    padding: 0px;
}

header h1 {
    margin: 0;
    font-family: 'Garamond', serif;
    color: #333;
}


section h2 {
    font-family: 'Garamond', serif;
    color: #333;

}

project {
    margin-bottom: 40px;
}

project img {
    max-width: 100%;
    height: auto;
}
#hola {
    width: 28px;
    vertical-align: middle;
    margin-top: 4px;
}

#me {
     /* The image will take 100% of the container's width */
    max-width: 25%; /* Ensure it doesn't exceed the container's width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures proper centering */
    margin: 0 auto; /* Center the image */
    width: 150px; /* Tamaño de la imagen */
    object-fit: cover; /* Ajustar el contenido */
    margin: 0;
    text-align: right;
}

nav {
    margin-top: 6px;
    font-size: small;
    text-align: center;
}

nav a {
    color: #333;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

.post-container {
    max-width: 800px;
    padding: 20px;
}

.post-list {
    list-style: none;
    padding: 0;
}

.post-list li {
    margin-bottom: 16px;
}

.post-date {
    color: #888;
    font-size: 0.85em;
    margin-right: 8px;
}

.post-meta {
    color: #888;
    font-size: 0.85em;
}

.post-content {
    line-height: 1.7;
    max-width: 680px;
}

/* ─── Projects page ────────────────────────────────────────────── */
.projects-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 24px 48px;
}

.projects-container h2 {
    font-family: 'Garamond', serif;
    color: #333;
    margin-bottom: 24px;
}

.projects-group {
    margin-bottom: 40px;
}

.projects-status {
    font-size: small;
    font-weight: normal;
    letter-spacing: 0.04em;
    margin: 0 0 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid #ddd;
}

.projects-status.in-progress { color: #b07d00; }
.projects-status.completed   { color: #4a4a4a; }

.project-card {
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}

.project-card:last-child { border-bottom: none; }

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.project-title {
    font-weight: bold;
    font-size: small;
}

.project-tools {
    font-size: 0.8em;
    color: #888;
    white-space: nowrap;
}

.project-desc {
    font-size: small;
    color: #444;
    margin: 0 0 8px;
    line-height: 1.6;
}

.project-links {
    font-size: 0.85em;
}

.project-links a {
    margin-right: 12px;
    color: #333;
}

.projects-empty {
    font-size: small;
    color: #aaa;
    margin: 0;
}

/* Dark mode adjustments */
html.dark .projects-container h2   { color: #d8d8d8 !important; }
html.dark .projects-status.completed { color: #aaa !important; }
html.dark .project-desc            { color: #bbb !important; }
html.dark .projects-status         { border-bottom-color: #444 !important; }
html.dark .project-card            { border-bottom-color: #333 !important; }

main {
    flex: 1;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 12px 0 16px;
    width: 100%;
}

footer p {
    margin: 0 0 6px;
}

/* ─── Dark mode toggle ─────────────────────────────────────────── */
.header-title-row {
    display: flex;
    align-items: center;
}

.header-title-row::before {
    content: '';
    flex: 1;
}

.header-title-row h1 {
    flex: 0 0 auto;
    margin: 0;
}

#dark-toggle {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.55;
    padding: 4px;
    line-height: 1;
}

#dark-toggle:hover { opacity: 1; }

/* ─── Dark mode colors ─────────────────────────────────────────── */
html.dark body,
html.dark body * {
    background-color: inherit;
    color: inherit;
}

html.dark body {
    background-color: #1a1a1a !important;
    color: #d8d8d8 !important;
}

html.dark header        { background-color: #1a1a1a !important; color: #d8d8d8 !important; }
html.dark header h1     { color: #d8d8d8 !important; }
html.dark header h1 a   { color: #d8d8d8 !important; }
html.dark nav a         { color: #aaa !important; }
html.dark section       { background-color: #1a1a1a !important; color: #d8d8d8 !important; }
html.dark section *     { color: #d8d8d8 !important; }
html.dark a             { color: #9ab !important; }
html.dark a:hover       { color: #bcd !important; }
html.dark b, html.dark strong { color: #e8e8e8 !important; }
html.dark footer        { background-color: #111 !important; color: #aaa !important; }
html.dark footer *      { color: #aaa !important; }
html.dark .post-date,
html.dark .post-meta    { color: #777 !important; }

/* ─── Responsive (all screen sizes) ───────────────────────────── */
* { box-sizing: border-box; }

/* Images and iframes never overflow their container */
img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* ─── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    html, body { overflow-x: hidden; }

/* All text wraps properly inside table cells */
    td { word-wrap: break-word; overflow-wrap: break-word; }

    /* Fluid iframe with correct aspect ratio */
    iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    /* Stack cansat image grid into single column */
    .row { flex-direction: column; }
    .column { flex: 1 1 100%; }

    /* Containers: side padding */
    .container { padding: 0 16px; }

}