nav a {
    color: #ff6ec7;
    text-decoration: none;
    font-weight: bold;
    margin: 0 15px;
    display: inline-block;
    position: relative;
    transition: color 0.3s, transform 0.3s;
}

nav a:hover {
    color: #00ffff;
    transform: translateY(-5px);
}

nav a::after {
    content: '';
    display: block;
    height: 3px;
    background: #ff6ec7;
    width: 0%;
    transition: width 0.3s;
}

nav a:hover::after {
    width: 100%;
}
header {
    display: flex;
    align-items: center; /* vertically center nav with logo dit is chat gpt meneer sorry hahah */
    justify-content: space-between; /* logo left, nav right Dit is chat gpt */
    padding: 20px 40px;
    background: rgba(30, 30, 47, 0.8); /* semi-transparent overlay for citypop vibe dit is weer gpt */
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.logo {
    width: 100px; /* adjust size as needed */
    height: auto;
}

nav a {
    color: #ff6ec7;
    text-decoration: none;
    font-weight: bold;
    margin: 0 15px;
    transition: color 0.3s, transform 0.3s;
    position: relative;
}

nav a:hover {
    color: #00ffff;
    transform: translateY(-5px);
}

nav a::after {
    content: '';
    display: block;
    height: 3px;
    background: #ff6ec7;
    width: 0%;
    transition: width 0.3s;
}

nav a:hover::after {
    width: 100%;
}
/* Hero section full width */
.hero {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

/* Cool image as hero */
.cool {
    width: 100%;        /* fills the width of the section */
    max-width: 1280px;  /* caps at your image resolution */
    height: auto;       /* keeps aspect ratio */
    box-shadow: 0 0 80px #ff77ff; /* neon glow */
}
/* =======================
   Body & achtergrond
   ======================= */
body.bodyhome {
    margin: 0;
    font-family: 'Arial', sans-serif;
    color: white;
    background: linear-gradient(135deg, #1e1e2f , #ff77ff); /* citypop vibe */
    text-align: center;
    min-height: 100vh;
}

/* =======================
   Header: logo + nav
   ======================= */
header {
    display: flex;                  /* logo links, nav rechts */
    align-items: center;            /* verticaal uitlijnen */
    justify-content: space-between; /* ruimte tussen logo en nav */
    padding: 20px 40px;
    background: rgba(30, 30, 47, 0.8);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* Logo */
.logo {
    width: 120px; /* grootte logo */
    height: auto;
}

/* Nav links */
nav a {
    color: #ff6ec7;
    text-decoration: none;
    font-weight: bold;
    margin: 0 15px;
    position: relative;
    transition: color 0.3s, transform 0.3s;
}

/* Hover effecten nav links */
nav a:hover {
    color: #00ffff;
    transform: translateY(-5px);
}

nav a::after {
    content: '';
    display: block;
    height: 3px;
    background: #ff6ec7;
    width: 0%;
    transition: width 0.3s;
}

nav a:hover::after {
    width: 100%;
}

/* =======================
   thumbnail sectie: grote afbeelding
   ======================= */
.thumbnail {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Hero afbeelding */
.cool {
    width: 100%;       /* vult de breedte van sectie */
    max-width: 1280px; /* niet groter dan originele resolutie */
    height: auto;      /* behoud verhoudingen */
    box-shadow: 0 0 80px #ff77ff;
}

/* =======================
   Titels
   ======================= */
h1 {
    font-family: comic sans ms, sans-serif;
    text-shadow: 0 0 10px #ff77ff, 0 0 20px #00ffff;
    margin: 40px 0 20px 0;
}

/* Regenboog animatie voor h2 */
@keyframes rainbow {
    0% { color: red; }
    14% { color: #ffa500; }
    28% { color: rgb(195,195,74); }
    42% { color: green; }
    57% { color: blue; }
    71% { color: indigo; }
    85% { color: violet; }
    100% { color: red; }
}

h2.rainbow {
    animation: rainbow 3s infinite;
}

/* =======================
   Alles dat ge met a ziet is een combinatie van serieuze AI
   maar ik heb mijn best gedaan om het te begrijpen en daarbij
   heb ik een beetje bijgeleerd. HTML deed ik volledig zelf sinds
   alle zaken die erin zaten al tijdens lessen werden uitgelegd.
   Css is dus  een grote mix van zelfstudie. Eigenlijk moest ik dit
   in een read.me zetten maar daar heb ik geen zin in dus ja.
   en wat onder staat is bijvoorbeeld AI puur omdat het niet
   nrml veel werk is om zelf te gaan schrijven maar de logica is zeker
   wel gesnopen ! Je kan mij altijd van alles gaan vragen erover.
   ======================= */
  footer {
    font-family: comic sans ms, sans-serif;
    margin-top: 50px;
    padding: 20px;
    background: rgba(30, 30, 47, 0.8);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
    color: #ff6ec7;}
@keyframes rainbowGlow {
    0% { color: white; text-shadow: 0 0 10px red, 0 0 20px red; }
    14% { color: white; text-shadow: 0 0 10px #ffa500, 0 0 20px #ffa500; }
    28% { color: white; text-shadow: 0 0 10px rgb(195,195,74), 0 0 20px rgb(195,195,74); }
    42% { color: white; text-shadow: 0 0 10px green, 0 0 20px green; }
    57% { color: white; text-shadow: 0 0 10px blue, 0 0 20px blue; }
    71% { color: white; text-shadow: 0 0 10px indigo, 0 0 20px indigo; }
    85% { color: white; text-shadow: 0 0 10px violet, 0 0 20px violet; }
    100% { color: white; text-shadow: 0 0 10px red, 0 0 20px red; }
}

h1 {
    margin-bottom: 40px;
    animation: rainbowGlow 3s infinite; /* animatie van 3s, oneindig herhalen */
    text-align: center;
}
/* =======================
   Ik ga niet liegen meneer, ik kan dit nog uitleggen
   tis  oprecht teveel voor mij om van scratch te schrijven vanaf
   wat u hier onder gaat zien. Dit is enkel als een proof of 
   concept met wat je uit kunt. Dit heeft me wel wat opzoektijd 
   gekost om te begrijpen hoe het werkt maar ik snap het nu wel.
   Referentie: https://codepen.io/Sitefall/pen/vdmJQz
   niets met AI deze, gewoon zelf wat classes aanmaken enz wat we zelf
   al hebben geleerd.
   ======================= */

    /* Body setup */
/* Table setup */
table {
    width: 90%;
    margin: 20px auto;
    border-collapse: collapse;
    box-shadow: 0 0 20px #ff00ff, 0 0 40px #ffff00; /* neon shadow wat ik wou */
}

/* Header cells */
th {
    background: linear-gradient(135deg, #ff00ff, #ffff00); /* pink to yellow gradient */
    color: black;
    padding: 10px;
    text-align: center;
    border: 2px solid #ff00ff;
}

/* Table cells */
td {
    background-color: #2e003e; /* dark background for contrast */
    color: white;
    padding: 10px;
    text-align: center;
    border: 1px solid #ff00ff;
}
div {
  text-align: center;
  text-shadow: #00ffff;
  
}
ul {
  margin-top: 5px;   /* reduce space above list */
  padding-left: 20px; /* optional: controls how far bullets sit from text */
}
.goals-list ul {
  list-style-position: inside; /* moves bullets closer to text */
  padding-left: 0;            /* removes the big left gap */
  margin: 0 auto;             /* centers the list block */
  display: inline-block;      /* keeps it centered properly */
  text-align: left;           /* text and bullets line up nicely */
}