:root {
    --a-bg-color: lightgrey;
	--a-bg-pattern: url("/site-assets/image/bg_pattern.png");

	--a-max-width: 1400px;
	--a-topbar-horizontal-margin: 16px;
	--a-topbar-max-width: 1520px;

	--a-topbar-horizontal-spacing: 16px;
	--a-topbar-border-radius: 16px;

	--a-content-bg-color: #fbfbfb;
    --a-text-color: black;

    --a-highlight-color: #5b7797;
    --a-text-on-highlight-color: white;

    --a-footer-color: var(--a-highlight-color);
    --a-text-on-footer-color: var(--a-text-on-highlight-color);

    --a-menu-background-unselected: var(--a-highlight-color);
	--a-menu-text-color-unselected: var(--a-text-on-highlight-color);

    --a-menu-background-selected: white;
    --a-menu-text-color-selected: black;

    --a-menu-background-hover: black;
    --a-menu-text-color-hover: white;

    --a-menu-text-font-size: 17px;
    --a-menu-text-padding-top: 16px;
    --a-menu-text-padding-bottom: 18px;

    --a-menu-img-background-unselected: var(--a-menu-background-unselected);
    --a-menu-img-background-selected: #222222;
    --a-menu-img-background-hover: var(--a-menu-background-hover);

    --a-submenu-background: var(--a-highlight-color);
    --a-submenu-text-color: var(--a-text-on-highlight-color);

	--a-submenu-background-hover: var(--a-menu-background-hover);
    --a-submenu-text-color-hover: var(--a-menu-text-color-hover);

    --a-table-background-color: var(--a-highlight-color);
    --a-table-text-color: var(--a-text-on-highlight-color);

	--a-font-primary: "Roboto";
	--a-font-secondary: "Noto Sans";
	--a-font-tertiary: sans-serif;
}

li {
    padding-bottom: 9px;
    padding-left: 2px;
    padding-right: 16px;
}