@media (prefers-color-scheme: light) {
  :root {
    color: #3f3742;
    background-color: var(--background-color);
    
    --primary-color: #3f3742;
    --secondary-color: #4c474e;
    --accent-color-1: #646cff;
    --accent-color-2: #535bf2;
    --accent-color-3: #757cff;
    --background-color: #f8f7f7;
  }
  a:hover {
    color: #4c474e;
  }
  button {
    background-color: #f9f9f9;
  }
  
  
}

@media (prefers-color-scheme: dark) {
  :root {
    color: #ffffff;
    background-color: #3f3742;
    
    --primary-color: #f8f7f7;
    --secondary-color: #8e8c9f;
    --accent-color-1: #646cff;
    --accent-color-2: #535bf2;
    --accent-color-3: #757cff;
    --background-color: #3f3742;
  }
  a:hover {
    color: #4c474e;
  }
  button {
    background-color: #f9f9f9;
  }

  img.logo {
      filter: invert(1);
  }

  .header__in-progress img {
    filter: invert();
  }
}

@media (max-width: 768px) {
    :root {
        --promo-banner-height: 22.5vh;
    }

    header .logo {
        width: 40vw;
    }

    .header__caption {
        margin: 1em 0;
    }

    nav p {
        margin: 0;
        margin-top: 0.5em;
    }
}