:root {
  --background: linear-gradient(#ffffff, #eef4ff);
  --background-hero: #fffcfc;
  --section-background: #ffffffd9;
  --card-background: #ffffff;
  --header-bg: #e4e4e4;
  --text: #000000;
  --second-text: #333333;
  --text-light: #ffffff;
  --third-color: #0868a0;
  --link-color: #2474d6;
  --button-bg: linear-gradient(135deg, #104bac, #1163c8);
  --radius: 16px;
}

[data-theme="dark"] {
  --background:linear-gradient(#1a1a1a, #2a2a3a);
  --background-hero: #201c24;
  --section-background: #262628; /* iets zachter dan #2A2A2A */
  --card-background: #2f2f35; /* iets lichter voor contrast */
  --header-bg: linear-gradient(135deg, #1e1e1e, #2a2a3a); /* subtiele gradient voor diepte */
  --text: #ffffff;
  --second-text: #e2e2e2;
  --text-light: #f0f0f0; /* beter contrast op donker */
  --third-color: #0868a0;
  --link-color: #2474d6;
  --button-bg: linear-gradient(135deg, #104bac, #1163c8);
  --radius: 16px;
}

html, body {
  font-family: 'Segoe UI', sans-serif;
  background: var(--background);
  color: var(--text);
  transition: background-color 0.3s, color 0.3s;
  min-height: 100vh;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

main {
    width: 100%;
    height: 100%;
    max-width: 100%;
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 152px;
}

button, .button {
    background: var(--button-bg);
    color: white;
    padding: 12px 32px;
    margin: 24px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    z-index: 1;
    border: none;
    text-decoration: none;
    border-radius: 50px;
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: block;
    width: fit-content;
    text-align: center;
    align-self: center;
    justify-self: center;
}

button:hover, .button:hover {
    background: linear-gradient(135deg, #0D4A9B, #1155A0);
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

button:active, .button:active {
    transform: scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

section {
  padding-top: 32px;
  padding-bottom: 32px;
}