/* ---------------------------------------------
  1. CSS‑variabelen
  ------------------------------------------------- */
:root {
    /* Colours */
    --red: #de4500; /* rode achtergrond */
    --green: #f2fce8; /* lichte blauwe/groene pale kings blue */
    --black: #2e3336; /* grijs/zwart */
    /* Border */
    --border-w: 3px;

    /*   2. Global reset & base styles */

    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }



    /* body page */

    html,
    body {
        background-color: var(--red);
        color: var(--red);
        font-family: "Tamil Sangam MN", "Andale Mono", monospace;
        line-height: 1.5;
        scroll-behavior: smooth;
    }

    /* headers */

    h1 {
        font-family: Andale Mono, monospace;
    }

    h2 {
        font-family: Andale Mono, monospace;
    }

    h3 {
        font-family: Andale Mono, monospace;
    }
    canvas {
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 400px;
        background-color: var(--black);
    }

    /* ----- hoofdcontent -------------------------------------------- */

    .content {
        margin: auto;
        padding: 30px;
        font-family: "Tamil Sangam MN", "Andale Mono", monospace;
        line-height: 1.6;
        color: var(--black);
        background-color: var(--green);
    }

    section {
        max-width: 960px;
        margin: 1rem auto;
        padding: 1.5rem;
        background-color: var(--red);
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05);
    }

    /* image borders and max width */

    section img {

        display: block;
        margin: 0 auto;
        width: 100%; /* full width on mobile, constrained by container */
        max-width: 500px; /* keep them reasonable on large screens */
        border: var(--border-w) solid var(--black);
        padding: 4px;

    }

    /* top navigation */

    nav {
        display: flex;
        margin-bottom: 1rem;
        justify-content: center;
        background: var(--black);
        border-bottom: var(--red);
        color: var(--green);
        padding: 0.5rem;
        flex-wrap: wrap; /* allow wrapping on very narrow screens */
    }

    nav a {
        color: var(--red);
        text-decoration: none;
        padding: 0.5rem 1rem;
        margin: 0 0.25rem;
        border: var(--border-w) dotted transparent;
        transition: all 0.15s ease-in-out;
    }

    nav a:hover,
    nav a:focus {
        color: var(--red);
        border-color: var(--red);
        background-color: rgba(0, 0, 0, 0.03);
    }




    /* footer */

    footer {
        background: var(--red);
        padding: 1rem 0;
        border-top: var(--border-w);
        text-align: center;
        font-size: 0.9rem;
        color: var(--black);
    }

    footer .bottom-nav {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    footer .legal {
        margin-top: 0.0rem;
    }
}
    /* ------------------------------------------------------------------
       Small tablets & large phones – max‑width 750 px
       ------------------------------------------------------------------ */
    @media (max-width: 750px) {
        /* Give the main wrapper a bit tighter breathing room */
        .content {
            padding: 20px; /* matches the original intent */
        }

        /* Scale down sections a touch so they don’t hug the edges */
        section {
            margin: 1rem auto;
            padding: 1.2rem;
        }

        /* Reduce canvas width for narrower viewports */
        canvas {
            width: 100%;
            max-width: 350px; /* still big enough for a decent drawing */
        }
    }

    /* ------------------------------------------------------------------
       Phones – max‑width 600 px
       ------------------------------------------------------------------ */
    @media (max-width: 600px) {
        /* Nav becomes a vertical stack – perfect for thumb‑reach */
        nav {
            flex-direction: column;
            align-items: stretch; /* fill the width */
        }

        nav a {
            margin: 0.2rem 0; /* tighter vertical spacing */
            text-align: center;
        }

        /* Sections get a slimmer margin/padding combo */
        section {
            margin: 0.8rem;
            padding: 0.8rem;
        }

        .content {
            padding: 15px; /* a little cozier for tiny screens */
        }

        /* Make images stay within the reduced viewport */
        section img {
            max-width: 100%; /* full width on phone, but respects container */
        }

        /* Footer text stays readable without crushing the layout */
        footer {
            font-size: 0.85rem;
            padding: 0.8rem 0;
        }
    }