/*
 Theme Name:   Can I Play Theme
 Description:  Custom theme for Can I Play That?
 Author:       Marijn - ActiveB1t
 Author URI:   https://www.abitofaccess.com
 Version:      1.4.3
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  cipt
*/
:root {
	--gw: hsl(0,0%,100%);
	--g78: hsl(0,0%,78%);
	--g36: hsl(0,0%,36%);
	--g24: hsl(0,0%,24%);
	--g14: hsl(0,0%,14%);
	--gb: hsl(0,0%,0%);
	--sh: hsl(0,0%,0%,0.4);
	--p: hsl(182, 60%, 58%);
	--rd: 0.625rem;
	--font: Raleway, sans-serif;
	--bg: hsl(0,0%,92%);
	--bg-f: hsl(225, 14%, 22%);
	--bg-c: var(--gw);
	--nav: var(--g14);
	--nav-c: var(--gw);
	--nav-b: 1px solid var(--g36);
	--copy: var(--g78);
	--c: var(--g14);
	--f-c: var(--nav-c);
	--b: 0;
	--sft: var(--g36);
	--sft-b: var(--g78);
	--a: var(--green);
	--a-i: inherit;
	--a-i-h: inherit;
	--g1: var(--green);
	--g2: var(--purple);
	--a-h: hsl(182, 93%, 49%);
	--fcs: hsl(184, 70%, 55%);
	--btn: linear-gradient(120deg, hsl(260, 35%, 46%), hsl(260, 35%, 39%));
	--btn-h: linear-gradient(120deg, hsl(260, 35%, 46%), hsl(260, 35%, 53%));
	--btn-c: var(--gw);
	--btn-b: 0;
	--in: var(--gw);
	--in-c: var(--gb);
	--in-b: var(--btn-b);
	--green: hsl(182, 93%, 27%);
	--purple: hsl(260, 35%, 46%);
	--blue: hsl(204, 88%, 41%);
	--grey: var(--g36);
	--orange: hsl(24, 86%, 41%);
	--red: hsl(357, 100%, 46%);
	--shd: 0 1px 3px 0 var(--sh);
	--shd-h: 0 1px 6px 0 var(--sh);
	--shd-i: inset 0 0 3px 0 var(--sh);
	--patreon: linear-gradient(120deg, hsl(357, 100%, 63%), hsl(357, 100%, 56%));
	--patreon-h: linear-gradient(120deg, hsl(357, 100%, 63%), hsl(357, 100%, 70%));
	--twitter: linear-gradient(120deg, hsl(204, 88%, 41%), hsl(204, 88%, 34%));
	--twitter-h: linear-gradient(120deg, hsl(204, 88%, 41%), hsl(204, 88%, 48%));
	--pride: linear-gradient(90deg, hsl(0,100%,100%) 0%, hsl(330,100%,75%) 4%, hsl(210,100%,75%) 12%, hsl(30,45%,35%) 20%, hsl(0,100%,0%) 30%, hsl(0,100%,50%) 40%, hsl(60,100%,50%) 52%, hsl(120,100%,50%) 64%, hsl(180,100%,50%) 76%, hsl(240,100%,50%) 88%, hsl(300,100%,50%) 100%);
	--candycorn: linear-gradient(90deg, hsl(55,100%,60%) 0%, hsl(55,100%,60%) 4%, hsl(23, 97%, 61%) 5%, hsl(23, 97%, 61%) 11%, hsl(0,100%,100%) 12%, hsl(0,100%,100%) 14%, hsl(23, 97%, 61%) 20%);
}
html.cipt-dark {
	--bg: var(--g14);
	--bg-c: hsl(225,8%,19%);
	--c: var(--gw);
	--sft: var(--g78);
	--sft-b: var(--g36);
	--a: var(--p);
	--g1: var(--p);
	--g2: hsl(260, 35%, 67%);
	--a-h: hsl(182, 60%, 80%);
}
html.cipt-contrast {
	--bg: hsl(41, 100%, 97%);
	--bg-c: var(--bg);
	--bg-f: var(--bg);
	--nav-c: var(--a);
	--copy: var(--c);
	--nav: var(--bg);
	--pride: var(--bg);
	--c: var(--g24);
	--f-c: var(--c);
	--sft: var(--c);
	--sft-b: var(--g36);
	--b: 2px solid var(--sft-b);
	--a: var(--g14);
	--a-h: var(--g24);
	--a-i: var(--a);
	--a-i-h: var(--a-h);
	--g1: var(--c);
	--g2: var(--c);
	--btn: hsl(0, 10%, 83%);
	--btn-h: var(--btn);
	--btn-c: var(--g14);
	--btn-b: 2px solid var(--g14);
	--shd: 0;
	--shd-h: 0;
	--shd-i: 0;
	--green: var(--bg);
	--purple: var(--bg);
	--blue: var(--bg);
	--grey: var(--bg);
	--orange: var(--bg);
	--red: var(--bg);
	--patreon: var(--btn);
	--twitter: var(--btn);
}
html.cipt-dark.cipt-contrast {
	--bg: var(--gb);
	--c: var(--gw);
	--sft-b: hsl(0, 0%, 65%);
	--a: hsl(240, 100%, 75%);
	--a-h: hsl(268, 95%, 85%);
	--fcs: hsl(55, 100%, 60%);
	--btn: var(--g36);
	--btn-c: var(--fcs);
	--btn-b: 2px solid var(--fcs);
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-high-contrast-adjust: none; forced-color-adjust: none; font-size: 16px; }
body { background-color: var(--bg); }
html, body { height: 100%; }
div#page { min-height: 100%; }
* { -webkit-box-sizing: border-box; box-sizing: border-box; }
*::-webkit-scrollbar { width: 0.8rem; }
*::-webkit-scrollbar-thumb { min-height: 3rem; background-color: var(--sft); border-radius: var(--rd); }
address, article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; }
embed, iframe, object { max-width: 100%; }
.clearfix::after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.aria-ref { display: none; }
body, button, input, select, textarea { color: var(--c); font-family: 'Open Sans', serif; font-size: 1rem; line-height: 1.6; word-wrap: break-word; }
a, a:visited { color: var(--a); }
a, a:visited, a:focus, a:active, a:hover { text-decoration: none; }
a[target="_blank"]:after { content: ""; display: inline-block; width: 1em; height: 1em; overflow: hidden; vertical-align: sub; margin-left: 0.25rem; background-image: url(img/external.svg); background-repeat: no-repeat; background-size: 1em; background-position: top left; }
.cipt-dark a[target="_blank"]:after { filter: brightness(22); }
a img { border: 0; }
a:focus, input:focus, textarea:focus, select:focus, button:focus, .focus { outline: 2px solid var(--fcs) !important; }
svg.logo { fill: currentColor; height: 1em; }
.logo .logo_p { fill: var(--p); }
a.header_logo svg.logo { fill: var(--c); }
h1, h2, h3, h4, h5, h6 { font-size: 2.25rem; padding-bottom: 1.25rem; color: var(--c); font-weight: 600; font-family: var(--font); line-height: 1.2; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }
p, address, form { margin-bottom: 1rem; }
strong, b, th, dt { font-weight: 600; }
cite, em, i, address, .disclaimer { font-style: italic; }
sup, sub { font-size: 0.625rem; height: 0; line-height: 1; position: relative; vertical-align: baseline; }
sup { bottom: 1ex; }
sub { top: 0.5ex; }
table { border-collapse: collapse; border-spacing: 0; margin: 0 0 1.5em; width: 100%; }
th, td { border: 1px solid var(--sft-b); padding: 0.325rem 0.625rem; }
caption, th, td { text-align: left; }
ul { list-style: none; }
ol { list-style: decimal; }
li > ul, li > ol { margin: 0 0 0 10px; }
pre { margin-bottom: 20px; overflow: auto; padding: 20px; border: 1px solid var(--sft-b); }
pre, code, kbd, var, samp, tt { font-family: "Courier 10 Pitch",Courier,monospace; font-size: 0.9rem; line-height: 1.4; white-space: pre-wrap; }
abbr, acronym, dfn { border-bottom: 1px dotted var(--sft); cursor: help; }
ins { background: hsl(0,0%,0%,0.1); }
hr { border-top: 1px solid var(--sft-b); height: 0; margin: 2rem 0; }
dt { margin-bottom: 0.375rem; }
dd { margin-bottom: 1.5rem; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
blockquote, .wp-block-pullquote blockquote, .wp-block-quote, .wp-block-quote.is-style-large { width: 90%; margin: 2rem auto; background-color: transparent; color: var(--g1); padding: 0 1rem; text-align: center; border: 1px solid var(--g1); border-width: 1px 0; }
blockquote p, .wp-block-pullquote blockquote p, .wp-block-quote p, .wp-block-quote.is-style-large p { font-family: var(--font); font-weight: 600; font-size: 1.2em; font-style: italic; line-height: 1.6; position: relative; padding: 1rem; }
blockquote a { color: var(--a-i); text-decoration: underline; }
blockquote a:hover { color: var(--a-i-h); }
blockquote cite, .wp-block-pullquote blockquote cite, .wp-block-quote cite, .wp-block-quote.is-style-large cite, .wp-block-quote__citation, .wp-block-quote footer { color: inherit; font-size: 0.8rem; position: relative; top: -1.4rem; margin: 0; font-style: normal; float: right; }
figure.wp-block-pullquote { margin: 0; border: 0; padding: 0; text-align: left;}
.visually-hidden { position: absolute !important; height: 1px !important; width: 1px !important; overflow: hidden !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px) !important; white-space: nowrap !important; background-color: var(--bg-c) !important; color: var(--c) !important; }
.screen-reader-text { background-color: var(--bg-c) !important; color: var(--c) !important; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { border: var(--b); border-radius: var(--rd); box-shadow: var(--shd-h); clip: auto !important; clip-path: none; display: block; font-size: 0.9rem; font-size: 14px; font-weight: 600; height: auto; left: 5px; line-height: normal; padding: 1rem 1.5rem 0.9rem; text-decoration: none; top: 5px; width: auto; z-index: 100000; }
main[tabindex="-1"]:focus { outline: 0; }
input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="url"], textarea { -webkit-appearance: none !important; appearance: none !important; height: 3rem; padding: 0.25rem 3.325rem 0.25rem 0.625rem; line-height: 1.25rem; width: 95%; margin: 0 0 2rem; color: var(--in-c); background-color: var(--in); box-shadow: var(--shd-i); border: var(--in-b); border-radius: var(--rd); }
input[type="button"], input[type="submit"], button { margin-bottom: 30px; padding: 5px 10px; color: var(--btn-c); background: var(--btn); border-radius: var(--rd); font-size: 1rem; border: var(--btn-b); -webkit-appearance: none !important; appearance: none !important; cursor: pointer; display: inline-block; }
input[type="button"]:active, input[type="submit"]:active { box-shadow: inset 0 0 0 2px var(--fcs); }
nav form { margin: 0.5rem 0.5rem 0.5rem 0; }
nav form input[type="text"], nav form input[type="search"] { min-width: 20rem; margin: 0; }
nav form button { font-size: 1.75rem; margin-bottom: 0; height: 2.5rem; width: 2.5rem; padding: 0; margin-left: -3rem; margin-top: 0.25rem; vertical-align: top; }
svg.icon { width: 1em; height: 1em; vertical-align: middle; margin: 0 0.5rem 0.125rem 0; }
button svg.icon { vertical-align: initial; margin: 0; }
/* Menu */
nav li > ul, nav li > ol { margin: 0; list-style: none; }
#site-navigation { width: 100%; box-shadow: var(--shd); position: relative; background-color: var(--nav); z-index: 999; border-bottom: var(--nav-b); padding: 0; }
.pride:after, .pride_top:before { background: var(--pride); content: ""; display: block; height: 0.125rem; width: 100%; visibility: visible; border: 0 solid hsl(0,0%,100%,0.2); border-width: 1px 0; }
#site-navigation .inner-wrap { position: relative; }
.main-navigation { width: 100%; text-align: center; }
nav, nav a, nav a:visited { color: var(--nav-c); }
nav li { float: left; position: relative; padding: 0 1.2rem 0 0; }
nav a, nav li > span, nav li > label { display: block; float: none; height: 2rem; line-height: 2rem; font-size: 1rem; font-family: var(--font); font-weight: 600; margin: 0.25rem 0; }
.home-icon { float: left; width: 5rem; height: 2rem; line-height: 2rem; font-size: 1.25rem; text-align: center; border-radius: var(--rd); padding: 0; margin: 0.25rem 1rem 0 0; transition: 0.3s; }
.home-icon svg { height: 0.9em; width: 3em; margin-top: 0.5rem; }
nav a:hover, .current-menu-item > a, .current_page_ancestor > a, .current-menu-ancestor > a, .current_page_item a, nav li:hover > a, nav li:focus > a, .menu-toggle:hover { color: var(--nav-c); text-decoration: underline; text-decoration-color: var(--nav-c); text-underline-offset: 0.25rem; }
.menu-item-has-children > a:after { content: ''; padding-right: 1.5rem; background-image: url('img/submenu.svg'); background-repeat: no-repeat; background-position: center right; background-size: 1rem; }
nav ul.nav-right { float: right; }
nav ul li ul { position: absolute; left: -99999px; z-index: 100; width: auto; background-color: var(--nav); border-radius: 0 0 var(--rd) var(--rd); border: var(--nav-b); border-width: 0 1px 1px 1px; box-shadow: var(--shd); }
nav ul li ul li { float: none; padding: 0 0.625rem; }
nav ul li ul li a { float: none; text-align: left; white-space: nowrap; }
nav ul li:hover > ul, nav ul li:focus > ul, nav ul li:focus-within > ul, nav ul li.focus > ul { left: auto; }
.menu-toggle { display: none; }
.menu-toggle, .menu-toggle:hover, .menu-toggle:focus { color: var(--gw); margin: 0 0 0 0.5rem; text-align: center; padding: 0.5rem; line-height: 1.5rem; background: none; background-color: transparent; width: auto; border-radius: 0.325rem; box-shadow: none; border: 0; }
button.menu-toggle svg.icon { font-size: 1.6rem; vertical-align: middle; color: var(--gw); margin: 0 0 0 0.5rem; }
.main-small-navigation .menu-item-has-children > a:after { content: unset; }
.main-small-navigation ul, .main-small-navigation li { width: 100%; float: none; position: relative; left: auto; margin: 0; border: 0; box-shadow: none; }
.nav-right > li { padding: 0 0 0 1rem; }
.nav-right > li > a, .nav-right > li > span, .nav-right > li > label { background: var(--btn); color: var(--btn-c); border-radius: 0.9rem; border: var(--btn-b); padding: 0 0.625rem; }
.nav-right > li:hover > ul, .nav-right > li:focus, .nav-right > li:focus-within > ul { left: auto; right: 0; }
/* Preferences: */
.toggle { float: left; display: block; width: 105%; width: max-content; white-space: nowrap;  height: 1.5rem; overflow: hidden; line-height: 1.5rem; font-size: 0.9rem; padding: 0.5rem 0; color: var(--btn-c); box-sizing: content-box; cursor: pointer; }
.toggle span:first-of-type { float: left; box-sizing: content-box; width: 2rem; height: 1rem; padding: 0.25rem; margin: 0 0.9rem 0 0; background-color: var(--grey); border: var(--btn-b); border-radius: 0.75rem; transition: background-color .3s; }
.toggle span:first-of-type:before { float: left; content: " "; box-sizing: border-box; height: 1rem; width: 1rem; background-color: var(--btn-c); border-radius: 50%; transition: transform .3s; }
.toggle input:checked + span { background-color: var(--green); }
.toggle input:checked + span:before { content: " "; transform: translateX(1rem); }
.toggle input:focus + span, .toggle:hover input + span { background: var(--btn); }
.toggle:hover, .toggle:focus-within { text-decoration: underline; text-underline-offset: 0.25rem; }
.toggle input, .toggle input:focus { appearance: none; -webkit-appearance: none; float: left; width: 0; height: 0; margin: 0; border: 0; outline: 0 !important; }
figure { margin: 0 0 1em 0; text-align: center; }
figcaption { font-size: 0.8rem; }
img { max-width: 100%; height: auto; vertical-align: top; margin-bottom: 1.125rem; }
.article-content img, .widget img { max-width: 100%; width: 100%; }
img.size-full, img.size-large { max-width: 100%; height: auto; }
img#wpstats { display: none; }
.alignleft { display: inline; float: left; margin-right: 2rem; }
.alignright { display: inline; float: right; margin-left: 2rem; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }
.wp-caption { border: 1px solid var(--sft-b); margin-bottom: 1.5rem; max-width: 100%; }
.wp-caption img[class*="wp-image-"] { display: block; margin: 1.2% auto 0; max-width: 98%; }
.wp-caption-text { text-align: center; }
.wp-caption .wp-caption-text { margin: 0.8075rem 0; }
/* Titles */ 
.page-title, .widget-title { border-bottom: 2px solid var(--green); font-size: 1.6rem; color: var(--c); width: 100%; padding: 0; margin: 0 0 2rem 0; }
.page-title span, .widget-title span, .widget-title a { font-size: 1.6rem; color: var(--c); padding: 0.375rem 0.75rem; display: inline-block; text-decoration: none; }
.article-content .widget-title { border: 0; }
/* Double feature widget */
.widget_cards_flex { max-width: 1140px; margin: 0 auto 2rem auto; }
.double_feature { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; }
.double_feature > p { width: 100%; padding: 0 0.8rem; }
.double_feature > a { flex: 0 0 49%; padding: 0; font-size: 1.2rem; text-align: center; background-color: var(--green); color: var(--btn-c); box-shadow: var(--shd); border: var(--btn-b); border-radius: var(--rd); overflow: hidden; margin: 0 0 1rem 0; }
.double_feature > a span.ratio_21_9 { padding-top: 42.85%; }
.double_feature > a span.ratio_21_9 > span { background-size: cover; }
/* Aspect ratios */
figure.ratio_16_9, span.ratio_16_9, .wp-embed-aspect-16-9 { height: 0; overflow: hidden; padding-top: 56.25%; position: relative; display: block; }
figure.ratio_16_9 span, figure.ratio_16_9 a, span.ratio_16_9 > span, .wp-embed-aspect-16-9 > .wp-block-embed__wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
figure.ratio_4_3 { padding-top: 75%; }
.wp-embed-aspect-16-9 > .wp-block-embed__wrapper > iframe { width: 100%; height: 100%; }
/* Widgets General CSS */
.secondary .widget { margin-bottom: 2.25rem; }
/* Header */
a.header_logo { display: block; width: 42%; margin: 0 auto; padding: 1rem 0; }
a.header_logo svg { width: 100%; height: auto; }
#header-text-nav-container { background-color: var(--bg-c); }
/* Content */
.inner-wrap { margin: 0 auto; max-width: 1140px; }
main { padding: 2rem 0 1.25rem; background-color: var(--bg); }
main > .inner-wrap { padding-bottom: 1.25rem; }
.primary { float: left; width: 70.17543859%; }
.secondary { float: right; width: 27.19298245%; }
#content .post { box-shadow: var(--shd); background-color: var(--bg-c); border: var(--b); border-radius: var(--rd); margin-bottom: 2rem; overflow: hidden; }
#content .post img { margin-bottom: 0; }
#content .post .article-content { padding: 1rem 1rem 2rem 1rem; max-width: 800px; margin: auto; }
.article-content ol, .article-content ul { list-style-position: outside; margin: 0 0 2rem 1rem; }
.article-content ul { list-style: square; }
.article-content li { line-height: 1.6; }
.article-content li > ul, .entry-content li > ol { margin-bottom: 0; }
.article-content a { text-decoration: underline; text-underline-offset: 0.1rem; }
.article-content a:hover { color: var(--a-h); }
.post .article-content h2, .post .article-content h3, .post .article-content h4 { padding-top: 1em; }
/* Custom blocks */
aside.wp-block-blocks-aside-block { font-style: italic; font-weight: 600; margin-bottom: 1rem; }
figure.spoiler > div { position: relative; overflow: hidden; }
figure.spoiler img { vertical-align: bottom; filter: blur(20px) grayscale(100%); transition: 0.3s; }
figure.spoiler button { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 3rem; width: 10rem; margin: auto; }
figure.nospoiler img { filter: none; }
figure.nospoiler button { display: none; }
/* Previous / Next */
.default-wp-page { clear: both; margin-top: 2rem; }
.previous a, .next a { padding: 0.375rem 0; color: var(--c); text-decoration: underline; }
.previous a:hover, .next a:hover { color: var(--a); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: hsl(0,0%,0%,0.1); }
/* Socials */
.socials { text-align: center; clear: both; }
.socials a, .socials a:hover { display: inline-block; vertical-align: top; box-sizing: content-box; text-align: center; background: var(--btn); color: var(--btn-c); border: var(--btn-b); border-radius: 50%; }
.cipt-author .socials a { margin: 0.5rem 0.2rem 0; width: 1.6rem; height: 1.6rem; line-height: 1.4rem; font-size: 1.125rem; padding: 0.2rem; }
.secondary .socials a, footer > .socials a {  margin: 0.5rem 0.5rem 0; width: 2.4rem; height: 2.4rem; line-height: 2rem; font-size: 1.6rem; padding: 0.4rem; }
.socials a svg { margin: 0; }
/* Footer */
footer { font-size: 0.9rem; line-height: 1.4; border-top: var(--nav-b); background-color: var(--bg-f); padding: 0 0 2rem 0; }
footer > .footer_widgets { width: 96%; max-width: 1140px; margin: 2rem auto; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 1rem; }
footer > .footer_widgets > .widget { flex: 1 0 31%; min-width: 300px; color: var(--f-c); padding: 0.625rem; border-radius: var(--rd); background-color: var(--nav); box-shadow: var(--shd); margin: 0; text-align: center; }
footer > .footer_widgets > .widget h2 { font-size: 1.125rem; line-height: 1.5em; color: var(--f-c); }
footer > .footer_widgets form { width: 100%; text-align: left; }
footer > .footer_widgets label { width: 4rem; display: inline-block; text-align: right; padding: 0 0.5rem 0 0; }
footer > .footer_widgets input[type="email"] { margin: 0; line-height: 1.75rem; width: calc(100% - 5rem); }
footer > .footer_widgets input[type="submit"] { margin: 0 0 0 -5.5rem; font-size: 0.9rem; width: 5rem; padding: 0; height: 2.5rem; }
footer > div.copyright { color: var(--copy); text-align: center; }
footer > div.copyright svg { height: 0.7em; width: 3em; margin-right: 0.625rem; }
footer > div.copyright a { color: var(--a-i); text-decoration: underline; }
footer > div.copyright a:hover { color: var(--a-i-h); }
footer > .socials { margin: 0 0 2rem 0; }
/* Scroll to Top */
a#scroll-up { bottom: 1.25rem; position: fixed; right: 1.25rem; color: var(--a); border: var(--btn-b); font-size: 2.5rem; line-height: 2.5rem; display: none; opacity: 0.5; z-index: 999; }
a#scroll-up svg.icon { margin: 0; }
a#scroll-up:hover { opacity: 1; }
/* Button and ad widgets */
.cipt_button_widget, .cipt_ad_widget { text-align: center; }
.widget_cipt_ad_widget a { display: block; margin: 1.25rem 0 0 0; padding: 0; }
.widget_cipt_ad_widget a img { margin: 0; border: var(--btn-b); border-radius: var(--rd); box-shadow: var(--shd); }
.cipt_button_widget a.btn { display: inline-block; padding: 1rem; background: var(--patreon); color: var(--btn-c); font-weight: bold; font-size: 1.2rem; line-height: 1.2rem; margin: 0 auto; border: var(--btn-b); border-radius: var(--rd); box-shadow: var(--shd); }
.cipt_button_widget a.btn:hover { background: var(--patreon-h); }
.cipt_button_widget a.btn.twitter { background: var(--twitter); }
.cipt_button_widget a.btn.twitter:hover { background: var(--twitter-h); }
.cipt_button_widget a.btn svg { display: inline-block; width: 1.2rem; height: 1.2rem; margin: 0 1rem 0 0; fill: var(--btn-c); vertical-align: top; }
/* Large text */
html.cipt-large { font-size: 32px; }
html.cipt-large #content .post .article-content { padding: 1rem 0.5rem; }
html.cipt-large footer > .footer_widgets > .widget { flex: 0 0 100%; }
/* Progress bar */
div#progress_bar { display: none; width: 100%; height: 3px; position: relative; top: 0px; margin: 0 0 -1px 0; background-color: transparent; }
.cipt-progress body.single div#progress_bar, .cipt-progress body.page div#progress_bar { display: block; }
div#progress_bar div { width: 0%; height: 100%; background-color: var(--fcs); transition: 0.3s; }
/* CIPT Scores */
.cipt-scores { width: 100%; margin: 1rem auto 0 auto; }
#after-scores { height: 3rem; }
.cipt-score-disclaimer { border-top: 1px solid var(--g1); padding: 1rem 0 0 0; font-size: 0.8rem; }
.cipt-scores h2 { font-size: 1.5em; }
.score-row { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 1rem 0; border-bottom: 1px solid var(--g1); }
.score-row:last-of-type { align-items: stretch; }
.score-summary { flex: 1 1 75%; }
.score-summary span.aspect { font-size: 1em; padding-right: 1rem; color: var(--sft); }
.score-summary p { padding: 1rem 0; margin: 0; }
.score-total { flex: 1 1 auto;  text-align: center; }
.score-total h3 { font-size: 1.2rem; padding: 0.5rem 0; font-weight: 900; letter-spacing: 0.1rem; }
.score-total span { font-family: var(--font); font-weight: 900; font-size: 3rem; line-height: 2rem; }
.score-total span.incr { font-size: 1.5rem; vertical-align: super; }
.score-total small { line-height: 2rem; font-weight: 600; font-size: 0.9rem; display: block; }
.pro-con { flex: 1 1 50%; }
ul.pro, ul.con { list-style-type: none; margin: 0; }
ul.pro li, ul.con li { margin: 0 0 0.5rem 1rem; }
ul.pro li:before, ul.con li:before { content: "+"; display: inline-block; width: 1.2rem; height: 1.2rem; line-height: 1.2rem; font-size: 1.6rem; font-family: var(--font); font-weight: 600; background-color: var(--green); color: var(--f-c); border-radius: 50%; text-align: center; vertical-align: middle; position: relative; left: -0.5rem; }
ul.con li:before { content: "−"; background-color: var(--red); }
/* CIPT Author info */
.cipt-author { padding: 1rem; display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; gap: 1rem; }
.cipt-author > div { flex: 1 1 75%; }
.cipt-author > div:first-child { max-width: 25%; }
.cipt-author img { width: 100%; border-radius: var(--rd); }
span.role { display: block; font-size: 1.2rem; color: var(--c); padding-right: 8rem; }
span.pronouns { float: right; margin-top: -1.2rem; font-size: 1rem; color: var(--c); }
.cipt-author p { padding: 0.5rem 0; margin: 0; }
.cipt-author a { text-transform: uppercase; letter-spacing: 0.1rem; }
/* Category links */
div.category a, div.category span { border-bottom: 2px solid var(--green); color: var(--c); font-size: 0.75rem; margin: 0 1rem 0 0; padding: 0.25rem 0.125rem; line-height: 1.37; display: inline-block; }
/* Chonky titles */
.post header h1, .cipt-author h1, .cipt-author h2, .cipt-scores h2 { color: var(--g1); font-weight: 900; text-transform: uppercase; letter-spacing: 0.1rem; padding: 0 0 0.5rem 0; }
.cipt-author h1, .cipt-author h2 { font-size: 2rem; border-bottom: 1px solid var(--c); }
@supports (-webkit-background-clip: text) {
	.post header h1, .cipt-author h1, .cipt-author h2, blockquote p, .cipt-scores h2, .score-total { background: linear-gradient(170deg, var(--g1), var(--g2)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
}
a.home-icon:hover, a.home-icon:focus, input[type="button"]:hover, input[type="submit"]:hover, button:hover, .nav-right > li:hover > a, .nav-right > li:hover > span, .nav-right > li:hover > label, .socials a:hover { background: var(--btn-h); }
/* Shortcode Author changes */
.post .article-content .cipt-author { padding: 2rem 0; margin: 0; clear: both; }
.post .article-content .cipt-author div:first-child { margin: 0 1rem 1rem 0; }
.post .article-content .cipt-author h2 { padding-top: 0; border: 0; }
/* CIPT Cards */
.cards, .cards-columns { margin: 0 0 2rem 0; }
.content-columns, .cards-columns { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.content-columns > div, .cards-columns .card { flex: 1 1 auto; max-width: 49%; align-self: stretch; }
.three-columns .card { max-width: 32%; }
.four-columns .card { max-width: 24%; }
.cipt-large .cards-columns .card { max-width: 100%; }
.card { background-color: var(--bg-c); box-shadow: var(--shd); padding: 0 0 1rem 0; border: var(--b); border-radius: var(--rd); overflow: hidden; display: inline-block; margin: 0 0 1rem 0; display: flex; flex-flow: column nowrap; }
.post header > div, .card > div { margin: 0; padding: 0; }
.cards-list .card { flex-flow: row; align-items: center; padding: 0; }
.cards-list .card > div:first-child { width: 36%; min-width: 36%; }
.cards-list .card > div:last-child { width: auto; }
.post header { margin-bottom: 1rem; }
.post header figure, .post header figure img, .card figure, .card figure img { width: 100%; margin: 0; }
.post header h1, .post header h2, .post header h3 { margin: 1rem; }
.card h2, .card h3 { margin: 1rem; padding: 0; font-size: 1.375rem; }
.post header .meta a, .card h2 a, .card h3 a, .card .meta a { color: var(--a-i); }
.widget-title > a:hover, .double_feature a:hover span.entry-title, .post header .meta a:hover, .card h2 a:hover, .card h3 a:hover, .card .meta a:hover, a.card:hover .title, a.card:focus .title { color: var(--a-i-h); text-decoration: underline; text-decoration-thickness: 0.125rem; text-underline-offset: 0.25rem; }
.card p { margin: 0.375rem 1rem 1rem; font-size: 0.9rem; }
.post header > div div, .card > div div { margin: 0.375rem 1rem 0; }
.secondary .card h2, .secondary .card h3 { font-size: 1rem; }
.post header .meta, .card .meta { font-size: 0.75rem; color: var(--sft); }
.post header span.meta, .card span.meta { margin: 0.375rem 0 0 1rem; }
.card span.meta { display: inline-block; }
.cards-list .card h2, .cards-list .card h3 { margin: 0 1rem; font-size: 1.25rem; }
.cards-list .card span.meta:nth-child(n+3) { display: none; }
.post header .updated:not(.published), .card .updated:not(.published) { display: none; }
.post header div.meta_block { margin: 0; }
.card div.meta_block { margin: auto 0 0 0; }
a.card { background-color: var(--green); color: var(--btn-c); }
a.card .title, .double_feature .entry-title { display: inline-block; font-family: var(--font); font-weight: 600; padding: 0.625rem; margin: 0; color: inherit; }
a.card .meta_block span { font-size: 0.75rem; font-family: var(--font); display: inline-block; padding: 0 0.625rem; margin: 0 0 0 1rem; height: 1.4rem; line-height: 1.4rem; color: var(--c); background-color: var(--bg-c); border-radius: 0.325rem; vertical-align: top; }
a.card .meta_block span:last-child { float: right; margin: 0 1rem 0 0; }
a.card:hover .ratio_16_9 span img, a.card:focus .ratio_16_9 span img { mix-blend-mode: luminosity; }
/* Raise elements on hover */
a.card:hover, .double_feature > a:hover, .widget_cipt_ad_widget a:hover > img, a.btn:hover, button.btn:hover, input.btn:hover { filter: brightness(1.05); box-shadow: var(--shd-h); }
a.card:active, .double_feature > a:active, .widget_cipt_ad_widget a:active > img, a.btn:active, button.btn:active, input.btn:active { box-shadow: var(--shd-i); }
/* Image compare focus fix */
div.jx-controller:focus { border: 4px solid var(--fcs); background-color: var(--btn-c); box-shadow: 0 0 0px 2px var(--btn-c); }
/* Cookie bar */
div#cookie-bar { position: fixed; left: 0; bottom: 0; width: 100%; text-align: center; background-color: var(--bg-c); color: var(--c); border-top: var(--nav-b); z-index: 9999; }
div#cookie-bar button { margin: 0.5rem 2rem; }
/* Reader mode */
.cipt-declutter body.single .secondary, .cipt-declutter body.page .secondary, .cipt-declutter body .related-posts-wrapper { display: none; }
.cipt-declutter body.single .primary, .cipt-declutter body.page .primary { margin: 0 auto; float: none; }
/* Accent colors */
.bg_green { background-color: var(--green) !important; }
.brd_green { border-color: var(--green) !important; }
.clr_green { color: var(--green) !important; }
.bg_purple { background-color: var(--purple) !important; }
.brd_purple { border-color: var(--purple) !important; }
.clr_purple { color: var(--purple) !important; }
.bg_blue { background-color: var(--blue) !important; }
.brd_blue { border-color: var(--blue) !important; }
.clr_blue { color: var(--blue) !important; }
.bg_grey { background-color: var(--grey) !important; }
.brd_grey { border-color: var(--grey) !important; }
.clr_grey { color: var(--grey) !important; }
.bg_orange { background-color: var(--orange) !important; }
.brd_orange { border-color: var(--orange) !important; }
.clr_orange { color: var(--orange) !important; }
.bg_red { background-color: var(--red) !important; }
.brd_red { border-color: var(--red) !important; }
.clr_red { color: var(--red) !important; }
/* Responsive */
@media screen and (max-width: 1190px) {
	.inner-wrap { width: 96%; }
}
@media screen and (max-width: 1050px) {
	.four-columns .card { max-width: 49%; }
	.cards-list .card h2, .cards-list .card h3 { font-size: 1rem; }
	.cipt-large .cards-columns .card { max-width: 100%; }
}
@media screen and (max-width: 768px) {
	#logo-container { display: none; }
	.menu-toggle { display: block; float: right; }
	.main-navigation ul { display: none; }
	.main-small-navigation div#menu-container { padding: 0 0 1rem 0; overflow-y: scroll; width: 100%; }
	.primary, .secondary { float: none; width: 100%; }
	footer > .footer_widgets > .widget { flex: 0 0 100%; }
	.nav-right > li > a, .nav-right > li > span, .nav-right > li > label { background: none; background-color: inherit; color: var(--nav-c); margin: 1rem 0 0 0; padding: 0 1rem 0 0; border: 0; }
	.nav-right > li .toggle { float: none; }
	.nav-right > li { padding: 0 1rem 0 0; }
	.nav-right > li ul li { padding: 0; }
	.nav-right > li form { margin: 0; }
	.post .article-content .cipt-author { display: block; }
	.post .article-content .cipt-author div:first-child { float: left; }
}
@media screen and (max-width: 580px) {
	html.cipt-large .widget_cards_flex > a, .widget_cards_flex > a, .double_feature > a { flex: 0 0 100%; }
    .content-columns > div, .cards-columns .card { max-width: 100%; }
	span.role { padding-right: 0; }
	span.pronouns { float: none; margin-top: 0; }
}
@media screen and (max-width: 520px) {
	.cards-list .card .meta_block { display: none; }
}
.spooky #header-text-nav-container { background-color:hsl(0, 0%, 8%); background-image: url(img/header_spooky.svg); background-size: 100% auto; background-repeat: no-repeat; }
.spooky a.header_logo svg.logo { fill: hsl(0, 0%, 100%); }
.spooky .pride:after, .spooky .pride_top:before { background: var(--candycorn); }