:root {
  --dark-color: #0f0a0c;
  --light-color: #fbf9fa;
  --main-background: #ffffff;
  --main-color: #808080;
  --primary-background: #f2f2f2;
  --primary-textColor: #808080;
  --secondary-background: #f2f2f2;
  --secondary-textColor: #ffffff;
  --secondary-color:  #808080;
  --accent-background: #accbd2;
  --accent-textColor: #ffffff;
  --primary-gradient: linear-gradient(180deg, #4d333e, #281b20);
  --secondary-gradient: linear-gradient(180deg, #334d41, #1b2822);
}

body {
  background: var(--main-background); 		/* background of your website */
  color: var(--main-color); 		/* color of your website */
}

h1, .h1 {
  color:  var(--primary-textColor);
}

.container-header {
  background-color: var(--primary-background); /* Solid background of your header */
  background-image: none;
  /* background-image: var(--primary-gradient);  Set to none if you want to disable the gradient */
}

.container-header .mod-menu {
  color: var(--secondary-color); /* text color */
}

.container-header .navbar-toggler {
    color: var(--secondary-color);
    cursor: pointer;
    border: 2px solid var(--secondary-color);
}
.container-header .mod-list li a:hover {
    color: black;
}

.metismenu.mod-menu .metismenu-item > ul {
	background-color: var(--secondary-background); /* background color of your dropdown menu */
	border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
	color: var(--secondary-color); /* text color of your dropdown menu */
}

.container-footer .grid-child {
  padding: 0.3em;
}

.container-footer .mod-menu {
  flex-direction: row;
  flex: 1;
  display: flex;
}

.container-footer .mod-list li {
  padding: .5em 1em;   
}
.container-footer .mod-list li a:hover {
  color: black;
}

.footer {
  background-color: var(--secondary-background); /* background color of your footer */
  background-image: none;  /* Set to none if you want to disable the gradient */
  color: var(--secondary-color); /* text color */
}

figcaption {
  text-align: center;
}