* {
    box-sizing: border-box;
}

#content {
    max-width: 70ch; 
    margin: 4rem auto;
    padding: 0 2rem;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.1rem;
    color: #3A3532;
    background-color: #F8EEEC;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    margin: 3rem 0 1.2rem 0;
    color: #2D2926;
    line-height: 1.2;
    font-weight: 700;
}

p {
    margin-bottom: 1.5rem;
}

pre.src {
    font-family: "Iosevka Nerd Font", monospace;
    background-color: #F0E4E2;
    padding: 1.2rem;
    border-radius: 8px;
    overflow-x: auto;
    max-height: 500px;
    border: 1px solid rgba(0,0,0,0.05);
    display: block;
    width: 100%;
    clear: both;
    margin: 1.5rem 0;
}

code {
    font-family: "Iosevka Nerd Font", monospace;
    background-color: #F0E4E2;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
}

a {
    color: #9D4D3F;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #B08968;
    border-bottom: none;
}

#content ul {
    list-style: none;
    padding-left: 0;
}

#content li {
    margin-bottom: 0.2rem;
    font-family: "Iosevka Nerd Font", monospace;
}

#content li a {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 0.5rem 0.8rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    width: 100%;
}

#content li a:hover {
    background-color: #F0E4E2;
}

.date-tab {
    display: inline-block;
    width: 100px;
    color: #8A817C;
    flex-shrink: 0;
}

#postamble {
    margin-top: 5rem;
    padding-top: 2rem;
    border-top: 1px solid #EADDDA;
    font-size: 0.8rem;
    color: #8A817C;
    text-align: center;
}

#postamble p {
    margin: 0.2rem 0;
}

.validation {
    display: none;
}

#preamble {
    max-width: 70ch;
    margin: 2rem auto 0 auto;
    padding: 0 2rem;
}

.nav {
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.nav a {
    display: inline-block;
    padding: 0.5rem 1rem;
    color: #8A817C;
    text-decoration: none;
    font-family: "Iosevka Nerd Font", monospace;
    transition: color 0.2s ease;
}

.nav a:first-child {
    margin-left: -1rem; 
}

.nav a:last-child {
    margin-right: -1rem;
}

.nav a:hover {
    color: #9D4D3F;
}

/* Monsieur Carle, si vous passez par là, je sais que vous vous ferez
   un malin plaisir de juger mon css un peu dégueu en terme de code,
   hésitez pas ça me dérange pas /*