/*These colors are mainly used, only primary has been reset*/
:root {
  --cassiopeia-color-primary: #8fbc8f;
  --cassiopeia-color-secondary: hsl(210deg, 7%, 46%);
  --cassiopeia-color-link: hsl(220deg, 67%, 40%);
  --cassiopeia-color-hover: hsl(242deg, 30%, 36%);
}

/*For putting the logo in the center*/
.navbar-brand {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*The content should never be bigger than the content box*/
main * {
  max-width: 100%;
}

/*To make more whitespace left and right on big screens*/
@media (min-width: 1200px) { 
.site-grid {
  padding-left: 10%;
  padding-right: 10%; }
.container-header {
  padding-left: 10%;
  padding-right: 10%; }
}

/*To make sure the actual bars have white background*/
.site-grid .grid-child {
  background-color: white;
  border-radius: 7px;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
}

/*To deal with the menu*/
.metismenu-item {
  color: #0f522f; }
.deeper.parent.active {
  text-decoration-line: underline; }
.current.deeper.parent.active {
  text-decoration-line: none; }
.current {
  background-color: #0f522f;
  color: white;
  border-radius: 4px; }
.level-2 > a {
  color: #0f522f; }
.level-2.active > a {
  color: white; }
/*Also the menu should be centered and have a bit more breathing room towards the top*/
.container-header {
  padding-top: 20px; 
}
.navbar {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*To make a background in body and body alone*/
body {
  background-color: var(--cassiopeia-color-primary) ; }
.site-grid{
  background-color: rgba(0,0,0,0);
  background-image: none; }
.container-header {
  background-color: rgba(0,0,0,0);
  background-image: none; }
.container-footer {
  background-color: rgba(0,0,0,0);
  background-image: none; }