:root {
    /* Color palette */
    --accent-color: #000;
    --primary-color: #000;
    --secondary-color: #FFF;
    --va-color-1: #E04E3E;
    --va-color-2: #FAB845;
    --va-color-3: #BCB2A3;
    --link-color: var(--va-color-1);
    --link-color--hover: var(--va-color-2);

    --black: #000;
    --gray-dark: #333;
    --gray-middle: #A2A2A2;
    --gray-light: #F7F7F7;
    --white: #FFF;

    --font-darkest: #111;
    --font-dark: #333;
    --font-light: #F7F7F7;
    --font-lightest: var(--white);

    /* Typography */
    --font: "Karla", Arial, sans-serif;
    --font--heading: "Libre Baskerville", Times New Roman, serif;
    --font--links: "Karla", Arial, sans-serif;

    --font-weight--heading: 700;

    --font-size: 100%;
    --font-size--footer: 0.875rem;
    --font-size--footer-title: 1rem;

    /* Menu */
    /* --menu-title: 'Valikko'; */
    --user-menu-bg: var(--primary-color);
    --nav-menu-bg: var(--secondary-color);
    --dropdown-bg: var(--secondary-color);
    --dropdown-color: var(--black);
    --menu-hover-bg: transparent;
    --menu-hover-color: var(--primary-color);
    --menu-active-color: var(--black);

    /* Hero */
    --hero-overlay: rgba(0, 0, 0, 0.5);

    /* Content */
    --narrow-content-width: 70ch;
    --content-gap: 1.25rem;

    /* Footer */
    --footer-columns--mobile: 1fr;

    /* Site backgrounds */
    --body-bg: #fff;
    --content-bg: var(--body-bg);
    --footer-bg: var(--va-color-3);
    --footer-border: var(--va-color-1);

    /* Mobile menu colors */
    --mobile-menu-bg: var(--nav-menu-bg);
    --menu-toggler-color: var(--black);

    /* Sizes */
    --branding-height: 90px;
    --hero-height: 60vh;
    --secondary-hero-height: 50vh;

    /* Bootstrap */
    --bs-gutter-x: 1.25rem;

    /*Link images */
    --npa-border: 7px;   /* the border thickness*/
    --npa-offset: 10px;   /* control the offset*/
    --npa-gap: 5px;       /* the gap on hover */
  
    --npa_c: var(--npa-color-1) var(--npa-border), #0000 0 calc(100% - var(--npa-border)),var(--npa-color-1) 0;
    --npa_c1: var(--npa-color-1) var(--npa-border), #0000 0 calc(100% - var(--npa-border)),var(--npa-color-1) 0;
    --npa_c2: var(--npa-color-2) var(--npa-border), #0000 0 calc(100% - var(--npa-border)),var(--npa-color-2) 0;
    --npa_c3: var(--npa-color-3) var(--npa-border), #0000 0 calc(100% - var(--npa-border)),var(--npa-color-3) 0;
    --npa_c4: var(--npa-color-4) var(--npa-border), #0000 0 calc(100% - var(--npa-border)),var(--npa-color-4) 0;
    --npa_c5: var(--npa-color-5) var(--npa-border), #0000 0 calc(100% - var(--npa-border)),var(--npa-color-5) 0;
    --npa_c6: var(--npa-color-6) var(--npa-border), #0000 0 calc(100% - var(--npa-border)),var(--npa-color-6) 0;
    --npa_o: calc(3*var(--npa-offset));
  }

#cookiesjsr {
  --default-margin: 1em;
  --font-size-reset: 0.7rem;
  --btn-font-color: var(--white);
  --btn-border-color: #fff;
  --btn-bg-color: var(--va-color-1);
  --btn-prime-font-color: var(--gray-dark);
  --btn-prime-border-color: #fff;
  --btn-prime-bg-color: #fff;
  --btn-inv-font-color: var(--va-color-2);
  --btn-inv-border-color: var(--va-color-2);
  --btn-inv-bg-color: #fff;
  --btn-prime-inv-font-color: #fff;
  --btn-prime-inv-border-color: var(--va-color-2);
  --btn-prime-inv-bg-color: var(--va-color-2);
  --link-list-font-color: #fff;
  --link-list-separator-color: #fff;
  --banner-logo-offset: 100px;
  --banner-bg-color: var(--va-color-3);
  --banner-font-color: #fff;
  --layer-header-height: 3.5em;
  --layer-header-bg-color: #fff;
  --layer-header-font-color: var(--va-color-2);
  --layer-body-bg-color: #fff;
  --layer-tab-bg-color: #fff;
  --layer-tab-font-color: var(--va-color-1);
  --layer-tab-active-bg-color: var(--va-color-1);
  --layer-tab-active-font-color: #fff;
  --layer-bg-dark: var(--va-color-2);
  --layer-font-light: #fff;
  --layer-font-dark: var(--gray-dark);
  --layer-border-color: var(--va-color-1);
  --layer-footer-bg-color: #fff;
  --layer-footer-font-color: var(--va-color-1);
  --layer-footer-height: 4.5em;
  --switch-border-color: var(--va-color-1);
  --switch-handle-color: #fff;
  --switch-bg-off: #fff;
  --switch-bg-on: #0a0;
  --switch-width: 45px;
  --switch-height: 20px;
  --switch-always-on-font-color: #0a0;
  --switch-always-on-bg-color: #fff;
}

/* Tablet */
@media (min-width: 768px) {
  :root {
    --footer-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 960px) {
  :root {
    --content-gap: 3.75rem;
  }
}