:root {
  --bgColor: white;
  --foregroundColorRGB: 10, 10, 10;
}

body {
  background-color: white;
  background-color: var(--bgColor);
  color: #111;
  color: rgba(var(--foregroundColorRGB), 0.9);
}

h1,
h2,
h3 {
  color: rgba(var(--foregroundColorRGB), 1);
}

body,
h1,
h2,
h3,
[class^="inverted-"],
[class^="^bg-"] {
  transition: background-color 1s, color 1s;
}
/**
* Text and bg utilities that are based on the contrast with the background,
* using white on black and black on white
*/
.inverted-100 {
  color: rgba(var(--foregroundColorRGB), 1);
}
.inverted-90 {
  color: rgba(var(--foregroundColorRGB), 0.9);
}
.inverted-80 {
  color: rgba(var(--foregroundColorRGB), 0.8);
}
.inverted-70 {
  color: rgba(var(--foregroundColorRGB), 0.7);
}
.inverted-60 {
  color: rgba(var(--foregroundColorRGB), 0.6);
}
.inverted-50 {
  color: rgba(var(--foregroundColorRGB), 0.5);
}
.inverted-40 {
  color: rgba(var(--foregroundColorRGB), 0.4);
}
.inverted-30 {
  color: rgba(var(--foregroundColorRGB), 0.3);
}
.inverted-20 {
  color: rgba(var(--foregroundColorRGB), 0.2);
}
.inverted-10 {
  color: rgba(var(--foregroundColorRGB), 0.1);
}

.bg-inverted-100 {
  background-color: rgba(var(--foregroundColorRGB), 1);
}
.bg-inverted-90 {
  background-color: rgba(var(--foregroundColorRGB), 0.9);
}
.bg-inverted-80 {
  background-color: rgba(var(--foregroundColorRGB), 0.8);
}
.bg-inverted-70 {
  background-color: rgba(var(--foregroundColorRGB), 0.7);
}
.bg-inverted-60 {
  background-color: rgba(var(--foregroundColorRGB), 0.6);
}
.bg-inverted-50 {
  background-color: rgba(var(--foregroundColorRGB), 0.5);
}
.bg-inverted-40 {
  background-color: rgba(var(--foregroundColorRGB), 0.4);
}
.bg-inverted-30 {
  background-color: rgba(var(--foregroundColorRGB), 0.3);
}
.bg-inverted-20 {
  background-color: rgba(var(--foregroundColorRGB), 0.2);
}
.bg-inverted-10 {
  background-color: rgba(var(--foregroundColorRGB), 0.1);
}

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

.hover-inverted-100:hover {
  color: rgba(var(--foregroundColorRGB), 1);
}
.hover-inverted-90:hover {
  color: rgba(var(--foregroundColorRGB), 0.9);
}
.hover-inverted-80:hover {
  color: rgba(var(--foregroundColorRGB), 0.8);
}
.hover-inverted-70:hover {
  color: rgba(var(--foregroundColorRGB), 0.7);
}
.hover-inverted-60:hover {
  color: rgba(var(--foregroundColorRGB), 0.6);
}
.hover-inverted-50:hover {
  color: rgba(var(--foregroundColorRGB), 0.5);
}
.hover-inverted-40:hover {
  color: rgba(var(--foregroundColorRGB), 0.4);
}
.hover-inverted-30:hover {
  color: rgba(var(--foregroundColorRGB), 0.3);
}
.hover-inverted-20:hover {
  color: rgba(var(--foregroundColorRGB), 0.2);
}
.hover-inverted-10:hover {
  color: rgba(var(--foregroundColorRGB), 0.1);
}

.hover-bg-inverted-100:hover {
  background-color: rgba(var(--foregroundColorRGB), 1);
}
.hover-bg-inverted-90:hover {
  background-color: rgba(var(--foregroundColorRGB), 0.9);
}
.hover-bg-inverted-80:hover {
  background-color: rgba(var(--foregroundColorRGB), 0.8);
}
.hover-bg-inverted-70:hover {
  background-color: rgba(var(--foregroundColorRGB), 0.7);
}
.hover-bg-inverted-60:hover {
  background-color: rgba(var(--foregroundColorRGB), 0.6);
}
.hover-bg-inverted-50:hover {
  background-color: rgba(var(--foregroundColorRGB), 0.5);
}
.hover-bg-inverted-40:hover {
  background-color: rgba(var(--foregroundColorRGB), 0.4);
}
.hover-bg-inverted-30:hover {
  background-color: rgba(var(--foregroundColorRGB), 0.3);
}
.hover-bg-inverted-20:hover {
  background-color: rgba(var(--foregroundColorRGB), 0.2);
}
.hover-bg-inverted-10:hover {
  background-color: rgba(var(--foregroundColorRGB), 0.1);
}

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