:root {
	--red: #b24438;
	--orange: #c56835;
	--yellow: #c89338;
	--green: #848925;
	--teal: #699965;
	--blue: #4e8096;
	--violet: #7c5f9a;
	--magenta: #a95972;

	--d-red-bg: #53241f;
	--d-orange-bg: #60331a;
	--d-yellow-bg: #57411a;
	--d-green-bg: #40421b;
	--d-teal-bg: #31442c;
	--d-blue-bg: #273c43;
	--d-violet-bg: #3c2e47;
	--d-magenta-bg: #4d2b35;

	--l-red-bg: #d27a64;
	--l-orange-bg: #e09562;
	--l-yellow-bg: #e2b564;
	--l-green-bg: #afad55;
	--l-teal-bg: #9bba85;
	--l-blue-bg: #87a7aa;
	--l-violet-bg: #a98ead;
	--l-magenta-bg: #ca8a8f;

	--red-star: url(/assets/stars/star_r.png);
	--orange-star: url(/assets/stars/star_o.png);
	--yellow-star: url(/assets/stars/star_y.png);
	--green-star: url(/assets/stars/star_g.png);
	--teal-star: url(/assets/stars/star_t.png);
	--blue-star: url(/assets/stars/star_b.png);
	--violet-star: url(/assets/stars/star_v.png);
	--magenta-star: url(/assets/stars/star_m.png);
}

/* modes */
html[data-mode="dark"] {
	--bg-color: #1e1b1b;
	--container-color: #252222;
	--container-color-2: #191616;
	--text-color: #b7ac8e;
	--link-color: #ebdbb2;
	--shadow-color: #020202;
	--background-img: url(assets/backgrounds/dark/d_grid_rainbow.png);

	--icon-dropdown: url(assets/icons/dark/d_dropdown.png);
	--icon-external: url(assets/icons/dark/d_external.png);
	--icon-gear: url(assets/icons/dark/d_gear.png);
	--icon-ig: url(assets/icons/dark/d_ig.png);
	--icon-lb: url(assets/icons/dark/d_lb.png);
	--icon-moon: url(assets/icons/dark/d_moon.png);
	--icon-smiley: url(assets/icons/dark/d_smiley.png);
	--icon-sun: url(assets/icons/dark/d_sun.png);
	--icon-tumblr: url(assets/icons/dark/d_tumblr.png);
	--icon-x: url(assets/icons/dark/d_x.png);
	--icon-yt: url(assets/icons/dark/d_yt.png);
}

html[data-mode="light"] {
	--bg-color: #ebdbb2;
	--container-color: #d5c4a1;
	--container-color-2: #bdae93;
	--text-color: #504945;
	--link-color: #282828;
	--shadow-color: #504945;
	--background-img: url(assets/backgrounds/light/l_grid_rainbow.png);

	--icon-dropdown: url(assets/icons/light/l_dropdown.png);
	--icon-external: url(assets/icons/light/l_external.png);
	--icon-gear: url(assets/icons/light/l_gear.png);
	--icon-ig: url(assets/icons/light/l_ig.png);
	--icon-lb: url(assets/icons/light/l_lb.png);
	--icon-moon: url(assets/icons/light/l_moon.png);
	--icon-smiley: url(assets/icons/light/l_smiley.png);
	--icon-sun: url(assets/icons/light/l_sun.png);
	--icon-tumblr: url(assets/icons/light/l_tumblr.png);
	--icon-x: url(assets/icons/light/l_x.png);
	--icon-yt: url(assets/icons/light/l_yt.png);

	--filter: hue-rotate(180deg) invert(0.95) sepia(0.75);
}

/* themes*/
/* rainbow (default) */
html[data-mode="dark"][data-theme="rainbow"] {
	--red-bg: var(--d-red-bg);
	--orange-bg: var(--d-orange-bg);
	--yellow-bg: var(--d-yellow-bg);
	--green-bg: var(--d-green-bg);
	--teal-bg: var(--d-teal-bg);
	--blue-bg: var(--d-blue-bg);
	--violet-bg: var(--d-violet-bg);
	--magenta-bg: var(--d-magenta-bg);

	--selection-bg: var(--text-color);
	--selection-text: var(--bg-color);
}

html[data-mode="light"][data-theme="rainbow"] {
	--red-bg: var(--l-red-bg);
	--orange-bg: var(--l-orange-bg);
	--yellow-bg: var(--l-yellow-bg);
	--green-bg: var(--l-green-bg);
	--teal-bg: var(--l-teal-bg);
	--blue-bg: var(--l-blue-bg);
	--violet-bg: var(--l-violet-bg);
	--magenta-bg: var(--l-magenta-bg);

	--selection-bg: var(--text-color);
	--selection-text: var(--bg-color);
}

/* red */
html[data-mode="dark"][data-theme="red"] {
	--red-bg: var(--d-red-bg);
	--orange-bg: var(--d-red-bg);
	--yellow-bg: var(--d-red-bg);
	--green-bg: var(--d-red-bg);
	--teal-bg: var(--d-red-bg);
	--blue-bg: var(--d-red-bg);
	--violet-bg: var(--d-red-bg);
	--magenta-bg: var(--d-red-bg);

	--background-img: url(assets/backgrounds/dark/d_grid_red.png);
	--selection-bg: var(--d-red-bg);
}

html[data-mode="light"][data-theme="red"] {
	--red-bg: var(--l-red-bg);
	--orange-bg: var(--l-red-bg);
	--yellow-bg: var(--l-red-bg);
	--green-bg: var(--l-red-bg);
	--teal-bg: var(--l-red-bg);
	--blue-bg: var(--l-red-bg);
	--violet-bg: var(--l-red-bg);
	--magenta-bg: var(--l-red-bg);

	--background-img: url(assets/backgrounds/light/l_grid_red.png);
	--selection-bg: var(--l-red-bg);

	--orange-star: var(--red-star);
	--yellow-star: var(--red-star);
	--green-star: var(--red-star);
	--teal-star: var(--red-star);
	--blue-star: var(--red-star);
	--violet-star: var(--red-star);
	--magenta-star: var(--red-star);
}

html[data-theme="red"] {
	--orange-star: var(--red-star);
	--yellow-star: var(--red-star);
	--green-star: var(--red-star);
	--teal-star: var(--red-star);
	--blue-star: var(--red-star);
	--violet-star: var(--red-star);
	--magenta-star: var(--red-star);

	--orange: var(--red);
	--yellow: var(--red);
	--green: var(--red);
	--teal: var(--red);
	--blue: var(--red);
	--violet: var(--red);
	--magenta: var(--red);
}

/* orange */
html[data-mode="dark"][data-theme="orange"] {
	--red-bg: var(--d-orange-bg);
	--orange-bg: var(--d-orange-bg);
	--yellow-bg: var(--d-orange-bg);
	--green-bg: var(--d-orange-bg);
	--teal-bg: var(--d-orange-bg);
	--blue-bg: var(--d-orange-bg);
	--violet-bg: var(--d-orange-bg);
	--magenta-bg: var(--d-orange-bg);

	--background-img: url(assets/backgrounds/dark/d_grid_orange.png);
	--selection-bg: var(--d-orange-bg);
}

html[data-mode="light"][data-theme="orange"] {
	--red-bg: var(--l-orange-bg);
	--orange-bg: var(--l-orange-bg);
	--yellow-bg: var(--l-orange-bg);
	--green-bg: var(--l-orange-bg);
	--teal-bg: var(--l-orange-bg);
	--blue-bg: var(--l-orange-bg);
	--violet-bg: var(--l-orange-bg);
	--magenta-bg: var(--l-orange-bg);

	--background-img: url(assets/backgrounds/light/l_grid_orange.png);
	--selection-bg: var(--l-orange-bg);
}

html[data-theme="orange"] {
	--red-star: var(--orange-star);
	--yellow-star: var(--orange-star);
	--green-star: var(--orange-star);
	--teal-star: var(--orange-star);
	--blue-star: var(--orange-star);
	--violet-star: var(--orange-star);
	--magenta-star: var(--orange-star);

	--red: var(--orange);
	--yellow: var(--orange);
	--green: var(--orange);
	--teal: var(--orange);
	--blue: var(--orange);
	--violet: var(--orange);
	--magenta: var(--orange);
}

/* yellow */
html[data-mode="dark"][data-theme="yellow"] {
	--red-bg: var(--d-yellow-bg);
	--orange-bg: var(--d-yellow-bg);
	--yellow-bg: var(--d-yellow-bg);
	--green-bg: var(--d-yellow-bg);
	--teal-bg: var(--d-yellow-bg);
	--blue-bg: var(--d-yellow-bg);
	--violet-bg: var(--d-yellow-bg);
	--magenta-bg: var(--d-yellow-bg);

	--background-img: url(assets/backgrounds/dark/d_grid_yellow.png);
	--selection-bg: var(--d-yellow-bg);
}

html[data-mode="light"][data-theme="yellow"] {
	--red-bg: var(--l-yellow-bg);
	--orange-bg: var(--l-yellow-bg);
	--yellow-bg: var(--l-yellow-bg);
	--green-bg: var(--l-yellow-bg);
	--teal-bg: var(--l-yellow-bg);
	--blue-bg: var(--l-yellow-bg);
	--violet-bg: var(--l-yellow-bg);
	--magenta-bg: var(--l-yellow-bg);

	--background-img: url(assets/backgrounds/light/l_grid_yellow.png);
	--selection-bg: var(--l-yellow-bg);
}

html[data-theme="yellow"] {
	--red-star: var(--yellow-star);
	--orange-star: var(--yellow-star);
	--green-star: var(--yellow-star);
	--teal-star: var(--yellow-star);
	--blue-star: var(--yellow-star);
	--violet-star: var(--yellow-star);
	--magenta-star: var(--yellow-star);

	--red: var(--yellow);
	--orange: var(--yellow);
	--green: var(--yellow);
	--teal: var(--yellow);
	--blue: var(--yellow);
	--violet: var(--yellow);
	--magenta: var(--yellow);
}

/* green */
html[data-mode="dark"][data-theme="green"] {
	--red-bg: var(--d-green-bg);
	--orange-bg: var(--d-green-bg);
	--yellow-bg: var(--d-green-bg);
	--green-bg: var(--d-green-bg);
	--teal-bg: var(--d-green-bg);
	--blue-bg: var(--d-green-bg);
	--violet-bg: var(--d-green-bg);
	--magenta-bg: var(--d-green-bg);

	--background-img: url(assets/backgrounds/dark/d_grid_green.png);
	--selection-bg: var(--d-green-bg);
}

html[data-mode="light"][data-theme="green"] {
	--red-bg: var(--l-green-bg);
	--orange-bg: var(--l-green-bg);
	--yellow-bg: var(--l-green-bg);
	--green-bg: var(--l-green-bg);
	--teal-bg: var(--l-green-bg);
	--blue-bg: var(--l-green-bg);
	--violet-bg: var(--l-green-bg);
	--magenta-bg: var(--l-green-bg);

	--background-img: url(assets/backgrounds/light/l_grid_green.png);
	--selection-bg: var(--l-green-bg);
}

html[data-theme="green"] {
	--red-star: var(--green-star);
	--orange-star: var(--green-star);
	--yellow-star: var(--green-star);
	--teal-star: var(--green-star);
	--blue-star: var(--green-star);
	--violet-star: var(--green-star);
	--magenta-star: var(--green-star);

	--red: var(--green);
	--orange: var(--green);
	--yellow: var(--green);
	--teal: var(--green);
	--blue: var(--green);
	--violet: var(--green);
	--magenta: var(--green);
}

/* teal */
html[data-mode="dark"][data-theme="teal"] {
	--red-bg: var(--d-teal-bg);
	--orange-bg: var(--d-teal-bg);
	--yellow-bg: var(--d-teal-bg);
	--green-bg: var(--d-teal-bg);
	--teal-bg: var(--d-teal-bg);
	--blue-bg: var(--d-teal-bg);
	--violet-bg: var(--d-teal-bg);
	--magenta-bg: var(--d-teal-bg);

	--background-img: url(assets/backgrounds/dark/d_grid_teal.png);
	--selection-bg: var(--d-teal-bg);
}

html[data-mode="light"][data-theme="teal"] {
	--red-bg: var(--l-teal-bg);
	--orange-bg: var(--l-teal-bg);
	--yellow-bg: var(--l-teal-bg);
	--green-bg: var(--l-teal-bg);
	--teal-bg: var(--l-teal-bg);
	--blue-bg: var(--l-teal-bg);
	--violet-bg: var(--l-teal-bg);
	--magenta-bg: var(--l-teal-bg);

	--background-img: url(assets/backgrounds/light/l_grid_teal.png);
	--selection-bg: var(--l-teal-bg);
}

html[data-theme="teal"] {
	--red-star: var(--teal-star);
	--orange-star: var(--teal-star);
	--yellow-star: var(--teal-star);
	--green-star: var(--teal-star);
	--blue-star: var(--teal-star);
	--violet-star: var(--teal-star);
	--magenta-star: var(--teal-star);

	--red: var(--teal);
	--orange: var(--teal);
	--yellow: var(--teal);
	--green: var(--teal);
	--blue: var(--teal);
	--violet: var(--teal);
	--magenta: var(--teal);
}

/* blue */
html[data-mode="dark"][data-theme="blue"] {
	--red-bg: var(--d-blue-bg);
	--orange-bg: var(--d-blue-bg);
	--yellow-bg: var(--d-blue-bg);
	--green-bg: var(--d-blue-bg);
	--teal-bg: var(--d-blue-bg);
	--blue-bg: var(--d-blue-bg);
	--violet-bg: var(--d-blue-bg);
	--magenta-bg: var(--d-blue-bg);

	--background-img: url(assets/backgrounds/dark/d_grid_blue.png);
	--selection-bg: var(--d-blue-bg);
}

html[data-mode="light"][data-theme="blue"] {
	--red-bg: var(--l-blue-bg);
	--orange-bg: var(--l-blue-bg);
	--yellow-bg: var(--l-blue-bg);
	--green-bg: var(--l-blue-bg);
	--teal-bg: var(--l-blue-bg);
	--blue-bg: var(--l-blue-bg);
	--violet-bg: var(--l-blue-bg);
	--magenta-bg: var(--l-blue-bg);

	--background-img: url(assets/backgrounds/light/l_grid_blue.png);
	--selection-bg: var(--l-blue-bg);
}

html[data-theme="blue"] {
	--red-star: var(--blue-star);
	--orange-star: var(--blue-star);
	--yellow-star: var(--blue-star);
	--green-star: var(--blue-star);
	--teal-star: var(--blue-star);
	--violet-star: var(--blue-star);
	--magenta-star: var(--blue-star);

	--red: var(--blue);
	--orange: var(--blue);
	--yellow: var(--blue);
	--green: var(--blue);
	--teal: var(--blue);
	--violet: var(--blue);
	--magenta: var(--blue);
}

/* violet */
html[data-mode="dark"][data-theme="violet"] {
	--red-bg: var(--d-violet-bg);
	--orange-bg: var(--d-violet-bg);
	--yellow-bg: var(--d-violet-bg);
	--green-bg: var(--d-violet-bg);
	--teal-bg: var(--d-violet-bg);
	--blue-bg: var(--d-violet-bg);
	--violet-bg: var(--d-violet-bg);
	--magenta-bg: var(--d-violet-bg);

	--background-img: url(assets/backgrounds/dark/d_grid_violet.png);
	--selection-bg: var(--d-violet-bg);
}

html[data-mode="light"][data-theme="violet"] {
	--red-bg: var(--l-violet-bg);
	--orange-bg: var(--l-violet-bg);
	--yellow-bg: var(--l-violet-bg);
	--green-bg: var(--l-violet-bg);
	--teal-bg: var(--l-violet-bg);
	--blue-bg: var(--l-violet-bg);
	--violet-bg: var(--l-violet-bg);
	--magenta-bg: var(--l-violet-bg);

	--background-img: url(assets/backgrounds/light/l_grid_violet.png);
	--selection-bg: var(--l-violet-bg);
}

html[data-theme="violet"] {
	--red-star: var(--violet-star);
	--orange-star: var(--violet-star);
	--yellow-star: var(--violet-star);
	--green-star: var(--violet-star);
	--teal-star: var(--violet-star);
	--blue-star: var(--violet-star);
	--magenta-star: var(--violet-star);

	--red: var(--violet);
	--orange: var(--violet);
	--yellow: var(--violet);
	--green: var(--violet);
	--teal: var(--violet);
	--blue: var(--violet);
	--magenta: var(--violet);
}

/* magenta */
html[data-mode="dark"][data-theme="magenta"] {
	--red-bg: var(--d-magenta-bg);
	--orange-bg: var(--d-magenta-bg);
	--yellow-bg: var(--d-magenta-bg);
	--green-bg: var(--d-magenta-bg);
	--teal-bg: var(--d-magenta-bg);
	--blue-bg: var(--d-magenta-bg);
	--violet-bg: var(--d-magenta-bg);
	--magenta-bg: var(--d-magenta-bg);

	--background-img: url(assets/backgrounds/dark/d_grid_magenta.png);
	--selection-bg: var(--d-magenta-bg);
}

html[data-mode="light"][data-theme="magenta"] {
	--red-bg: var(--l-magenta-bg);
	--orange-bg: var(--l-magenta-bg);
	--yellow-bg: var(--l-magenta-bg);
	--green-bg: var(--l-magenta-bg);
	--teal-bg: var(--l-magenta-bg);
	--blue-bg: var(--l-magenta-bg);
	--violet-bg: var(--l-magenta-bg);
	--magenta-bg: var(--l-magenta-bg);

	--background-img: url(assets/backgrounds/light/l_grid_magenta.png);
	--selection-bg: var(--l-magenta-bg);
}

html[data-theme="magenta"] {
	--red-star: var(--magenta-star);
	--orange-star: var(--magenta-star);
	--yellow-star: var(--magenta-star);
	--green-star: var(--magenta-star);
	--teal-star: var(--magenta-star);
	--blue-star: var(--magenta-star);
	--violet-star: var(--magenta-star);

	--red: var(--magenta);
	--orange: var(--magenta);
	--yellow: var(--magenta);
	--green: var(--magenta);
	--teal: var(--magenta);
	--blue: var(--magenta);
	--violet: var(--magenta);
}