:root{ --dark-theme-check: 1; --theme-color-check: 1; --accent-color-check: 1; --theme-hue: 90; --accent-offset: 60; --accent-hue: calc(var(--theme-hue) + var(--accent-offset)); /* Contrast hue - the color for hyperlinks and selection. Default hue is 210, but we want it the +180 opposite hue of theme if there is a theme color.*/ --theme-contrast-hue: calc(calc(var(--theme-hue) + 180) * var(--theme-color-check)); --default-contrast-hue: calc(210 - calc(var(--theme-color-check) * 210)); --contrast-hue: calc(var(--theme-contrast-hue) + var(--default-contrast-hue)); --about-hue: 310; --nnetwork-hue: 240; --tic-tac-toe-hue: 60; --dialoguer-hue: 0; --foreground-lightness: calc(10% + calc(var(--dark-theme-check) * 70%)); --background-lightness: calc(80% - calc(var(--dark-theme-check) * 70%)); --contrast-lightness: calc(30% + calc(var(--dark-theme-check) * 55%)); --foreground-theme-color: hsl( var(--theme-hue), calc(var(--theme-color-check) * 100%), var(--foreground-lightness) ); --background-theme-color: hsl( var(--theme-hue), calc(var(--theme-color-check) * 25%), var(--background-lightness) ); --foreground-accent-color: hsl( var(--accent-hue), calc(var(--accent-color-check) * 100%), var(--foreground-lightness) ); --background-accent-color: hsl( var(--accent-hue), calc(var(--accent-color-check) * 100%), var(--background-lightness) ); --contrast-color: hsl(var(--contrast-hue), 100%, var(--contrast-lightness)); } @media (prefers-color-scheme: dark) { :root { --dark-theme-check: 1; } } @media (prefers-color-scheme: light) { :root { --dark-theme-check: 0; } } ::selection { background-color: var(--contrast-color); color: hsl(0, 0%, var(--background-lightness)); } body { color: var(--foreground-accent-color); background-color: var(--background-theme-color); transition: 250ms; } p { color: var(--foreground-theme-color); text-indent: 4em; } p.header-sub-text { font-size: 1.25em; font-weight: bold; text-indent: 0; } hr { border-color: var(--foreground-accent-color); } nav { color: var(--foreground-accent-color); text-align: center; } ul { text-indent: -2rem; font-size: 1.25rem; font-weight: bold; } ul.projects-blog { color: var(--foreground-theme-color); margin-left: 2rem; font-size: 1rem; font-weight: normal; } li { text-indent: 0rem; font-size: 1rem; font-weight: normal; } li.nnetwork { color: hsl(var(--nnetwork-hue), 100%, var(--foreground-lightness)); } li.tic-tac-toe { color: hsl(var(--tic-tac-toe-hue), 100%, var(--foreground-lightness)); } li.dialoguer { color: hsl(var(--dialoguer-hue), 100%, var(--foreground-lightness)); } a { color: var(--contrast-color); } a:visited { color: hsl(calc(var(--contrast-hue) + 60), 100%, var(--contrast-lightness)) } a:hover { color: hsl(calc(var(--contrast-hue) - 150), 100%, var(--contrast-lightness)) } .dark-mode-container { float: right; } @media (max-width: 600px) { html { font-size: 1.5rem; } } @media (min-width: 601px) { html { font-size: 1rem; } }