@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --bg-dark: #1e1e24;
  --font-color: #fff8f1;
  --bg-contrast: #ffecd1;
  --red-accent: #eb5160;
  --red-accent-highlight: #f76675;
  --green-accent: #21a179;
  --green-accent-highlight: #29c291;
  --dashboard-color: #ffecd1;
  --dashboard-secondary: #21a179;
  --header-color: #1e1e24;
}

body {
  background-color: var(--bg-dark);
  color: var(--font-color);
  font-family: "Montserrat", sans-serif;
}

.alert {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 25px;
  font-weight: 500;
  border: 1px solid transparent;
}
.alert-sukces {
  background: color-mix(in srgb, var(--green-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--green-accent) 30%, transparent);
  color: color-mix(in srgb, var(--green-accent) 90%, transparent);
}

.alert-error {
  background: color-mix(in srgb, var(--red-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--red-accent) 30%, transparent);
  color: color-mix(in srgb, var(--red-accent) 90%, transparent);
}

.alert-ostrzezenie {
  background: color-mix(in srgb, #f39c12 10%, transparent);
  border-color: color-mix(in srgb, #f39c12 30%, transparent);
  color: color-mix(in srgb, #f39c12 90%, transparent);
}

.alert-info {
  background: color-mix(in srgb, #3498db 10%, transparent);
  border-color: color-mix(in srgb, #3498db 30%, transparent);
  color: color-mix(in srgb, #3498db 90%, transparent);
}