:root {
            --bg-color: #0f172a; --card-bg: #1e293b; --text-color: #f8fafc; --text-muted: #94a3b8;
            --accent-blue: #38bdf8; --accent-green: #4ade80; --accent-purple: #c084fc; --accent-orange: #fb923c;
            --accent-yellow: #fde047; --accent-pink: #f43f5e; --accent-teal: #14b8a6; --accent-indigo: #6366f1; --accent-lime: #84cc16; --border-color: #334155;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background-color: var(--bg-color); color: var(--text-color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; min-height: 100vh; padding: 2rem 1rem; }
        .container { max-width: 1600px; margin: 0 auto; }

         /* --- HEADER STYLING --- */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: rgba(13, 17, 23, 0.85); /* Iets transparanter voor het effect */
            backdrop-filter: blur(8px);
            padding: 15px 0 15px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            z-index: 999;
            border-bottom: 1px solid #30363d; /* Strakke onderrand voor de header zelf */
        }

        header h1.logo {
            font-size: 2.8rem !important;
            font-weight: 800 !important;
            letter-spacing: -1px !important;
            color: #ffffff !important;
            margin: 0 0 5px 0 !important;
        }

        header h1.logo span { color: #58a6ff !important; }
        header h1.logo small { font-size: 1.4rem !important; color: #8b949e !important; }
        header p { color: #8b949e !important; margin: 0; font-size: 1rem; }


        /* --- STAP 2: DIGITALE KLOK IN DE HEADER (LAGER EN MET INTERACTIE) --- */
        .clock-container {
            position: absolute !important;
            top: 75px !important; /* Verplaatst de klok lager in de zwarte headerbalk */
            right: 40px !important;
            
            /* De highlight box */
            background-color: #1c2128 !important; 
            border: 1px solid #444c56 !important; 
            padding: 8px 16px !important;
            border-radius: 6px !important;
            
            /* Blauwe cijfers */
            color: #58a6ff !important;
            font-family: 'Courier New', Courier, monospace !important;
            font-size: 1.2rem !important;
            font-weight: bold !important;
            letter-spacing: 1px !important;
            z-index: 1000 !important;
            display: block !important;
            transition: all 0.3s ease-in-out !important;
        }

        /* Muisinteractie: Blinken/pulseren wanneer je eroverheen hovert */
        .clock-container:hover {
            border-color: #58a6ff !important;
            cursor: pointer !important;
            /* Start de knipperende blauwe gloed-animatie */
            animation: clockBlink 1s infinite alternate !important;
        }

        /* De animatie voor het blinken van de box en tekst-gloed */
        @keyframes clockBlink {
            0% {
                box-shadow: 0 0 4px rgba(88, 166, 255, 0.2) !important;
                text-shadow: 0 0 2px rgba(88, 166, 255, 0.2) !important;
            }
            100% {
                box-shadow: 0 0 15px rgba(88, 166, 255, 0.8) !important;
                text-shadow: 0 0 10px rgba(88, 166, 255, 0.9) !important;
            }
        }


        /* --- DYNAMIJSCHE DIAGONALE OLIJFGROENE LIJN --- */
        .diagonal-line {
            position: fixed;
            top: 23vh; /* Positioneert de lijn op exact 1/4 van de schermhoogte vanaf de bovenkant */
            left: -10%;
            width: 120%; /* Iets breder om de hoeken buiten het scherm te laten vallen */
            height: 3px; /* De gevraagde dunnere lijn */
            background-color: #606c38; /* Olijfgroene basis */
            
            /* Maakt de lijn schuin: van rechtsboven naar linksonder (-4 graden) */
            transform: rotate(-4deg); 
            
            /* Een subtiele olijfgroene gloed onder de dunne lijn voor diepte */
            box-shadow: 0 0 12px rgba(96, 108, 56, 0.7); 
            
            z-index: 1; /* Ligt achter de zwevende header en kaarten, als een achtergrondeffect */
            pointer-events: none; /* Zorgt dat je er gewoon doorheen kunt klikken */
        }

        /* --- RUIMTE VOOR DE KAARTEN --- */
        body {
            padding-top: 180px !important; /* Ruimte zodat de kaarten mooi onder de header starten */
            background-attachment: fixed;
        }

        /* Zorg dat je kaarten een hogere z-index hebben zodat ze netjes over de achtergrondlijn scrollen */
        .container {
            position: relative;
            z-index: 10;
        }



        /* --- DE DIAGONALE LIJNEN (VOLLEDIG DOORLOPEND NAAR LINKS) --- */
        .double-diagonal-lines {
            position: fixed;
            top: 130px; 
            left: -30% !important; /* Ruim over de linkerrand heen getrokken */
            width: 160% !important; /* Extra lang gemaakt zodat hij gegarandeerd het scherm verlaat */
            display: flex;
            flex-direction: column;
            gap: 18px; 
            transform: rotate(-14deg); 
            transform-origin: right top;
            z-index: -1 !important; 
            pointer-events: none;
        }

        /* De dunne donkergroene lijn (ongeveer 1mm op het scherm) */
        .line-thin {
            height: 4px;
            background-color: #2b3a1a; 
            width: 100%;
        }

        /* De dikkere olijfgroene lijn (ongeveer 10mm op het scherm) */
        .line-thick {
            height: 28px;
            background-color: #606c38; 
            width: 100%;
            opacity: 0.35 !important; /* Maakt de lijn vager en zachter op de achtergrond */
            box-shadow: 0 4px 15px rgba(96, 108, 56, 0.3);
        }

        

        /* --- CLOUDFLARE BANNER CORRECTIE (TEGEN HOOGTE EN BREEDTE) --- */
.cloudflare-card {
    border-top: 4px solid #f48120 !important; 
    min-height: auto !important; 
    height: fit-content !important; 
    padding: 16px !important;
}
.cloudflare-header {
    display: flex !important;
    flex-direction: row !important; /* Dwingt logo en tekst naast elkaar */
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 5px !important;
    width: 100% !important;
}

/* VOORKOMT DAT HET LOGO RECHTSTREEKS WORDT UITGEREKT */
.cf-logo {
    font-size: 1.4rem !important;
    display: inline-block !important;
    width: 25px !important; /* Dwingt een vaste, kleine breedte af */
    max-width: 25px !important;
    text-align: center !important;
    flex-shrink: 0 !important; /* Zorgt dat het grid het logo niet kan vervormen */
}

.cloudflare-header h3 {
    margin: 0 !important;
    font-size: 1.1rem !important;
}

.cloudflare-card p {
    font-size: 0.85rem !important;
    margin: 0 0 10px 0 !important;
}





        @media (min-width: 1200px) { .clock-container { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); margin-top: 0; } }
        .main-wrapper { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
        @media (min-width: 1200px) { .main-wrapper { grid-template-columns: 200px 1fr 200px; } }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; }
        .card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); display: flex; flex-direction: column; justify-content: space-between; }
        .card:hover { transform: translateY(-2px); }
        .card.profile-card { border-top: 4px solid var(--accent-blue); }
        .card.about-card { border-top: 4px solid var(--accent-teal); }
        .card.projects-card { border-top: 4px solid var(--accent-green); }
        .card.faith-card { border-top: 4px solid var(--accent-yellow); }
        .card.lab-card { border-top: 4px solid var(--accent-purple); }
        .card.systems-card { border-top: 4px solid var(--accent-orange); }
        .card.hobby-card { border-top: 4px solid var(--accent-blue); }
        .card.privacy-card { border-top: 4px solid var(--accent-pink); }
        .card.media-card { border-top: 4px solid var(--accent-indigo); }
        .card.random-card { border-top: 4px solid var(--accent-lime); }
        .card.ad-card { border-top: 4px solid var(--accent-orange); background-color: rgba(30, 41, 59, 0.4); text-align: center; height: fit-content; }
        .card h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
        .card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.25rem; flex-grow: 1; }
        .sport-card { border-top: 4px solid #00f2fe !important; /* Fel sportief cyaan/blauw */ }
        .familie-card { border-top: 4px solid #ff758c !important; /* Warme familie roze/oranje tint */ }
        .link-list { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
        .btn { display: flex; align-items: center; justify-content: space-between; background-color: #0f172a; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-color); padding: 0.75rem 1rem; text-decoration: none; font-weight: 500; font-size: 0.95rem; }
        .btn:hover { background-color: #1e293b; border-color: var(--text-muted); }
        .btn .tag { font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 600; text-transform: uppercase; }
        .tag-php { background-color: rgba(74, 222, 128, 0.1); color: var(--accent-green); }
        .tag-python { background-color: rgba(56, 189, 248, 0.1); color: var(--accent-blue); }
        .tag-secure { background-color: rgba(192, 132, 252, 0.1); color: var(--accent-purple); }
        .tag-public { background-color: rgba(253, 224, 71, 0.1); color: var(--accent-yellow); }
        .tag-sys { background-color: rgba(251, 146, 60, 0.1); color: var(--accent-orange); }
        .tag-info { background-color: rgba(20, 184, 166, 0.1); color: var(--accent-teal); }
        .tag-status { background-color: rgba(244, 63, 94, 0.1); color: var(--accent-pink); }
        .tag-media { background-color: rgba(99, 102, 241, 0.1); color: var(--accent-indigo); }
        .tag-misc { background-color: rgba(132, 204, 22, 0.1); color: var(--accent-lime); }
        .tag.tag-secure { background-color: rgba(163, 113, 247, 0.2);color: #a371f7;border: 1px solid #a371f7; }
        .tag.tag-private { background-color: rgba(218, 54, 51, 0.2);color: #da3633;border: 1px solid #da3633; }
        footer {
            margin-top: 60px;
            padding: 20px 0;
            border-top: 1px solid #30363d;
            width: 100%;
            
            /* Forceert volledige centrering op de pagina */
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            
            color: #8b949e;
            font-size: 0.85rem;
        }

        /* Zorgt dat alle paragrafen binnen de footer ook gecentreerd worden */
        footer p, .footer-content p {
            margin: 6px 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important; /* Gecentreerd ten opzichte van elkaar */
            width: 100%;
        }

        .footer-builder strong {
            color: #ffffff;
            margin-left: 4px;
        }

        /* Groen live status-bolletje */
        .status-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #2ea44f;
            border-radius: 50%;
            margin-right: 8px;
            box-shadow: 0 0 8px #2ea44f;
        }