@font-face {
  font-family: "Montserrat";
  src: url(/fonts/Poppins/Poppins-Regular.ttf);
}
:root {
  --hsl-background: 210 30% 10%; /* Dark blue */
  --hsl-foreground: 210 100% 90%; /* Light blue */
  --hsl-muted: 210 60% 35%; /* Medium blue */
  --hsl-muted-foreground: 210 70% 45%; /* Light blue */
  --hsl-popover: 210 90% 25%; /* Light blue */
  --hsl-popover-foreground: 210 100% 10%; /* Dark blue */
  --hsl-card: 210 80% 50%; /* Blue */
  --hsl-card-foreground: 210 100% 90%; /* Light blue */
  --hsl-border: 210 60% 40%; /* Blue border */
  --hsl-input: 210 60% 50%; /* Blue input */
  --hsl-primary: 210 100% 60%; /* Bright blue */
  --hsl-primary-foreground: 210 100% 90%; /* Very light blue */
  --hsl-secondary: 210 50% 55%; /* Light blue for secondary */
  --hsl-secondary-foreground: 210 100% 85%; /* Light blue */
  --hsl-accent: 210 90% 65%; /* Accent blue */
  --hsl-accent-foreground: 210 100% 90%; /* Very light blue */
  --hsl-destructive: 210 100% 70%; /* Dark blue-green */
  --hsl-destructive-foreground: 210 100% 90%; /* Light blue */
  --hsl-constructive: 210 90% 75%; /* Light blue-green */
  --hsl-constructive-foreground: 210 100% 90%; /* Very light blue */
  --hsl-ring: 210 90% 55%; /* Ring in blue */
  --hsl-radius: 1.5rem;
}

:root {
  --background: 210 30% 15%; /* Very dark blue */
  --foreground: 210 100% 90%; /* Very light blue */
  --muted: 210 60% 25%; /* Muted dark blue */
  --muted-foreground: 210 70% 40%; /* Lighter blue */
  --popover: 210 90% 35%; /* Soft blue */
  --popover-foreground: 210 100% 5%; /* Dark blue */
  --card: 210 80% 45%; /* Card blue */
  --card-foreground: 210 100% 90%; /* Light blue */
  --border: 210 60% 35%; /* Blue border */
  --input: 210 60% 40%; /* Blue input */
  --primary: 210 100% 55%; /* Bright blue */
  --primary-foreground: 210 100% 90%; /* Very light blue */
  --secondary: 210 50% 50%; /* Soft blue */
  --secondary-foreground: 210 100% 85%; /* Light blue */
  --accent: 210 90% 60%; /* Accent blue */
  --accent-foreground: 210 100% 90%; /* Very light blue */
  --destructive: 210 100% 50%; /* Dark blue-green */
  --destructive-foreground: 210 100% 90%; /* Light blue */
  --constructive: 210 90% 65%; /* Lighter green-blue */
  --constructive-foreground: 210 100% 90%; /* Very light blue */
  --ring: 210 90% 60%; /* Ring in blue */
  --radius: 1.5rem;
}