html, body {
  margin: 0;
}

.duotone {
  background-image: var(--background);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.duotone::before {
  background-color: var(--primary);
  mix-blend-mode: darken;
  content: "";
  display: block;
  width: inherit;
  height: inherit;
  position: relative;
  top: 0;
  left: 0;
}
.duotone::after {
  background-color: var(--secondary);
  mix-blend-mode: lighten;
  content: "";
  display: block;
  width: inherit;
  height: inherit;
  position: relative;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  top: 0;
  left: 0;
}