body { background-color:hsl(var(--white)); color:hsl(var(--text)); }

/** WebP image usage with modernizr-webp.js
html:not(.webp-alpha) body { background-image:url(images/texture.png); }
html.webp-alpha body { background-image:url(images/texture.webp); }
**/

/*** LNKS ***/

.content a:where(:not(.more-button):not(.read-more):not(.button):not(.unset)) { color:hsl(var(--fourth)); transition:all 300ms; }
.content a:where(:not(.more-button):not(.read-more):not(.button):not(.unset)):hover { color:hsl(var(--fourth-dark)); }

.white-txt a:where(:not(.more-button):not(.read-more):not(.button):not(.unset)) { color:hsl(var(--white)); }



/*** Override Hacks ***/

.white-txt .white-bg * { color:hsl(var(--text)); }

/*** COLOURS ***/

.white-txt { color:hsl(var(--white)) !important; }
.black-txt { color:hsl(var(--black)) !important; }

.text-dark-txt { color:hsl(var(--text-dark)) !important; }
.text-txt { color:hsl(var(--text)) !important; }
.text-light-txt { color:hsl(var(--text-light)) !important; }

.grey-dark-txt { color:hsl(var(--grey-dark)) !important; }
.grey-dark-hover-txt { color:hsl(var(--grey-dark-hover)) !important; }
.grey-mid-txt { color:hsl(var(--grey-mid)) !important; }
.grey-mid-hover-txt { color:hsl(var(--grey-mid-hover)) !important; }
.grey-light-txt { color:hsl(var(--grey-light)) !important; }
.grey-light-hover-txt { color:hsl(var(--grey-light-hover)) !important; }

.first-dark-txt { color:hsl(var(--first-dark)) !important; }
.first-txt { color:hsl(var(--first)) !important; }
.first-light-txt { color:hsl(var(--first-light)) !important; }

.second-dark-txt { color:hsl(var(--second-dark)) !important; }
.second-txt { color:hsl(var(--second)) !important; }
.second-light-txt { color:hsl(var(--second-light)) !important; }

.third-dark-txt { color:hsl(var(--third-dark)) !important; }
.third-txt { color:hsl(var(--third)) !important; }
.third-light-txt { color:hsl(var(--third-light)) !important; }

.fourth-dark-txt { color:hsl(var(--fourth-dark)) !important; }
.fourth-txt { color:hsl(var(--fourth)) !important; }
.fourth-light-txt { color:hsl(var(--fourth-light)) !important; }

.white-bg { background-color:hsl(var(--white)); }
.black-bg { background-color:hsl(var(--black)); }
.text-bg { background-color:hsl(var(--text)); }

.grey-dark-bg { background-color:hsl(var(--grey-dark)); }
.grey-dark-hover-bg { background-color:hsl(var(--grey-dark-hover)); }
.grey-mid-bg { background-color:hsl(var(--grey-mid)); }
.grey-mid-hover-bg { background-color:hsl(var(--grey-mid-hover)); }
.grey-light-bg { background-color:hsl(var(--grey-light)); }
.grey-light-hover-bg { background-color:hsl(var(--grey-light-hover)); }

.first-dark-bg { background-color:hsl(var(--first-dark)); }
.first-bg { background-color:hsl(var(--first)); }
.first-light-bg { background-color:hsl(var(--first-light)); }

.second-dark-bg { background-color:hsl(var(--second-dark)); }
.second-bg { background-color:hsl(var(--second)); }
.second-light-bg { background-color:hsl(var(--second-light)); }

.third-dark-bg { background-color:hsl(var(--third-dark)); }
.third-bg { background-color:hsl(var(--third)); }
.third-light-bg { background-color:hsl(var(--third-light)); }

.fourth-dark-bg { background-color:hsl(var(--fourth-dark)); }
.fourth-bg { background-color:hsl(var(--fourth)); }
.fourth-light-bg { background-color:hsl(var(--fourth-light)); }


.gradient-1,
.gradient-1-bg { background:linear-gradient(135deg, hsla(var(--first),1) 0%, hsla(var(--first-dark),1) 100%); }
.gradient-2,
.gradient-2-bg { background:linear-gradient(135deg, hsla(var(--second-light),1) 0%, hsla(var(--second-dark),1) 100%); }
.gradient-3,
.gradient-3-bg { background:linear-gradient(135deg, hsla(var(--third-light),1) 0%, hsla(var(--third-dark),1) 100%); }
.gradient-4,
.gradient-4-bg { background:linear-gradient(135deg, hsla(var(--fourth-light),1) 0%, hsla(var(--fourth-dark),1) 100%); }

.gradient-black-end { background:linear-gradient(180deg, hsla(var(--black),0) 0%, hsla(var(--black),1) 100%); }

.opacity-0 { opacity:0; } 
.opacity-1 { opacity:0.1; }
.opacity-2 { opacity:0.2; }
.opacity-3 { opacity:0.3; }
.opacity-4 { opacity:0.4; }
.opacity-5 { opacity:0.5; }
.opacity-6 { opacity:0.6; }
.opacity-7 { opacity:0.7; }
.opacity-8 { opacity:0.8; }
.opacity-9 { opacity:0.9; }
.opacity-10 { opacity:1; }

.white-border, .white-border:before, .white-border:after { border-color:hsl(var(--white)); }
.black-border, .black-border:before, .black-border:after { border-color:hsl(var(--black)); }
.text-border, .text-border:before, .text-border:after { border-color:hsl(var(--text)); }
.grey-dark-border, .grey-dark-border:before, .grey-dark-border:after { border-color:hsl(var(--grey-dark)); }
.grey-mid-border, .grey-mid-border:before, .grey-mid-border:after { border-color:hsl(var(--grey-mid)); }
.grey-light-border, .grey-light-border:before, .grey-light-border:after { border-color:hsl(var(--grey-light)); }
.first-dark-border, .first-dark-border:before, .first-dark-border:after { border-color:hsl(var(--first-dark)); }
.first-border, .first-border:before, .first-border:after { border-color:hsl(var(--first)); }
.first-light-border, .first-light-border:before, .first-light-border:after { border-color:hsl(var(--first-light)); }
.second-dark-border, .second-dark-border:before, .second-dark-border:after { border-color:hsl(var(--second-dark)); }
.second-border, .second-border:before, .second-border:after { border-color:hsl(var(--second)); }
.second-light-border, .second-light-border:before, .second-light-border:after { border-color:hsl(var(--second-light)); }
.third-dark-border, .third-dark-border:before, .third-dark-border:after { border-color:hsl(var(--third-dark)); }
.third-border, .third-border:before, .third-border:after { border-color:hsl(var(--third)); }
.third-light-border, .third-light-border:before, .third-light-border:after { border-color:hsl(var(--third-light)); }
.fourth-dark-border, .fourth-dark-border:before, .fourth-dark-border:after { border-color:hsl(var(--fourth-dark)); }
.fourth-border, .fourth-border:before, .fourth-border:after { border-color:hsl(var(--fourth)); }
.fourth-light-border, .fourth-light-border:before, .fourth-light-border:after { border-color:hsl(var(--fourth-light)); }

.more-button.white { border-color:hsla(var(--white),0); background-color:hsla(var(--white),0.8); color:hsl(var(--text)); }
.more-button.white.outline { border-color:hsl(var(--white)); color:hsl(var(--white)); }
.more-button.white:hover { border-color:hsl(var(--white)); background-color:hsl(var(--white)); color:hsl(var(--text)); }

.more-button.black { border-color:hsla(var(--black),0); background-color:hsla(var(--black),0.8); color:hsl(var(--white)); }
.more-button.black.outline { border-color:hsl(var(--black)); color:hsl(var(--black)); }
.more-button.black:hover { border-color:hsl(var(--black)); background-color:hsl(var(--black)); color:hsl(var(--white)); }

.more-button.default { border-color:hsl(var(--text)); background-color:hsl(var(--text)); color:hsl(var(--white)); }
.more-button.default.outline { border-color:hsl(var(--text)); color:hsl(var(--text)); }
.more-button.default:hover { border-color:hsl(var(--text)); background-color:hsl(var(--text)); color:hsl(var(--white)); }

.more-button.first-dark { border-color:hsl(var(--first-dark)); background-color:hsl(var(--first-dark)); color:hsl(var(--white)); }
.more-button.first-dark.outline { color:hsl(var(--first-dark)); }
.more-button.first-dark:hover { border-color:hsl(var(--first-dark-hover)); background-color:hsl(var(--first-dark-hover)); color:hsl(var(--white)); }

.more-button.first { border-color:hsl(var(--first)); background-color:hsl(var(--first)); color:hsl(var(--white)); }
.more-button.first.outline { color:hsl(var(--first)); }
.more-button.first:hover { border-color:hsl(var(--first-dark)); background-color:hsl(var(--first-dark)); color:hsl(var(--white)); }

.more-button.first-light { border-color:hsl(var(--first-light)); background-color:hsl(var(--first-light)); color:hsl(var(--white)); }
.more-button.first-light.outline { color:hsl(var(--first-light)); }
.more-button.first-light:hover { border-color:hsl(var(--first)); background-color:hsl(var(--first)); color:hsl(var(--white)); }

.more-button.second-dark { border-color:hsl(var(--second-dark)); background-color:hsl(var(--second-dark)); color:hsl(var(--white)); }
.more-button.second-dark.outline { color:hsl(var(--second-dark)); }
.more-button.second-dark:hover { border-color:hsl(var(--second-dark-hover)); background-color:hsl(var(--second-dark-hover)); color:hsl(var(--white)); }

.more-button.second { border-color:hsl(var(--second)); background-color:hsl(var(--second)); color:hsl(var(--white)); }
.more-button.second.outline { color:hsl(var(--second)); }
.more-button.second:hover { border-color:hsl(var(--second-dark)); background-color:hsl(var(--second-dark)); color:hsl(var(--white)); }

.more-button.second-light { border-color:hsl(var(--second-light)); background-color:hsl(var(--second-light)); color:hsl(var(--white)); }
.more-button.second-light.outline { color:hsl(var(--second-light)); }
.more-button.second-light:hover { border-color:hsl(var(--second)); background-color:hsl(var(--second)); color:hsl(var(--white)); }

.more-button.third-dark { border-color:hsl(var(--third-dark)); background-color:hsl(var(--third-dark)); color:hsl(var(--white)); }
.more-button.third-dark.outline { color:hsl(var(--third-dark)); }
.more-button.third-dark:hover { border-color:hsl(var(--third-dark-hover)); background-color:hsl(var(--third-dark-hover)); color:hsl(var(--white)); }

.more-button.third { border-color:hsl(var(--third)); background-color:hsl(var(--third)); color:hsl(var(--white)); }
.more-button.third.outline { color:hsl(var(--third)); }
.more-button.third:hover { border-color:hsl(var(--third-dark)); background-color:hsl(var(--third-dark)); color:hsl(var(--white)); }

.more-button.third-light { border-color:hsl(var(--third-light)); background-color:hsl(var(--third-light)); color:hsl(var(--white)); }
.more-button.third-light.outline { color:hsl(var(--third-light)); }
.more-button.third-light:hover { border-color:hsl(var(--third)); background-color:hsl(var(--third)); color:hsl(var(--white)); }

.more-button.fourth-dark { border-color:hsl(var(--fourth-dark)); background-color:hsl(var(--fourth-dark)); color:hsl(var(--white)); }
.more-button.fourth-dark.outline { color:hsl(var(--fourth-dark)); }
.more-button.fourth-dark:hover { border-color:hsl(var(--fourth-dark-hover)); background-color:hsl(var(--fourth-dark-hover)); color:hsl(var(--white)); }

.more-button.fourth { border-color:hsl(var(--fourth)); background-color:hsl(var(--fourth)); color:hsl(var(--white)); }
.more-button.fourth.outline { color:hsl(var(--fourth)); }
.more-button.fourth:hover { border-color:hsl(var(--fourth-dark)); background-color:hsl(var(--fourth-dark)); color:hsl(var(--white)); }

.more-button.fourth-light { border-color:hsl(var(--fourth-light)); background-color:hsl(var(--fourth-light)); color:hsl(var(--white)); }
.more-button.fourth-light.outline { color:hsl(var(--fourth-light)); }
.more-button.fourth-light:hover { border-color:hsl(var(--fourth)); background-color:hsl(var(--fourth)); color:hsl(var(--white)); }

.more-button.grey-dark { border-color:hsl(var(--grey-dark)); background-color:hsl(var(--grey-dark)); color:hsl(var(--white)); }
.more-button.grey-dark.outline { color:hsl(var(--grey-dark)); }
.more-button.grey-dark:hover { border-color:hsl(var(--grey-dark-hover)); background-color:hsl(var(--grey-dark-hover)); color:hsl(var(--white)); }

.more-button.grey-mid { border-color:hsl(var(--grey-mid)); background-color:hsl(var(--grey-mid)); color:hsl(var(--white)); }
.more-button.grey-mid.outline { color:hsl(var(--grey-mid)); }
.more-button.grey-mid:hover { border-color:hsl(var(--grey-dark)); background-color:hsl(var(--grey-dark)); color:hsl(var(--white)); }

.more-button.grey-light { border-color:hsl(var(--grey-light)); background-color:hsl(var(--grey-light)); color:hsl(var(--grey-dark)); }
.more-button.grey-light.outline { color:hsl(var(--grey-light)); }
.more-button.grey-light:hover { border-color:hsl(var(--grey-mid)); background-color:hsl(var(--grey-mid)); color:hsl(var(--grey-dark)); }

.more-button.gradient-1-2 { border-color:transparent; background:linear-gradient(90deg, hsla(var(--first),1) 0%, hsla(var(--second),1) 50%, hsla(var(--second),1) 100%); background-size:200% auto; background-position:5% 50%; color:hsl(var(--white)); transition:background-position 500ms; }
.more-button.gradient-1-2:hover { border-color:transparent; color:hsl(var(--white)); background-position:95% center; }

.more-button.gradient-2-3 { border-color:transparent; background:linear-gradient(90deg, hsla(var(--second),1) 0%, hsla(var(--third),1) 50%, hsla(var(--third),1) 100%); background-size:200% auto; background-position:5% 50%; color:hsl(var(--white)); transition:background-position 500ms; }
.more-button.gradient-2-3:hover { border-color:transparent; color:hsl(var(--white)); background-position:95% center; }

.more-button.outline { background-color:transparent; }