:root {
    --background: hsl(240, 21%, 15%);
    --background-secondary: hsl(240, 21%, 12%);
    --foreground: hsl(226, 64%, 88%);
    --foreground-secondary: hsl(228, 24%, 72%);

    --element-background: hsl(232, 21%, 18%);

    --link: hsl(232, 97%, 85%);
    --link-hover: hsl(217, 92%, 76%);
    --link-secondary: hsl(228, 17%, 64%);
    --link-secondary-hover: hsl(230, 13%, 55%);

    --border-color: hsl(240, 23%, 20%);
    --card-border: hsl(240, 23%, 9%);
    --border-color-hover: hsl(240, 21%, 22%);

    color-scheme: dark;
}

#purple {
	color: hsl(240, 21%, 12%));
}

.type-selectors img {
    filter: brightness(400);
}

.type-selectors #active img {
    filter: none;
    filter: hue-rotate(300deg) brightness(1.45);
}
