html, body {} :root, ::after, ::before { /*----- COLOR VALUES -----*/ --black:#1a1a18; --black-rgb:26 26 24; --darkgrey:#333333; --darkgrey-rgb:51 51 51; --grey:#777777; --grey-rgb:119 119 119; --lightgrey:#efefef; --lightgrey-rgb:239 239 239; --white:#ffffff; --white-rgb:255 255 255; --blue:#1a70b8; --blue-rgb:26 112 184; --green:#bbcf00; --green-rgb:187 207 0; --orange-baerenstark:#fecb14; --orange-baerenstark-rgb:254 203 20; --purple:#652282; --purple-rgb:101 34 130; --purple-light:#9986bf; --purple-light-rgb:153 134 191; --green-contrast:#256434; --green-contrast-rgb:37 100 52; } body { /*----- TEXT COLOR -----*/ --color-txt: var(--grey); --color-txt-rgb: var(--grey-rgb); --color-txt-std: var(--grey); --color-txt-std-rgb: var(--grey-rgb); /*----- BACKGROUND COLOR -----*/ --color-bg: var(--white); --color-bg-rgb: var(--white-rgb); --color-bg-std: var(--white); --color-bg-std-rgb: var(--white-rgb); /*----- GRADIENTS -----*/ /*----- BUTTON COLORS -----*/ --btn-clr: var(--white); --btn-clr-rgb: var(--white-rgb); --btn-bgc: var(--orange-baerenstark); --btn-bgc-rgb: var(--orange-baerenstark-rgb); /*----- HEADLINE COLOR -----*/ --color-hdl: var(--orange-baerenstark); --color-hdl-rgb: var(--orange-baerenstark-rgb); } /*----- COLOR CLASSES -----*/ .black-clr, .black-clr *::before, .black-clr *::after, .clr .black-clr, .clr .black-clr *::before, .clr .black-clr *::after { --color-txt: var(--black); --color-txt-rgb: var(--black-rgb); --color-hdl: var(--black); --color-hdl-rgb: var(--black-rgb); --btn-bgc: var(--black); --btn-bgc-rgb: var(--black-rgb); } .black-cpt-clr *, .black-cpt-clr *::before, .black-cpt-clr *::after { --nav-cpt-clr: var(--black); --nav-cpt-clr-rgb: var(--black-rgb); } .black-bgc, .black-bgc *::before, .black-bgc *::after, .bgc .black-bgc, .bgc .black-bgc *::before, .bgc .black-bgc *::after { --color-bg: var(--black); --color-bg-rgb: var(--black-rgb); --btn-clr: var(--black); --btn-clr-rgb: var(--black-rgb); } * .black-bgc { background-color: var(--black); } section.black-bgc:not(.bgi) + section.black-bgc:not(.bgi), article.black-bgc:not(.bgi) + article.black-bgc:not(.bgi) { padding-top: 0; margin-top: 0; } .darkgrey-clr, .darkgrey-clr *::before, .darkgrey-clr *::after, .clr .darkgrey-clr, .clr .darkgrey-clr *::before, .clr .darkgrey-clr *::after { --color-txt: var(--darkgrey); --color-txt-rgb: var(--darkgrey-rgb); --color-hdl: var(--darkgrey); --color-hdl-rgb: var(--darkgrey-rgb); --btn-bgc: var(--darkgrey); --btn-bgc-rgb: var(--darkgrey-rgb); } .darkgrey-cpt-clr *, .darkgrey-cpt-clr *::before, .darkgrey-cpt-clr *::after { --nav-cpt-clr: var(--darkgrey); --nav-cpt-clr-rgb: var(--darkgrey-rgb); } .darkgrey-bgc, .darkgrey-bgc *::before, .darkgrey-bgc *::after, .bgc .darkgrey-bgc, .bgc .darkgrey-bgc *::before, .bgc .darkgrey-bgc *::after { --color-bg: var(--darkgrey); --color-bg-rgb: var(--darkgrey-rgb); --btn-clr: var(--darkgrey); --btn-clr-rgb: var(--darkgrey-rgb); } * .darkgrey-bgc { background-color: var(--darkgrey); } section.darkgrey-bgc:not(.bgi) + section.darkgrey-bgc:not(.bgi), article.darkgrey-bgc:not(.bgi) + article.darkgrey-bgc:not(.bgi) { padding-top: 0; margin-top: 0; } .grey-clr, .grey-clr *::before, .grey-clr *::after, .clr .grey-clr, .clr .grey-clr *::before, .clr .grey-clr *::after { --color-txt: var(--grey); --color-txt-rgb: var(--grey-rgb); --color-hdl: var(--grey); --color-hdl-rgb: var(--grey-rgb); --btn-bgc: var(--grey); --btn-bgc-rgb: var(--grey-rgb); } .grey-cpt-clr *, .grey-cpt-clr *::before, .grey-cpt-clr *::after { --nav-cpt-clr: var(--grey); --nav-cpt-clr-rgb: var(--grey-rgb); } .grey-bgc, .grey-bgc *::before, .grey-bgc *::after, .bgc .grey-bgc, .bgc .grey-bgc *::before, .bgc .grey-bgc *::after { --color-bg: var(--grey); --color-bg-rgb: var(--grey-rgb); --btn-clr: var(--grey); --btn-clr-rgb: var(--grey-rgb); } * .grey-bgc { background-color: var(--grey); } section.grey-bgc:not(.bgi) + section.grey-bgc:not(.bgi), article.grey-bgc:not(.bgi) + article.grey-bgc:not(.bgi) { padding-top: 0; margin-top: 0; } .lightgrey-clr, .lightgrey-clr *::before, .lightgrey-clr *::after, .clr .lightgrey-clr, .clr .lightgrey-clr *::before, .clr .lightgrey-clr *::after { --color-txt: var(--lightgrey); --color-txt-rgb: var(--lightgrey-rgb); --color-hdl: var(--lightgrey); --color-hdl-rgb: var(--lightgrey-rgb); --btn-bgc: var(--lightgrey); --btn-bgc-rgb: var(--lightgrey-rgb); } .lightgrey-cpt-clr *, .lightgrey-cpt-clr *::before, .lightgrey-cpt-clr *::after { --nav-cpt-clr: var(--lightgrey); --nav-cpt-clr-rgb: var(--lightgrey-rgb); } .lightgrey-bgc, .lightgrey-bgc *::before, .lightgrey-bgc *::after, .bgc .lightgrey-bgc, .bgc .lightgrey-bgc *::before, .bgc .lightgrey-bgc *::after { --color-bg: var(--lightgrey); --color-bg-rgb: var(--lightgrey-rgb); --btn-clr: var(--lightgrey); --btn-clr-rgb: var(--lightgrey-rgb); } * .lightgrey-bgc { background-color: var(--lightgrey); } section.lightgrey-bgc:not(.bgi) + section.lightgrey-bgc:not(.bgi), article.lightgrey-bgc:not(.bgi) + article.lightgrey-bgc:not(.bgi) { padding-top: 0; margin-top: 0; } .white-clr, .white-clr *::before, .white-clr *::after, .clr .white-clr, .clr .white-clr *::before, .clr .white-clr *::after { --color-txt: var(--white); --color-txt-rgb: var(--white-rgb); --color-hdl: var(--white); --color-hdl-rgb: var(--white-rgb); --btn-bgc: var(--white); --btn-bgc-rgb: var(--white-rgb); } .white-cpt-clr *, .white-cpt-clr *::before, .white-cpt-clr *::after { --nav-cpt-clr: var(--white); --nav-cpt-clr-rgb: var(--white-rgb); } .white-bgc, .white-bgc *::before, .white-bgc *::after, .bgc .white-bgc, .bgc .white-bgc *::before, .bgc .white-bgc *::after { --color-bg: var(--white); --color-bg-rgb: var(--white-rgb); --btn-clr: var(--white); --btn-clr-rgb: var(--white-rgb); } * .white-bgc { background-color: var(--white); } section.white-bgc:not(.bgi) + section.white-bgc:not(.bgi), article.white-bgc:not(.bgi) + article.white-bgc:not(.bgi) { padding-top: 0; margin-top: 0; } .blue-clr, .blue-clr *::before, .blue-clr *::after, .clr .blue-clr, .clr .blue-clr *::before, .clr .blue-clr *::after { --color-txt: var(--blue); --color-txt-rgb: var(--blue-rgb); --color-hdl: var(--blue); --color-hdl-rgb: var(--blue-rgb); --btn-bgc: var(--blue); --btn-bgc-rgb: var(--blue-rgb); } .blue-cpt-clr *, .blue-cpt-clr *::before, .blue-cpt-clr *::after { --nav-cpt-clr: var(--blue); --nav-cpt-clr-rgb: var(--blue-rgb); } .blue-bgc, .blue-bgc *::before, .blue-bgc *::after, .bgc .blue-bgc, .bgc .blue-bgc *::before, .bgc .blue-bgc *::after { --color-bg: var(--blue); --color-bg-rgb: var(--blue-rgb); --btn-clr: var(--blue); --btn-clr-rgb: var(--blue-rgb); } * .blue-bgc { background-color: var(--blue); } section.blue-bgc:not(.bgi) + section.blue-bgc:not(.bgi), article.blue-bgc:not(.bgi) + article.blue-bgc:not(.bgi) { padding-top: 0; margin-top: 0; } .green-clr, .green-clr *::before, .green-clr *::after, .clr .green-clr, .clr .green-clr *::before, .clr .green-clr *::after { --color-txt: var(--green); --color-txt-rgb: var(--green-rgb); --color-hdl: var(--green); --color-hdl-rgb: var(--green-rgb); --btn-bgc: var(--green); --btn-bgc-rgb: var(--green-rgb); } .green-cpt-clr *, .green-cpt-clr *::before, .green-cpt-clr *::after { --nav-cpt-clr: var(--green); --nav-cpt-clr-rgb: var(--green-rgb); } .green-bgc, .green-bgc *::before, .green-bgc *::after, .bgc .green-bgc, .bgc .green-bgc *::before, .bgc .green-bgc *::after { --color-bg: var(--green); --color-bg-rgb: var(--green-rgb); --btn-clr: var(--green); --btn-clr-rgb: var(--green-rgb); } * .green-bgc { background-color: var(--green); } section.green-bgc:not(.bgi) + section.green-bgc:not(.bgi), article.green-bgc:not(.bgi) + article.green-bgc:not(.bgi) { padding-top: 0; margin-top: 0; } .orange-baerenstark-clr, .orange-baerenstark-clr *::before, .orange-baerenstark-clr *::after, .clr .orange-baerenstark-clr, .clr .orange-baerenstark-clr *::before, .clr .orange-baerenstark-clr *::after { --color-txt: var(--orange-baerenstark); --color-txt-rgb: var(--orange-baerenstark-rgb); --color-hdl: var(--orange-baerenstark); --color-hdl-rgb: var(--orange-baerenstark-rgb); --btn-bgc: var(--orange-baerenstark); --btn-bgc-rgb: var(--orange-baerenstark-rgb); } .orange-baerenstark-cpt-clr *, .orange-baerenstark-cpt-clr *::before, .orange-baerenstark-cpt-clr *::after { --nav-cpt-clr: var(--orange-baerenstark); --nav-cpt-clr-rgb: var(--orange-baerenstark-rgb); } .orange-baerenstark-bgc, .orange-baerenstark-bgc *::before, .orange-baerenstark-bgc *::after, .bgc .orange-baerenstark-bgc, .bgc .orange-baerenstark-bgc *::before, .bgc .orange-baerenstark-bgc *::after { --color-bg: var(--orange-baerenstark); --color-bg-rgb: var(--orange-baerenstark-rgb); --btn-clr: var(--orange-baerenstark); --btn-clr-rgb: var(--orange-baerenstark-rgb); } * .orange-baerenstark-bgc { background-color: var(--orange-baerenstark); } section.orange-baerenstark-bgc:not(.bgi) + section.orange-baerenstark-bgc:not(.bgi), article.orange-baerenstark-bgc:not(.bgi) + article.orange-baerenstark-bgc:not(.bgi) { padding-top: 0; margin-top: 0; } .purple-clr, .purple-clr *::before, .purple-clr *::after, .clr .purple-clr, .clr .purple-clr *::before, .clr .purple-clr *::after { --color-txt: var(--purple); --color-txt-rgb: var(--purple-rgb); --color-hdl: var(--purple); --color-hdl-rgb: var(--purple-rgb); --btn-bgc: var(--purple); --btn-bgc-rgb: var(--purple-rgb); } .purple-cpt-clr *, .purple-cpt-clr *::before, .purple-cpt-clr *::after { --nav-cpt-clr: var(--purple); --nav-cpt-clr-rgb: var(--purple-rgb); } .purple-bgc, .purple-bgc *::before, .purple-bgc *::after, .bgc .purple-bgc, .bgc .purple-bgc *::before, .bgc .purple-bgc *::after { --color-bg: var(--purple); --color-bg-rgb: var(--purple-rgb); --btn-clr: var(--purple); --btn-clr-rgb: var(--purple-rgb); } * .purple-bgc { background-color: var(--purple); } section.purple-bgc:not(.bgi) + section.purple-bgc:not(.bgi), article.purple-bgc:not(.bgi) + article.purple-bgc:not(.bgi) { padding-top: 0; margin-top: 0; } .purple-light-clr, .purple-light-clr *::before, .purple-light-clr *::after, .clr .purple-light-clr, .clr .purple-light-clr *::before, .clr .purple-light-clr *::after { --color-txt: var(--purple-light); --color-txt-rgb: var(--purple-light-rgb); --color-hdl: var(--purple-light); --color-hdl-rgb: var(--purple-light-rgb); --btn-bgc: var(--purple-light); --btn-bgc-rgb: var(--purple-light-rgb); } .purple-light-cpt-clr *, .purple-light-cpt-clr *::before, .purple-light-cpt-clr *::after { --nav-cpt-clr: var(--purple-light); --nav-cpt-clr-rgb: var(--purple-light-rgb); } .purple-light-bgc, .purple-light-bgc *::before, .purple-light-bgc *::after, .bgc .purple-light-bgc, .bgc .purple-light-bgc *::before, .bgc .purple-light-bgc *::after { --color-bg: var(--purple-light); --color-bg-rgb: var(--purple-light-rgb); --btn-clr: var(--purple-light); --btn-clr-rgb: var(--purple-light-rgb); } * .purple-light-bgc { background-color: var(--purple-light); } section.purple-light-bgc:not(.bgi) + section.purple-light-bgc:not(.bgi), article.purple-light-bgc:not(.bgi) + article.purple-light-bgc:not(.bgi) { padding-top: 0; margin-top: 0; } .green-contrast-clr, .green-contrast-clr *::before, .green-contrast-clr *::after, .clr .green-contrast-clr, .clr .green-contrast-clr *::before, .clr .green-contrast-clr *::after { --color-txt: var(--green-contrast); --color-txt-rgb: var(--green-contrast-rgb); --color-hdl: var(--green-contrast); --color-hdl-rgb: var(--green-contrast-rgb); --btn-bgc: var(--green-contrast); --btn-bgc-rgb: var(--green-contrast-rgb); } .green-contrast-cpt-clr *, .green-contrast-cpt-clr *::before, .green-contrast-cpt-clr *::after { --nav-cpt-clr: var(--green-contrast); --nav-cpt-clr-rgb: var(--green-contrast-rgb); } .green-contrast-bgc, .green-contrast-bgc *::before, .green-contrast-bgc *::after, .bgc .green-contrast-bgc, .bgc .green-contrast-bgc *::before, .bgc .green-contrast-bgc *::after { --color-bg: var(--green-contrast); --color-bg-rgb: var(--green-contrast-rgb); --btn-clr: var(--green-contrast); --btn-clr-rgb: var(--green-contrast-rgb); } * .green-contrast-bgc { background-color: var(--green-contrast); } section.green-contrast-bgc:not(.bgi) + section.green-contrast-bgc:not(.bgi), article.green-contrast-bgc:not(.bgi) + article.green-contrast-bgc:not(.bgi) { padding-top: 0; margin-top: 0; } /*----- GRADIENT CLASSES -----*/ /*========== CONTRAST SETTINGS ==========*/ body.hcm, body.hcm :is(h1, h2, h3, h4, h5, h6, p, li, a, blockquote), body.hcm *::after, body.hcm *::before { --orange-baerenstark: var(--black); --orange-baerenstark-rgb: var(--black-rgb); --grey: var(--black); --grey-rgb: var(--black-rgb); --green: var(--black); --green-rgb: var(--black-rgb); } @media (forced-colors: active) { body, body :is(h1, h2, h3, h4, h5, h6, p, li, a, blockquote), body *::after, body *::before { --orange-baerenstark: var(--black); --orange-baerenstark-rgb: var(--black-rgb); --grey: var(--black); --grey-rgb: var(--black-rgb); --green: var(--black); --green-rgb: var(--black-rgb); } } /*========== SLIDER SETTINGS ==========*/ /*========== FONT SETTINGS ==========*/