@layer properties {
    @supports (((-webkit-hyphens: none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *, :before, :after {
            --tw-border-style:solid
        }
        ::backdrop {
            --tw-border-style: solid
        }
    }
}

.dark-black {
    --background: 20 14.3% 4.1%;
    --foreground: 0 0% 95%;
    --card: 24 9.8% 10%;
    --card-foreground: 0 0% 95%;
    --card-hover: var(--hue) 0% 96%;
    --popover: 0 0% 9%;
    --popover-foreground: 0 0% 95%;
    --primary: var(--hue) 90% 50%;
    --primary-foreground: 0 0% 98%;
    --secondary: var(--hue) 100% 10%;
    --secondary-foreground: var(--hue) 95% 70%;
    --muted: 0 0% 15%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 12 6.5% 15.1%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 346.8 77.2% 49.8%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%
}

.dark-black .text-primary {
    color: hsl(var(--hue) 70% 55%)
}

.dark {
    --background: var(--hue) 25% 7%;
    --foreground: 0 0% 95%;
    --card: var(--hue) 20% 12%;
    --card-foreground: 0 0% 95%;
    --card-hover: var(--hue) 100% 10%;
    --popover: 0 0% 9%;
    --popover-foreground: 0 0% 95%;
    --primary: var(--hue) 45% 55%;
    --primary-foreground: 0 0% 98%;
    --secondary: var(--hue) 100% 10%;
    --secondary-foreground: var(--hue) 95% 70%;
    --muted: 0 0% 15%;
    --muted-foreground: 240 5% 64.9%;
    --accent: var(--hue) 6.5% 15.1%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --border: var(--hue) 10% 15.9%;
    --input: var(--hue) 3.7% 15.9%;
    --ring: var(--hue) 77.2% 49.8%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%
}

.dark header {
    background: hsl(var(--hue), 50%, 45%);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0
}

.dark.overscroll-top {
    background: hsl(var(--hue), 50%, 43%)
}

.dark.overscroll-bottom {
    background: hsl(var(--hue), 20%, 10%)
}

.dark-christmas {
    --background: var(--hue) 25% 7%;
    --foreground: 0 0% 95%;
    --card: var(--hue) 20% 12%;
    --card-foreground: 0 0% 95%;
    --card-hover: var(--hue) 100% 10%;
    --popover: 0 0% 9%;
    --popover-foreground: 0 0% 95%;
    --primary: var(--hue) 45% 55%;
    --primary-foreground: 0 0% 98%;
    --secondary: var(--hue) 100% 10%;
    --secondary-foreground: var(--hue) 95% 70%;
    --muted: 0 0% 15%;
    --muted-foreground: 240 5% 64.9%;
    --accent: var(--hue) 6.5% 15.1%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --border: var(--hue) 10% 15.9%;
    --input: var(--hue) 3.7% 15.9%;
    --ring: var(--hue) 77.2% 49.8%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%
}

.dark-christmas header {
    background: hsl(var(--hue), 50%, 45%);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0
}

.dark-christmas.overscroll-top {
    background: hsl(var(--hue), 50%, 43%)
}

.dark-christmas.overscroll-bottom {
    background: hsl(var(--hue), 20%, 10%)
}

.dark-christmas #homepage-content {
    z-index: 1;
    position: relative
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}