@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

:root {
  --primary-dark-color: #000f9f; /* Primary colour used by elements such as buttons */
  --very-dark-primary-color: #000f9f;  /* Darker primary colour used for contrast or hover effects */
  --primary-light-color: #fff; /* lighter colour or secondary colour */
  --topbar-background-color: #FFF; /* background colour for the top bar of the navigation */
  --menu-background-color: #000f9f; /* background colour for the menu bar of the navigation */
  --menu-alternative-background-color: #479b9e; /* Alternative background colour for the menu bar, used by some buttons */
  --menu-foreground-color: #FFF; /* font colour used in the menu bar */
  --link-color: #2199e8;
  --toc-link-color: #22175b; /* Colour used by text on TOC sidebar elements */
  --figure-caption-background-color: #003DAC; 
  --figure-caption-color: #FFFFFF;
}

body {
  font-family: Montserrat, Arial;
}

h1,h2,h3,h4,h5,h6 {
  font-family: Montserrat, Arial;
}

@media screen and (min-width: 40em) {
  header .main.top-bar {
    height: 130px;
    background-color: var(--topbar-background-color); 
  }
  .top-bar-left svg {
    min-height: 130px;
    min-width: 500px;
    fill: var(--primary-dark-color);
  }
}

@media screen and (min-width: 40em) {
  header .top-bar-left, header .top-bar-right {
    padding-top: 1rem; } }
.top-bar-left {
  border-right: 0px;
}
.top-bar-right {
  border-left: 0px;
}
footer .very-dark-primary-color {
  background-color: transparent;
}
header #main-menu li:hover {
  background-color: #e5e5e5;
}
header #main-menu li a:hover {
  color: #000;
}
header .top-bar ul.dropdown ul {
    background-color: var(--menu-background-color);
}
header .top-bar ul.dropdown ul li a {
  background-color: var(--menu-background-color);
  color: white;
}
header .top-bar ul.dropdown ul li a:hover {
  background-color: #e5e5e5;
  color: #000;
}
main section {
  padding: 2.0rem 0;
}
footer svg {
  height: 80px;
  width: 250px;
}