/*
A Note on Variable Naming Conventions

for opacity: number is added directly to the end of variable name
for rotation angle: a dash separates the number from the variable name

examples:
--var-name60 would mean it has an opacity of 60%
--var-name-60 would mean it has a rotation angle of 60deg
--var-name60-60 would mean it has both opacity and angle of 60

Exception: the shades for basic colours (i.e. grey50 or red200)
*/

/*****************************************************************************/
/*                                                                           */
/*                          BLACK / WHITE / GREYS                            */
/*                                                                           */
/*****************************************************************************/

/* NEAR BLACK */
@property --black { syntax: "<color>"; inherits: false; initial-value: rgb(5 5 5 / 100%); }
@property --black90 { syntax: "<color>"; inherits: false; initial-value: rgb(5 5 5 / 90%); }
@property --black75 { syntax: "<color>"; inherits: false; initial-value: rgb(5 5 5 / 75%); }
@property --black50 { syntax: "<color>"; inherits: false; initial-value: rgb(5 5 5 / 50%); }
@property --black25 { syntax: "<color>"; inherits: false; initial-value: rgb(5 5 5 / 25%); }
@property --black10 { syntax: "<color>"; inherits: false; initial-value: rgb(5 5 5 / 10%); }

/* NEAR WHITE */
@property --white { syntax: "<color>"; inherits: false; initial-value: rgb(250 250 250 / 100%); }
@property --white90 { syntax: "<color>"; inherits: false; initial-value: rgb(250 250 250 / 90%); }
@property --white75 { syntax: "<color>"; inherits: false; initial-value: rgb(250 250 250 / 75%); }
@property --white50 { syntax: "<color>"; inherits: false; initial-value: rgb(250 250 250 / 50%); }
@property --white25 { syntax: "<color>"; inherits: false; initial-value: rgb(250 250 250 / 25%); }
@property --white10 { syntax: "<color>"; inherits: false; initial-value: rgb(250 250 250 / 10%); }

/* GREYSCALE */
@property --grey90 { syntax: "<color>"; inherits: false; initial-value: rgb(25 25 25 / 100%); }
@property --grey80 { syntax: "<color>"; inherits: false; initial-value: rgb(50 50 50 / 100%); }
@property --grey70 { syntax: "<color>"; inherits: false; initial-value: rgb(75 75 75 / 100%); }
@property --grey60 { syntax: "<color>"; inherits: false; initial-value: rgb(100 100 100 / 100%); }
@property --grey50 { syntax: "<color>"; inherits: false; initial-value: rgb(125 125 125 / 100%); }
@property --grey40 { syntax: "<color>"; inherits: false; initial-value: rgb(150 150 150 / 100%); }
@property --grey30 { syntax: "<color>"; inherits: false; initial-value: rgb(175 175 175 / 100%); }
@property --grey20 { syntax: "<color>"; inherits: false; initial-value: rgb(200 200 200 / 100%); }
@property --grey10 { syntax: "<color>"; inherits: false; initial-value: rgb(225 225 225 / 100%); }

/*****************************************************************************/
/*                                                                           */
/*                               BASIC COLOURS                               */
/*                                                                           */
/*****************************************************************************/

@property --red { syntax: "<color>"; inherits: false; initial-value: rgb(235 78 61 / 100%); }
@property --brown { syntax: "<color>"; inherits: false; initial-value: rgb(129 88 50 / 100%); }
@property --orange { syntax: "<color>"; inherits: false; initial-value: rgb(241 154 56 / 100%); }
@property --yellow { syntax: "<color>"; inherits: false; initial-value: rgb(247 206 70 / 100%); }
@property --green { syntax: "<color>"; inherits: false; initial-value: rgb(101 196 103 / 100%); }
@property --teal { syntax: "<color>"; inherits: false; initial-value: rgb(0 201 227 / 100%); }
@property --blue { syntax: "<color>"; inherits: false; initial-value: rgb(50 120 247 / 100%); }
@property --indigo { syntax: "<color>"; inherits: false; initial-value: rgb(85 0 250 / 100%); }
@property --purple { syntax: "<color>"; inherits: false; initial-value: rgb(163 87 213 / 100%); }
@property --pink { syntax: "<color>"; inherits: false; initial-value: rgb(227 62 152 / 100%); }

/*****************************************************************************/
/*                                                                           */
/*                         COLOUR SPECTRUMS (ROYGBV)                         */
/*                                                                           */
/*****************************************************************************/

/* SOFT/PASTEL COLOUR SPECTRUM */
@property --red-soft { syntax: "<color>"; inherits: false; initial-value: rgb(245 146 135 / 100%); }
@property --brown-soft { syntax: "<color>"; inherits: false; initial-value: rgb(197 169 143 / 100%); }
@property --orange-soft { syntax: "<color>"; inherits: false; initial-value: rgb(242 191 133 / 100%); }
@property --yellow-soft { syntax: "<color>"; inherits: false; initial-value: rgb(237 215 142 / 100%); }
@property --green-soft { syntax: "<color>"; inherits: false; initial-value: rgb(168 224 169 / 100%); }
@property --teal-soft { syntax: "<color>"; inherits: false; initial-value: rgb(178 255 255 / 100%); }
@property --blue-soft { syntax: "<color>"; inherits: false; initial-value: rgb(187 211 255 / 100%); }
@property --indigo-soft { syntax: "<color>"; inherits: false; initial-value: rgb(198 190 255 / 100%); }
@property --purple-soft { syntax: "<color>"; inherits: false; initial-value: rgb(202 166 227 / 100%); }
@property --pink-soft { syntax: "<color>"; inherits: false; initial-value: rgb(255 199 246 / 100%); }

/* BRIGHT/NEON COLOUR SPECTRUM */
@property --red-bright { syntax: "<color>"; inherits: false; initial-value: rgb(255 0 0 / 100%); }
@property --brown-bright { syntax: "<color>"; inherits: false; initial-value: rgb(170 82 0 / 100%); }
@property --orange-bright { syntax: "<color>"; inherits: false; initial-value: rgb(255 136 0 / 100%); }
@property --yellow-bright { syntax: "<color>"; inherits: false; initial-value: rgb(255 240 0 / 100%); }
@property --green-bright { syntax: "<color>"; inherits: false; initial-value: rgb(0 255 0 / 100%); }
@property --teal-bright { syntax: "<color>"; inherits: false; initial-value: rgb(0 255 255 / 100%); }
@property --blue-bright { syntax: "<color>"; inherits: false; initial-value: rgb(0 0 255 / 100%); }
@property --indigo-bright { syntax: "<color>"; inherits: false; initial-value: rgb(61 0 255 / 100%); }
@property --purple-bright { syntax: "<color>"; inherits: false; initial-value: rgb(162 0 255 / 100%); }
@property --pink-bright { syntax: "<color>"; inherits: false; initial-value: rgb(255 0 225 / 100%); }

/*****************************************************************************/
/*                                                                           */
/*                             BASIC OVERLAYS                                */
/*                                                                           */
/*****************************************************************************/

/* Near Black */
@property --overlay-black10 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(5 5 5 / 10%) 0%, rgb(5 5 5 / 10%) 100%); }
@property --overlay-black25 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(5 5 5 / 25%) 0%, rgb(5 5 5 / 25%) 100%); }
@property --overlay-black50 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(5 5 5 / 50%) 0%, rgb(5 5 5 / 50%) 100%); }
@property --overlay-black75 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(5 5 5 / 75%) 0%, rgb(5 5 5 / 75%) 100%); }
@property --overlay-black90 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(5 5 5 / 90%) 0%, rgb(5 5 5 / 90%) 100%); }

/* Near White */
@property --overlay-white10 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(250 250 250 / 10%) 0%, rgb(250 250 250 / 10%) 100%); }
@property --overlay-white25 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(250 250 250 / 25%) 0%, rgb(250 250 250 / 25%) 100%); }
@property --overlay-white50 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(250 250 250 / 50%) 0%, rgb(250 250 250 / 50%) 100%); }
@property --overlay-white75 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(250 250 250 / 75%) 0%, rgb(250 250 250 / 75%) 100%); }
@property --overlay-white90 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(250 250 250 / 90%) 0%, rgb(250 250 250 / 90%) 100%); }

/*****************************************************************************/
/*                                                                           */
/*                           OVERLAY GRADIENTS                               */
/*                                                                           */
/*****************************************************************************/

/* Near Black */
@property --overlay-black-0 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-22 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(22deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-45 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(45deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-67 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(67deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-90 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(90deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-112 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(112deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-135 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(135deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-157 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(157deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-180 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(180deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-202 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(202deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-225 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(225deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-247 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(247deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-270 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(270deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-292 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(292deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-315 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(315deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }
@property --overlay-black-337 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(337deg, rgb(5 5 5 / 80%) 5%, rgb(5 5 5 / 10%) 95%); }

/* Near White */
@property --overlay-white-0 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-22 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(22deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-45 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(45deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-67 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(67deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-90 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(90deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-112 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(112deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-135 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(135deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-157 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(157deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-180 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(180deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-202 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(202deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-225 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(225deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-247 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(247deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-270 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(270deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-292 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(292deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-315 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(315deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }
@property --overlay-white-337 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(337deg, rgb(250 250 250 / 80%) 5%, rgb(250 250 250 / 10%) 95%); }

/* Vignettes */
@property --vignette-black { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse farthest-corner at 50% 50%, rgb(5 5 5 / 0%) 0%, rgb(5 5 5 / 0%) 75%, rgb(5 5 5 / 50%) 100%); }
@property --vignette-white { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse farthest-corner at 50% 50%, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 70%, rgb(255 255 255 / 90%) 100%); }

/*****************************************************************************/
/*                                                                           */
/*                            LINEAR GRADIENTS                               */
/*                                                                           */
/*                             simple colours                                */
/*                                                                           */
/*****************************************************************************/

@property --ling-red { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(255 173 164 / 100%), rgb(235 78 61 / 100%)); }
@property --ling-brown { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(205 184 164 / 100%), rgb(129 88 50 / 100%)); }
@property --ling-orange { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(255 227 179 / 100%), rgb(255 131 27 / 100%)); }
@property --ling-yellow { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(255 247 194 / 100%), rgb(247 206 70 / 100%)); }
@property --ling-green { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(168 238 169 / 100%), rgb(43 183 46 / 100%)); }
@property --ling-teal { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(204 249 255 / 100%), rgb(0 201 227 / 100%)); }
@property --ling-blue { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(140 196 255 / 100%), rgb(35 80 242 / 100%)); }
@property --ling-indigo { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(205 183 250 / 100%), rgb(85 0 250 / 100%)); }
@property --ling-purple { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(237 205 255 / 100%), rgb(151 12 219 / 100%)); }
@property --ling-pink { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(255 200 223 / 100%), rgb(227 62 152 / 100%)); }

/*****************************************************************************/
/*                                                                           */
/*                            LINEAR GRADIENTS                               */
/*                                                                           */
/*                         soft / pastel colours                             */
/*                                                                           */
/*****************************************************************************/

/* Soft/Pastel #1: yellow-green-teal */
@property --ling-soft1 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(221 232 174 / 100%), rgb(155 250 161 / 100%), rgb(95 242 245 / 100%)); }
@property --ling-soft1-45 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(45deg, rgb(221 232 174 / 100%), rgb(155 250 161 / 100%), rgb(95 242 245 / 100%)); }
@property --ling-soft1-90 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(90deg, rgb(221 232 174 / 100%), rgb(155 250 161 / 100%), rgb(95 242 245 / 100%)); }
@property --ling-soft1-135 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(135deg, rgb(221 232 174 / 100%), rgb(155 250 161 / 100%), rgb(95 242 245 / 100%)); }
@property --ling-soft1-180 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(180deg, rgb(221 232 174 / 100%), rgb(155 250 161 / 100%), rgb(95 242 245 / 100%)); }
@property --ling-soft1-225 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(225deg, rgb(221 232 174 / 100%), rgb(155 250 161 / 100%), rgb(95 242 245 / 100%)); }
@property --ling-soft1-270 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(270deg, rgb(221 232 174 / 100%), rgb(155 250 161 / 100%), rgb(95 242 245 / 100%)); }
@property --ling-soft1-315 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(315deg, rgb(221 232 174 / 100%), rgb(155 250 161 / 100%), rgb(95 242 245 / 100%)); }

/* Soft/Pastel #2: purple-pink-orange */
@property --ling-soft2 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(214 122 235 / 100%), rgb(250 155 188 / 100%), rgb(245 205 95 / 100%)); }
@property --ling-soft2-45 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(45deg, rgb(214 122 235 / 100%), rgb(250 155 188 / 100%), rgb(245 205 95 / 100%)); }
@property --ling-soft2-90 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(90deg, rgb(214 122 235 / 100%), rgb(250 155 188 / 100%), rgb(245 205 95 / 100%)); }
@property --ling-soft2-135 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(135deg, rgb(214 122 235 / 100%), rgb(250 155 188 / 100%), rgb(245 205 95 / 100%)); }
@property --ling-soft2-180 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(180deg, rgb(214 122 235 / 100%), rgb(250 155 188 / 100%), rgb(245 205 95 / 100%)); }
@property --ling-soft2-225 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(225deg, rgb(214 122 235 / 100%), rgb(250 155 188 / 100%), rgb(245 205 95 / 100%)); }
@property --ling-soft2-270 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(270deg, rgb(214 122 235 / 100%), rgb(250 155 188 / 100%), rgb(245 205 95 / 100%)); }
@property --ling-soft2-315 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(315deg, rgb(214 122 235 / 100%), rgb(250 155 188 / 100%), rgb(245 205 95 / 100%)); }

/*****************************************************************************/
/*                                                                           */
/*                            LINEAR GRADIENTS                               */
/*                                                                           */
/*                           colours of the sky                              */
/*                                                                           */
/*****************************************************************************/

@property --sky-old { syntax: "<image>"; inherits: false; initial-value: linear-gradient(90deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(0 0 0 / 100%), rgb(8 7 13 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }


@property --sky { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(222 246 255 / 100%)); }
@property --sky-45 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(45deg, rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(222 246 255 / 100%)); }
@property --sky-90 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(90deg, rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(222 246 255 / 100%)); }
@property --sky-135 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(135deg, rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(222 246 255 / 100%)); }
@property --sky-180 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(180deg, rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(222 246 255 / 100%)); }
@property --sky-225 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(225deg, rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(222 246 255 / 100%)); }
@property --sky-270 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(270deg, rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(222 246 255 / 100%)); }
@property --sky-315 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(315deg, rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(222 246 255 / 100%)); }


@property --sky-full { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-22 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(22deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-45 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(45deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-67 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(67deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-90 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(90deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-112 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(112deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-135 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(135deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-157 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(157deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-180 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(180deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-202 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(202deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-225 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(225deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-247 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(247deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-270 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(270deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-292 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(292deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-315 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(315deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }
@property --sky-full-337 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(337deg, rgb(255 255 255 / 100%), rgb(144 223 254 / 100%), rgb(31 92 149 / 100%), rgb(211 197 109 / 100%), rgb(169 65 14 / 100%), rgb(2 0 36 / 100%), rgb(15 15 15 / 100%), rgb(2 0 36 / 100%), rgb(141 119 166 / 100%), rgb(251 139 151 / 100%), rgb(236 254 254 / 100%), rgb(255 255 255 / 100%)); }


@property --sky-blues { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-22 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(22deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-45 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(45deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-67 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(67deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-90 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(90deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-112 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(112deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-135 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(135deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-157 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(157deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-180 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(180deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-202 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(202deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-225 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(225deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-247 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(247deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-270 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(270deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-292 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(292deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-315 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(315deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }
@property --sky-blues-337 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(337deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 35%, rgb(0 212 255 / 100%) 100%); }


@property --sunrise { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-22 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(22deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-45 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(45deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-67 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(67deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-90 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(90deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-112 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(112deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-135 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(135deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-157 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(157deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-180 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(180deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-202 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(202deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-225 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(225deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-247 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(247deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-270 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(270deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-292 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(292deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-315 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(315deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }
@property --sunrise-337 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(337deg, rgb(191 61 33 / 100%), rgb(181 143 65 / 100%), rgb(124 175 239 / 100%), rgb(30 85 180 / 100%)); }


@property --sunset { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-22 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(22deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-45 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(45deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-67 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(67deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-90 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(90deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-112 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(112deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-135 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(135deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-157 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(157deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-180 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(180deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-202 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(202deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-225 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(225deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-247 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(247deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-270 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(270deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-292 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(292deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-315 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(315deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }
@property --sunset-337 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(337deg, rgb(252 172 121 / 100%),rgb(251 161 74 / 100%),rgb(230 113 142 / 100%),rgb(180 97 159 / 100%),rgb(84 55 157 / 100%)); }


@property --midnight { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-22 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(22deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-45 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(45deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-67 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(67deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-90 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(90deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-112 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(112deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-135 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(135deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-157 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(157deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-180 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(180deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-202 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(202deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-225 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(225deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-247 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(247deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-270 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(270deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-292 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(292deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-315 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(315deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }
@property --midnight-337 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(337deg, rgb(2 0 36 / 100%) 0%, rgb(9 9 121 / 100%) 100%); }

/*****************************************************************************/
/*                                                                           */
/*                            LINEAR GRADIENTS                               */
/*                                                                           */
/*                             miscellaneous                                 */
/*                                                                           */
/*****************************************************************************/

@property --fire { syntax: "<image>"; inherits: false; initial-value: linear-gradient(0deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-22 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(22deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-45 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(45deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-67 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(67deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-90 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(90deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-112 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(112deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-135 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(135deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-157 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(157deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-180 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(180deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-202 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(202deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-225 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(225deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-257 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(257deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-270 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(270deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-292 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(292deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-315 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(315deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }
@property --fire-337 { syntax: "<image>"; inherits: false; initial-value: linear-gradient(337deg, rgb(232 0 0 / 100%) 0%, rgb(255 103 15 / 100%) 37%, rgb(255 228 20 / 100%) 100%); }

@property --instagram { syntax: "<image>"; inherits: false; initial-value: linear-gradient(135deg, rgb(131 58 180 / 100%), rgb(253 29 29 / 100%), rgb(252 176 69 / 100%)); }

/*****************************************************************************/
/*                                                                           */
/*                            RADIAL GRADIENTS                               */
/*                                                                           */
/*                             simple colours                                */
/*                                                                           */
/*****************************************************************************/

/*
Template for a radial gradient with 3 colours

radial-gradient(
	SHAPE SIZE-TERM at POSITION-FROM-LEFT POSITION-FROM-TOP, 
	rgb(255 255 255 / 100%) LOCATION,
	rgb(200 200 200 / 100%) LOCATION,
	rgb(100 100 100 / 100%) LOCATION
); 

SHAPE = circle or ellipse
SIZE-TERM = farthest-corner (the default), closest-corner, farthest-side, or closest-side
POSITION-FROM LEFT and POSITION-FROM-TOP: percentage, absolute lengths, or keyterms
LOCATION = The colour-stop location for that colour, in pixels or percentage 

*/

/* Outwards (light edges) */
@property --radgout-red { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(235 78 61 / 100%), rgb(255 173 164 / 100%)); }
@property --radgout-brown { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(129 88 50 / 100%), rgb(205 184 164 / 100%)); }
@property --radgout-orange { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(255 131 27 / 100%), rgb(255 227 179 / 100%)); }
@property --radgout-yellow { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(247 206 70 / 100%), rgb(255 247 194 / 100%)); }
@property --radgout-green { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(43 183 46 / 100%), rgb(168 238 169 / 100%)); }
@property --radgout-teal { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(0 201 227 / 100%), rgb(204 249 255 / 100%)); }
@property --radgout-blue { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(35 80 242 / 100%), rgb(140 196 255 / 100%)); }
@property --radgout-indigo { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(85 0 250 / 100%), rgb(205 183 250 / 100%)); }
@property --radgout-purple { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(151 12 219 / 100%), rgb(237 205 255 / 100%)); }
@property --radgout-pink { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(227 62 152 / 100%), rgb(255 200 223 / 100%)); }

/* Inwards (light center) */
@property --radgin-red { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(255 173 164 / 100%), rgb(235 78 61 / 100%)); }
@property --radgin-brown { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(205 184 164 / 100%), rgb(129 88 50 / 100%)); }
@property --radgin-orange { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(255 227 179 / 100%), rgb(255 131 27 / 100%)); }
@property --radgin-yellow { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(255 247 194 / 100%), rgb(247 206 70 / 100%)); }
@property --radgin-green { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(168 238 169 / 100%), rgb(43 183 46 / 100%)); }
@property --radgin-teal { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(204 249 255 / 100%), rgb(0 201 227 / 100%)); }
@property --radgin-blue { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(140 196 255 / 100%), rgb(35 80 242 / 100%)); }
@property --radgin-indigo { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(205 183 250 / 100%), rgb(85 0 250 / 100%)); }
@property --radgin-purple { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(237 205 255 / 100%), rgb(151 12 219 / 100%)); }
@property --radgin-pink { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse, rgb(255 200 223 / 100%), rgb(227 62 152 / 100%)); }

/*****************************************************************************/
/*                                                                           */
/*                            RADIAL GRADIENTS                               */
/*                                                                           */
/*                              miscellaenous                                */
/*                                                                           */
/*****************************************************************************/

@property --radial1 { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse farthest-side at 50% 50%, rgb(200 200 200 / 100%), rgb(50 50 50 / 100%)); }

@property --radial2 { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse at top, rgb(230 100 100 / 100%), transparent); }

@property --radial-blue { syntax: "<image>"; inherits: false; initial-value: radial-gradient(rgb(9 9 121 / 100%), rgb(0 212 255 / 100%)); }