:root {
    /* Color palette */
    --accent-color: #8A4246;
    --primary-color: #9d0030;
    --secondary-color: #575656;
    --link-color: #9d0030;
    --link-color--hover: #000;
    --box-shadow-color: rgb(82 90 101 / 10%);

    --black: #000;
    --gray-dark: #353535;
    --gray-middle: #484747;
    --gray-light: #a4a3a3;
    --white: #FFF;

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

    /* Typography */
    /*--font: 'Quicksand', Arial, Helvetica, sans-serif;
    --font--heading: 'Quicksand', Arial, Helvetica, sans-serif;
    --font--footer: 'Roboto Mono', Arial, Helvetica, monospace;*/
    --font: 'Poppins', Arial, Helvetica, sans-serif;
    --font--heading: 'Poppins', Arial, Helvetica, sans-serif;
    --font--footer: 'Poppins', Arial, Helvetica, 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(--gray-dark);
    --nav-menu-bg: var(--black);
    --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: 0.8rem;

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

    /* Site backgrounds */
    --body-bg: var(--white);
    --body-bg--second: var(--gray-light);
    --content-bg: var(--body-bg);
    --footer-bg: var(--black);

    /* Mobile menu colors */
    --mobile-menu-bg: var(--primary-color);
    --menu-toggler-color: var(--white);

    /* Sizes */
    --branding-height: 45px;
    --hero-height: 40vh;
    --secondary-hero-height: 40vh;

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


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

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

/* Mobile */
@media (max-width: 768px) {
  .hidden-xs {
    display: none !important;
  }
}