/* Algemene reset */
* { box-sizing:border-box; margin:0; padding:0; font-family: Arial, sans-serif; }
body { background:#f4f6f8; color:#333; line-height:1.5; }
a { text-decoration:none; color:#3498db; }
a:hover { text-decoration:underline; }

.card {
    background: #d1cdcf9c;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 20px;
	border: 3px solid #357206;
}

/* Container */
.container { max-width:1200px; margin:20px auto; padding:20px; background:#fff; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.05); }

/* Navigatie */
nav { background:#2c3e50; padding:10px 20px; border-radius:10px; margin-bottom:20px; display:flex; flex-wrap:wrap; }
nav a { color:#ecf0f1; margin-right:20px; font-weight:bold; padding:5px 10px; border-radius:5px; }
nav a.active { background:#2593eb; color:#2c3e50; }

/* Tabellen */
table { width:100%; border-collapse:collapse; margin-top:15px; }
table th, table td { border:1px solid #ddd; padding:5px; text-align:left; }
table th { background:#34495e; color:#fff; }
table tr:nth-child(even){ background:#f9f9f9; }
table tr:hover{ background:#f1f1f1; }

/* Formulieren */
form input[type="text"], form input[type="email"], form input[type="number"],form input[type="password"], form textarea, form select {
    width:100%; padding:10px; margin:5px 0 15px 0; border:1px solid #ccc; border-radius:5px;
}
form button {
    border:none; border-radius:5px; cursor:pointer; font-weight:bold;
    background: #2563eb;
    color: white;
	padding: 6px 10px;
}
form button:hover { background:#2980b9; }

/* Secties */
h2 { margin-bottom:15px; color:#2c3e50; }
p { margin-bottom:10px; }

/* Preview box */
.preview { border:1px solid #ccc; padding:10px; background:#fafafa; border-radius:5px; margin-top:10px; }

/* Responsiveness */
@media(max-width:768px) {
    nav { flex-direction: column; }
    nav a { margin-bottom:5px; }
    table, form { font-size:14px; }
}