:root {
  /* colors */
  --cc-background: #201b1b;
  --cc-background-light: color-mix(in srgb,
      var(--cc-background) 80%,
      white 20%);
  --cc-card-background: #fff0dc;
  --cc-foreground-main: #efe1d1;
  --cc-foreground-second: #efe1d1;
  --cc-flag-blue: #404c5d;
  --cc-flag-yellow: #c5922c;
  --cc-flag-red: #924119;
  --cc-stock-in: #538c41;
  --cc-stock-limited: #538c41;
  --cc-stock-out: #538c41;

  /* spacing and dimensions */
  --cc-minimum-element-width: 350px;
  --cc-maximum-element-width: 1200px;
  --cc-border-radius: 0.25rem;

  --cc-navbar-wrapper-padding: 25px;
  --cc-navbar-margin: 50px;
  --cc-navbar-padding: 100px;
  --cc-navbar-width: calc(var(--cc-maximum-element-width) - var(--cc-navbar-padding) - var(--cc-navbar-padding));
  --cc-navbar-min-height: 56px;

  --cc-logo-width: 90px;

}

body {
  display: flex;
  flex-direction: column;
  background-color: var(--cc-background);
  color: var(--cc-foreground-main);
}
/* ------------------------- */


/* ------------------------- */
/* header and navigation bar */
/* ------------------------- */

#cc-navbar-wrapper {
  padding-left: var(--cc-navbar-wrapper-padding);
  padding-right: var(--cc-navbar-wrapper-padding);
  min-width: var(--cc-minimum-element-width);
}

#cc-navbar {
  margin: var(--cc-navbar-margin) auto;
  padding-left: var(--cc-navbar-padding);
  min-height: var(--cc-navbar-min-height);
  max-width: var(--cc-navbar-width);
  background-color: var(--cc-card-background) !important;
  font-family: "Lexend", sans-serif;
  color: var(--cc-background);
}

#cc-navbar-div {
  justify-content: end !important;
}

#cc-logo-div {
  position: absolute;
  background: var(--cc-card-background);
  left: 20px;
  border-image: linear-gradient(to right,
      var(--cc-flag-blue) 0%,
      var(--cc-flag-blue) 33%,
      var(--cc-flag-yellow) 33%,
      var(--cc-flag-yellow) 66%,
      var(--cc-flag-red) 66%,
      var(--cc-flag-red) 100%) 1;
  border-style: solid;
}

#cc-logo-border-div {
  border: var(--cc-background);
  border-style: solid;
}

#cc-logo-img {
  width: var(--cc-logo-width);
}

#cc-navbar-links-div {
  margin-left: 20px;
}

#cc-navbar-toggler {
  position: absolute;
  padding-right: 10px !important;
  padding-left: 0px !important;
  background: var(--cc-card-background);
  border: none;
}

#cc-navbar-toggler:focus,
#cc-navbar-toggler:active,
#cc-navbar-toggler.show,
#cc-navbar-toggler[aria-expanded="true"] {
  outline: none;
  box-shadow: none;
  border: none;
}

.nav-link:link {
  color: var(--cc-background);
}

.nav-link:visited {
  color: var(--cc-background);
}

.nav-link:hover {
  color: var(--cc-background-light);
}

#cc-content-wrapper {
  max-width: calc(var(--cc-maximum-element-width) + 25px);
  min-width: var(--cc-minimum-element-width);
}

.footer {
  width: 100vw;
  background: var(--cc-card-background);
  color: var(--cc-background);
  padding: 1.5rem 0;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.footer-content {
  max-width: 1225px;
  margin: 0 auto;
  text-align: center;
}

.cc-footer-item {
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#cc-footer-flag {
  width: 200px;
  height: 150px;
  background: linear-gradient(to right,
      var(--cc-flag-blue) 0%,
      var(--cc-flag-blue) 33%,
      var(--cc-flag-yellow) 33%,
      var(--cc-flag-yellow) 66%,
      var(--cc-flag-red) 66%,
      var(--cc-flag-red) 100%);
}

#cc-footer-flag-text {
  font-family: "Lexend", sans-serif;
  color: var(--cc-background);
  margin-top: 5px;
  display: inline-flex;
}

.cc-footer-title {
  font-family: "Lexend", sans-serif;
  color: var(--cc-background);
  margin-bottom: 5px;
  display: inline-flex;
  font-size: 20px;
}

.cc-footer-text {
  font-family: "Poly", sans-serif;
  color: var(--cc-background);
  display: inline-flex;
  text-align: left;
}