:root {
  /* Main font - professional and modern */
  --font-primary: 'Inter', 'Roboto', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Monospace variant for code blocks and technical content */
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', Consolas, monospace;
  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  /* Font sizes */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  /* Colors */ /* https://coolors.co/eee8ec-9186ab-673a44-003287-001e51 */
  --color-off-white: #eee8ec; /* white color */
  --color-off-white-opaque: #eee8ec98; /* white color low opacity */
  --color-off-white-transparent: #eee8ec44; /* white color high opacity */
  --color-light-accent: #9186ab; /* Light accent color */
  --color-main-brand: #673a44; /* main color */ /* logo/brand - bordeaux */
  --color-dark-accent: #003287; /* Primary blue color */ /* IVA */
  --color-dark-shades: #001E51; /* darker blue color */ /* IVA - donker */
  --color-regular: #999999; /* Standard color for buttons and template input field areas */ /* grey */
  --color-primary: #694146; /* Primary color for buttons and links */ /* bordeaux */
  --color-info: #112446; /* Info color for alerts and messages */ /* blue */
  --color-succes: #558e4d; /* Success color for alerts and messages */ /* green */
  --color-warning: #d27e15; /* Warning color for alerts and messages */ /* orange */
  --color-danger: #f44336; /* Danger color for alerts and messages */ /* red */
  /* Sizing */
  --size-xs: 0.5rem; /* 8px */
  --size-header: 8rem; /* 128px */
  --size-logo: 6rem; /* 96px */
  --size-icon: 1.75rem; /* 28px */
  --size-footer: 24rem; /* 384px */
  --size-footer-logo: 10rem; /* 160px */
  --size-footer-icon: 2.5rem; /* 40px */
  --size-container: 32rem; /* 512px */
  --size-container-img: 24rem; /* 384px (512px - 128px) */
  /* Spacing */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-base: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */
  --spacing-3xl: 4rem; /* 64px */
  --spacing-mega: 16rem; /* 256px */
  /* Border radius */
  --border-radius-sm: 0.125rem; /* 2px */
  --border-radius-base: 0.25rem; /* 4px */
  --border-radius-lg: 0.5rem; /* 8px */
  --border-radius-xl: 0.75rem; /* 12px */
  --border-radius-2xl: 1rem; /* 16px */
  --border-radius-3xl: 1.5rem; /* 24px */
  --border-radius-full: 9999px; /* Circle */
  
  /* Common Rules */
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  font-family: var(--font-primary);
}

* {
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-dark-accent);
  color: var(--color-dark-accent);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  font-family: var(--font-primary);
  width: 100%;
  height: 100%;
  min-height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

main {
  background-color: var(--color-off-white);
  min-height: fit-content;
  --header-height: 0rem;
  --footer-height: 0rem;
}

.hidden {
  display: none !important;
}