:root {
    --background: hsl(0, 0%, 100%);
    --foreground: hsl(240, 10%, 3.9%);
    --card: hsl(0, 0%, 100%);
    --card-foreground: hsl(240, 10%, 3.9%);
    --popover: hsl(0, 0%, 100%);
    --popover-foreground: hsl(240, 10%, 3.9%);
    --primary: hsl(240, 5.9%, 10%);
    --primary-foreground: hsl(0, 1%, 94%);
    --secondary: hsl(240, 4.8%, 95.9%);
    --secondary-foreground: hsl(240, 5.9%, 10%);
    --muted: hsl(240, 4.8%, 95.9%);
    --muted-foreground: hsl(240, 3.8%, 45%);
    --accent: hsl(0, 1%, 83%);
    --accent-foreground: hsl(240, 5.9%, 10%);
    --destructive: hsl(0, 72%, 51%);
    --destructive-foreground: hsl(0, 0%, 98%);
    --border: hsl(240, 5.9%, 90%);
    --input: hsl(240, 5.9%, 90%);
    --ring: hsl(240, 5.9%, 10%);

}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

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

.bg-foreground {
    background-color: var(--foreground);
}

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

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

.bg-popover {
    background-color: var(--popover);
}

.bg-popover-foreground {
    background-color: var(--popover-foreground);
}

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

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

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

.bg-secondary-foreground {
    background-color: var(--secondary-foreground);
}

.bg-muted {
    background-color: var(--muted);
}

.bg-muted-foreground {
    background-color: var(--muted-foreground);
}

.bg-accent {
    background-color: var(--accent);
}

.bg-accent-foreground {
    background-color: var(--accent-foreground);
}

.bg-destructive {
    background-color: var(--destructive);
}

.bg-destructive-foreground {
    background-color: var(--destructive-foreground);
}

.bg-border {
    background-color: var(--border);
}

.bg-input {
    background-color: var(--input);
}

.bg-ring {
    background-color: var(--ring);
}



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

.text-foreground {
    color: var(--foreground);
}

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

.text-card-foreground {
    color: var(--card-foreground);
}

.text-popover {
    color: var(--popover);
}

.text-popover-foreground {
    color: var(--popover-foreground);
}

.text-primary {
    color: var(--primary);
}

.text-primary-foreground {
    color: var(--primary-foreground);
}

.text-secondary {
    color: var(--secondary);
}

.text-secondary-foreground {
    color: var(--secondary-foreground);
}

.text-muted {
    color: var(--muted);
}

.text-muted-foreground {
    color: var(--muted-foreground);
}

.text-accent {
    color: var(--accent);
}

.text-accent-foreground {
    color: var(--accent-foreground);
}

.text-destructive {
    color: var(--destructive);
}

.text-destructive-foreground {
    color: var(--destructive-foreground);
}

.text-border {
    color: var(--border);
}

.text-input {
    color: var(--input);
}

.text-ring {
    color: var(--ring);
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: var(--secondary);
    outline: none;
    margin: 10px 0;
    border-radius: 4px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: white;
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid black;
    margin-top: -8px;
}

input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: white;
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid black;
}

input[type="range"]::-ms-thumb {
    width: 24px;
    height: 24px;
    background: white;
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid black;
    margin-top: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: linear-gradient(to right, black 0%, black var(--range-progress, 0%), var(--secondary) var(--range-progress, 0%), var(--secondary) 100%);
    border-radius: 4px;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: var(--secondary);
    border-radius: 4px;
}

input[type="range"]::-moz-range-progress {
    background-color: black;
    height: 8px;
    border-radius: 4px;
}

input[type="range"]::-ms-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type="range"]::-ms-fill-lower {
    background-color: black;
    border-radius: 4px;
}

input[type="range"]::-ms-fill-upper {
    background-color: var(--secondary);
    border-radius: 4px;
}

.navbar-collapse {
    display: none;
}

.navbar-collapse.open {
    display: block;
}