:root {
  --bodywidth: 90%;
  --bodymaxwidth: 1600px;
  --bodysubmaxwidth: 1000px;

  --fontsize: 1em; /* Desktop font-size is calculated with factor 1.25 */

  --color-primary: #e03528;
  --color-secondary: #2f4858;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-white-smoke: #f2f2f2;

  --color-bg: var(--color-black);
  --color-portfolioh2-bg: var(--color-white);
  --color-font: var(--color-white);
  --color-headers: var(--color-primary);

  --color-herotitle-bg: rgba(224, 53, 40, 0.2);
  --color-button: var(--color-primary);
  --color-button-bg: var(--color-white);
  --color-button-selected: var(--color-secondary);
  --color-button-hover: var(--color-white);
  --color-button-hover-bg: var(--color-secondary);

  --color-nav-background: var(--color-black);
  --color-nav-bg-mobile: var(--color-bg);
  --color-navitem-active: var(--color-secondary);
  --color-navitem-active-bg: var(--color-white);
  --color-border: var(--color-white);
  --color-shadow: rgba(22, 22, 22, 0.5);

  --color-focus: var(--color-secondary);
  --color-focus-bg: transparent;
}