body{
    font-family: Arial;
    margin:0;
    background:#ffffff;
    line-height: 1.6;
}

header{
    background:#6C4ED9;
    color:rgb(255, 255, 255);
    text-align:left;
    padding:30px;
}

.blok{
    padding:40px;
    max-width:900px;
    margin:auto;
}

.info{
    background:rgb(255, 255, 255);
    padding: 15px;
    border-left:15px solid #6C4ED9;
    margin:15px 0;
}

.grap{
    color:#FF9F1C;
    font-style:italic;
}

.zijblokken{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    padding:30px;
}

.side{
    background:white;
    padding:20px;
    border-radius:12px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.quiz{
    background:#E9E1FF;
    padding:40px;
}

.q{
    background:white;
    padding:15px;
    margin:10px 0;
    border-radius:10px;
}

.btn{
    background:#FF9F1C;
    border:none;
    padding:12px 18px;
    border-radius:8px;
    color:white;
    font-size:16px;
    cursor:pointer;
}

footer{
    background:#222;
    color:white;
    text-align:center;
    padding:30px;
}

footer a{
    color:#FF9F1C;
    text-decoration:none;
}

/* mobiel */
@media(max-width:600px){
    .blok{padding:20px;}
}

/* MENU */
.menu{
    background:#6C4ED9;
    padding:10px 20px;
    display:flex;
    align-items:center;
    gap:20px;
}

.menu a{
    color:white;
    text-decoration:none;
    font-weight:bold;
}

/* LAYOUT LINKS + RECHTS */
.top{
    display:flex;
    gap:40px;
    padding:40px;
    align-items:flex-start;
}

.links{
    flex:2;
    display:flex;
    flex-direction: column; /* tekst onder elkaar */
    gap:10px; /* ruimte tussen tekstblokken */
}

.rechts{
    flex:1;
    display:flex;
    flex-direction: column; /* boxen onder elkaar */
    gap:20px;
}

/* BOXEN */
.box{
    background:#6C4ED9;
    padding:20px;
    border-radius:12px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* animatie */
}

.box:hover{
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgb(134, 72, 146);
}

.groot{
    height:200px;
}

@media(max-width:800px){
    .top{
        flex-direction: column; /* tekst boven boxen op mobiel */
    }
}

.links h2{
color:#6C4ED9;
margin-top:30px;
}

.links p{
line-height:1.6;
}

.links ul{
margin-left:20px;
margin-top:10px;
}

hr{
border:none;
border-top:1px solid #ddd;
margin:30px 0;
}

.grap{
    color:#FF9F1C;
    font-style:italic;
    margin:10px 0;
    display:block;
}

.menu{
background:#6C4ED9;
padding:15px;
text-align:center;

position: sticky;
top: 0;

z-index: 1000;
}

.menu a{
color:white;
text-decoration:none;
margin:0 15px;
font-weight:bold;
transition: all 0.3s ease; /* animatie toevoegen */
}

.menu a:hover{
text-decoration:underline;
color: #5900ff; /* subtiele kleurverandering */
}

.logo{
height:50px;
}

.side {
    background: rgba(234, 197, 245, 0.9); /* wit met 90% opacity */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgb(184, 111, 187);
}