:root {
  --color-primary: #ec344f;
  --color-primary-hover: #d5213a;
  --color-secondary-hover: #323232;
  --color-secondary-focus: #3e3e3e;
  --background-bg-container: #1c1c1c;
  --color-text: #ffffff;
  --color-link: #ff566f;
}

@media (prefers-color-scheme: dark) {
  body:not(.Light-theme) {
    input {
      background-color: var(--background-bg-container) !important;
      color: var(--color-text) !important;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:focus {
      transition: background-color 0s 600000s, color 0s 600000s !important;
    }

    .card {
      background-color: var(--background-bg-container);
      color: var(--color-text);
    }

    h1 {
      color: var(--color-text);
    }

    label {
      color: var(--color-text) !important;
    }

    .primary-red {
      color: var(--color-link) !important;
    }

    .card-body a:not(.btn-primary, .btn-secondary, .external-button) {
      color: var(--color-link) !important;
    }

    .btn-primary {
      background-color: var(--color-primary);
    }

    .btn-primary {
      background-color: var(--color-primary);
    }

    .btn-primary:hover {
      background-color: var(--color-primary-hover);
    }

    .btn-secondary {
      color: var(--color-primary);
      background-color: var(--background-bg-container);
    }

    .btn-secondary:hover {
      color: var(--color-primary);
      background-color: var(--color-secondary-hover);
      border-color: var(--color-primary) !important;
    }

    .btn-secondary:focus {
      color: var(--color-primary);
      background-color: var(--color-secondary-focus);
      border-color: var(--color-primary) !important;
    }

    .btn-secondary:active {
      color: var(--color-primary);
      background-color: var(--color-secondary-focus) !important;
      border-color: var(--color-primary) !important;
    }

    .external-button {
      color: var(--color-link) !important;
      background-color: var(--background-bg-container) !important;
    }

    .form-control {
      background-color: var(--background-bg-container) !important;
      color: var(--color-text) !important;
    }

    .form-control:focus {
      background-color: var(--background-bg-container) !important;
      color: var(--color-text) !important;
    }

    .dropdown-content {
      background-color: var(--background-bg-container) !important;
      color: var(--color-text) !important;
    }

    .language-button {
      background-color: var(--background-bg-container) !important;
      color: var(--color-text) !important;
    }

    .language-button:hover {
      background-color: var(--color-secondary-hover) !important;
      color: var(--color-text) !important;
    }

    .dropdown-item {
      color: var(--color-text) !important;
      background-color: var(--background-bg-container) !important;
    }

    .dropdown-item:focus,
    .dropdown-item:hover {
      color: var(--color-text) !important;
      background-color: var(--color-secondary-hover) !important;
    }
  }
}

.Dark-theme {
  input {
    background-color: var(--background-bg-container) !important;
    color: var(--color-text) !important;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
  }

  .card {
    background-color: var(--background-bg-container);
    color: var(--color-text);
  }

  h1 {
    color: var(--color-text);
  }

  label {
    color: var(--color-text) !important;
  }

  .primary-red {
    color: var(--color-link) !important;
  }

  .card-body a:not(.btn-primary, .btn-secondary, .external-button) {
    color: var(--color-link) !important;
  }

  .btn-primary {
    background-color: var(--color-primary);
  }

  .btn-primary {
    background-color: var(--color-primary);
  }

  .btn-primary:hover {
    background-color: var(--color-primary-hover);
  }

  .btn-secondary {
    color: var(--color-primary);
    background-color: var(--background-bg-container);
  }

  .btn-secondary:hover {
    color: var(--color-primary);
    background-color: var(--color-secondary-hover);
    border-color: var(--color-primary) !important;
  }

  .btn-secondary:focus {
    color: var(--color-primary);
    background-color: var(--color-secondary-focus);
    border-color: var(--color-primary) !important;
  }

  .btn-secondary:active {
    color: var(--color-primary);
    background-color: var(--color-secondary-focus) !important;
    border-color: var(--color-primary) !important;
  }

  .external-button {
    color: var(--color-link) !important;
    background-color: var(--background-bg-container) !important;
  }

  .form-control {
    background-color: var(--background-bg-container) !important;
    color: var(--color-text) !important;
  }

  .form-control:focus {
    background-color: var(--background-bg-container) !important;
    color: var(--color-text) !important;
  }

  .dropdown-content {
    background-color: var(--background-bg-container) !important;
    color: var(--color-text) !important;
  }

  .language-button {
    background-color: var(--background-bg-container) !important;
    color: var(--color-text) !important;
  }

  .language-button:hover {
    background-color: var(--color-secondary-hover) !important;
    color: var(--color-text) !important;
  }

  .dropdown-item {
    color: var(--color-text) !important;
    background-color: var(--background-bg-container) !important;
  }

  .dropdown-item:focus,
  .dropdown-item:hover {
    color: var(--color-text) !important;
    background-color: var(--color-secondary-hover) !important;
  }
}