/* Define theme colors */
:root {
  --theme-colour: #5c5c5c;
  --theme-up-complement: #dc021b;
  --theme-dn-complement: #00aadc;
}

/* Logo Styling */
.logo-icon {
  padding: 0.5rem 0;
  height: 5rem; /* Simplified calculation */
  width: auto;
}

#logo a:hover,
#logo a:focus {
  background-color: inherit;
  padding: inherit;
}

/* Header & Footer */
#header,
#footer {
  background: transparent;
}

/* Navigation Menu */
#menu {
  background: var(--theme-colour);
}

#menu .pure-menu-selected,
#menu .pure-menu-heading {
  background: var(--theme-up-complement);
}

#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
  border-top: 1px solid var(--theme-dn-complement);
}

/* Buttons */
.pure-button-primary,
.pure-button-red {
  background-color: var(--theme-colour);
  color: #fff;
  transition: background 0.3s ease-in-out;
}

.pure-button-red:hover,
.pure-button-red:focus {
  background: var(--theme-dn-complement);
  color: #fff;
}

/* Footer */
.logo-footer,
.copyrights {
  display: none;
}

#footer a, #footer a:visited {
  color: #000;
}

.footer-links {
  padding-top: 0.5rem;
  height: 3.5rem;
  font-size: 0.8rem;
}

body::after {
  content: "";
  background: url(../img/belval-msa.jpg);
  background-size: cover;
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
}