@import './helper/slider.css';
@import './credits.css';
@import './main.css';
@import './form-validator.css';
@import './cs.css';
@import './falling-chars.css';

:root {
  --hue: 40;
  --pri: hsl(var(--hue), 100%, 60%);

  --err: hsl(0, 100%, 60%);

  --bg: hsl(var(--hue), 18%, 8%);
  --c12: hsl(var(--hue), 18%, 12%);
  --c24: hsl(var(--hue), 18%, 24%);
  --c48: hsl(var(--hue), 18%, 48%);
  --c72: hsl(var(--hue), 18%, 72%);
  --fg: hsl(var(--hue), 18%, 96%);
}

html {
  min-height: 100dvh;
}

html,
dialog {
  scroll-behavior: smooth;
  background-color: var(--bg);
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji';
  font-size: 14px;
  color: var(--fg);
}

body {
  display: flex;
  flex-flow: column;
  margin: 0 auto;
  max-width: 1600px;
  min-height: 100dvh;
}

footer {
  padding: 2rem 4rem;
}

footer p {
  text-align: center;
  color: var(--c72);
  margin: 0;
  max-width: unset;
}

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

@media (max-width: 60em) {
  footer {
    padding: 2rem;
  }
}

@media (max-width: 40em) {
  footer {
    padding: 2rem 1rem;
  }
}

.monospace {
  font-family: monospace, Montserrat, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}