:root {
  --body-back-color: #454545;
  --nav-back-color: transparent;
  --nav-back-hover-color: transparent;
  --nav-font-color: #f0f0f0;
  --header-back-color: #de7323;
  --header-font-color: #f0f0f0;
  --content-back-color: #202020;
  --content-font-color: #f0f0f0;
  --footer-back-color: #404040;
  --footer-font-color: #f0f0f0;
  --footer-border-color: #737373;
}

body {
  background-color: var(--body-back-color);
}

input#nav-button + label {
  background-color: var(--nav-back-color);
  color: var(--nav-font-color);
}

header {
  background-color: var(--header-back-color);
}

nav ul li a {
}
nav ul li.active a,
nav ul li a:hover {
}

.wrapper {
  background-color: var(--content-back-color);
  color: var(--content-font-color);
}

footer {
  background-color: var(--footer-back-color);
  color: var(--footer-font-color);
  border-top: 1px #737373 solid;
}

@media screen and (min-width : 801px) {

  body.bg-image {
    background-image: url(../assets/img_1003/a542c645f63a11cd8018d3ec2f7dd238.webp);
    background-size: cover;
    background-position: center center;
    background-blend-mode: overlay;
  }

  .hero {
    background-image: url(../assets/img_1003/7897d545d5c749d3633a89207635ad7d.webp);
  }

  .hero:hover {
    background-image: url(../assets/img_1003/a4c51fe2a0672f4067b96ee845e8cdeb.webp);
  }

  .wrapper {
    width: 100%;
    max-width: 980px;
  }

  header {
    background-color: var(--body-back-color);
  }

  nav {
    background-color: var(--body-back-color);
  }

  nav ul {
    background-color: var(--body-back-color);
  }

  nav ul li {
    border-bottom: none;
  }

nav ul li a {
  background-color: var(--nav-back-color);
}
nav ul li.active a,
nav ul li a:hover {
  background-color: var(--nav-back-hover-color);
}

  header div {
  }

} /* min-width 801px */