svg {
    max-width: 100%;
    height: auto;
}
h1{
    font-family: "Architects Daughter", cursive;
    color: var(--pico-contrast);
}
h2, h3, h4, h5, aside a {
    font-family: "Architects Daughter", cursive;
    color: var(--pico-primary);
}
.rand {
    fill: None;
}

.ai_letters_style {
    fill: var(--pico-primary);
}

.circuitgaatje {
    fill: var(--pico-background-color);
    stroke: var(--pico-primary);
    stroke-width: 3px;
}

.circuitlijn {
    stroke: var(--pico-primary);
    stroke-width: 4px;
    stroke-linejoin: round;
    fill: None;
}

.logo-container {
    height: 4.5em;
}
.logo-container svg {
    height: 100%;
    width: auto;
}

/* Sticky navbar */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--pico-background-color);
    border-bottom: 1px solid var(--pico-border-color);
    margin-bottom: 2em;
}

nav a{
    font-family: "Architects Daughter", cursive;
}


/* Table of Contents - Simple styling only */
.toc {
    position: sticky;
    top: 8em;
    align-self: start;
    padding: 0 0 0 2em;
}

.toc nav {
    position: static;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

.toc h3 {
    font-size: 0.9em;
    color: var(--pico-muted-color);
    margin-bottom: 0.5em;
}

.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc a {
    display: block;
    padding: 0.15em 0;
    color: var(--pico-muted-color);
    text-decoration: none;
    font-size: 0.9em;
}

.toc a:hover,
.toc a.active {
    color: var(--pico-primary);
}

/* Mobile: TOC appears under navbar */
@media (max-width: 64em) {
    .toc {
        position: static;
        padding: 1em;
        margin-bottom: 2em;
        background: var(--pico-card-background-color);
        border-radius: var(--pico-border-radius);
        border: 1px solid var(--pico-border-color);
    }
    
    .toc-column {
        order: -1; /* Move TOC to appear first */
    }
}

footer p{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}