/*
 Theme Name:   Guidelines
 Description:  Custom for Game Accessibility Guidelines
 Author:       Marijn - ActiveB1t
 Author URI:   https://www.abitofaccess.com
 Version:      1.0.8
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  gag
*/
@font-face { font-family: 'Questrial'; font-style: normal; font-weight: 400; src: local(''), url('fonts/questrial-regular.woff2') format('woff2'), url('fonts/questrial-regular.woff') format('woff'), url('fonts/questrial-regular.ttf') format('truetype'), url('fonts/questrial-regular.svg#Questrial') format('svg'); font-display: swap; }
:root {
    --bg: hsl(0, 0%, 95%);
    --bg-f: hsl(0, 0%, 20%);
    --c: hsl(0, 0%, 15%);
    --c-f: hsl(0, 0%, 85%);
    --b: 0.0625rem solid hsl(0, 0%, 88%);
    --acc: hsl(190, 60%, 35%);
    --acc-f: hsl(182, 52%, 46%);
    --fcs: hsl(240, 50%, 60%);
    --fcs-dark: hsl(240, 93%, 78%);
    --rd: 0.125rem;
	--font-b: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font: "Questrial", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --svg: hsl(47, 25%, 80%);
	--shd: 0 0.0625rem 0.1875rem 0 hsl(0, 0%, 20%);
    --btn: hsl(190, 60%, 35%);
    --btn-c: hsl(0, 0%, 100%);
}
html.dark {
    --bg: hsl(180, 20%, 12%);
    --c: hsl(0, 0%, 85%);
    --acc: hsl(190, 60%, 52%);
    --fcs: var(--fcs-dark);
    --svg: hsl(47, 12%, 45%);
}
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-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
html { overflow-y: scroll; -webkit-font-smoothing: auto; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-high-contrast-adjust: none; forced-color-adjust: none; font-size: 100%; scroll-behavior: smooth; }
html, body { background-color: var(--bg); height: 100%; color: var(--c); font-family: var(--font-b); letter-spacing: 0.01em; transition: background-color 0.2s, color 0.2s; }
body { display: flex; flex-flow: column; flex-wrap: nowrap; }
* { -webkit-box-sizing: border-box; box-sizing: border-box; }
address, article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; }
embed, iframe, object { max-width: 100%; }
a, a:visited { color: var(--acc); text-underline-offset: 0.25em; }
a:hover { text-decoration-thickness: 0.1em; text-decoration-color: var(--fcs); }
a > svg.icon { margin: 0 0 0.25em 0.5em; }
svg.cogs { fill: var(--svg); color: var(--c); }
a img { border: 0; }
a:focus-visible, input:focus, textarea:focus, select:focus, button:focus, .focus, label:focus-within, summary:focus-visible { outline: 0.1875rem solid var(--fcs); outline-offset: 0.1875rem; }
footer a:focus-visible, footer input:focus, footer textarea:focus, footer select:focus, footer button:focus, footer .focus, footer label:focus-within, summary:focus-visible { outline: 0.1875rem solid var(--fcs-dark); }
h1, h2, h3, h4, h5, h6 { font-size: 1.7rem; padding: 0 0 3rem 0; color: inherit; font-weight: 400; font-family: var(--font); line-height: 1.2; position: relative; }
h2 { font-size: 1.5rem; padding: 1rem 0 0.75rem 0; margin-left: -0.5rem; }
h3 { font-size: 1.3rem; padding: 0 0 0.25rem 0; margin-left: -0.25rem; }
h4, h5, h6 { font-size: 1.2rem; padding: 0 0 0.25rem 0; }
.widget h2 { padding-top: 0; }
p, address, form, ul, ol { margin-bottom: 1.5rem; }
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: var(--b); padding: 0.325rem 0.625rem; }
caption, th, td { text-align: left; }
ul, ol { list-style: disc; left: 1.5rem; position: relative; max-width: calc(100% - 3rem); }
li { margin: 0 0 0.75em 0; }
ol { list-style: decimal; }
li > ul, li > ol { margin: 0 0 0 0.625rem; }
p, li { max-width: 80ch; line-height: 1.6em; }
pre { margin-bottom: 1.25rem; overflow: auto; padding: 1.25rem; }
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: 0.0625rem dotted var(--c); cursor: help; }
ins { background: hsl(0,0%,0%,0.1); }
hr { border: 0; border-bottom: var(--b); height: 0; width: calc(100% + 2rem); margin: 2rem 0 1rem -1rem; position: relative; overflow: visible; }
hr:after, h1:after { content: ''; width: 4rem; height: 0.1875rem; background-color: var(--acc); position: absolute; left: 0; bottom: -0.125rem; }
dt { margin-bottom: 0.375rem; }
dd { margin-bottom: 1.5rem; }
blockquote, q, .wp-block-quote, .wp-block-quote.is-style-large { font-family: var(--font); margin: 0 1em 2rem; padding: 0; quotes: "\201C""\201D"; position: relative; font-size: 1rem; }
blockquote p, q p, .wp-block-quote p, .wp-block-quote.is-style-large p { color: var(--c); background-color: var(--bg); font-size: 1.2em; margin-bottom: 0.75em; line-height: 1.5em; transition: background-color 0.2s, color 0.2s; }
blockquote:before, q:before { content: open-quote; font-size: 5.5em; line-height: .1em; position: absolute; top: 0.3em; left: -0.45em; font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif; color: var(--svg); }
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: 1em; font-style: normal; border-top: 0.125rem solid var(--svg); padding: 0.5em 0.25em 0; display: inline-block; }
figure.wp-block-pullquote { margin: 0; border: 0; padding: 0; text-align: left;}
.visually-hidden { position: absolute; height: 0.1rem; width: 0.1rem; overflow: hidden; clip: rect(0.1rem, 0.1rem, 0.1rem, 0.1rem); white-space: nowrap; background-color: var(--bg); color: var(--c); }
.skip-link { background-color: var(--c); color: var(--bg); border: 0; display: block; font-size: 0.9rem; text-decoration: none; font-weight: 600; line-height: normal; padding: 1rem 1.5rem 0.9rem; top: -10rem; left: 0.75rem; position: absolute; word-wrap: normal; }
.skip-link:focus-visible { border: 0.1875rem solid var(--bg); outline-offset: 0; border-radius: var(--rd); top: 1rem; z-index: 100000; }
.aria-ref, .updated:not(.published), img#wpstats { display: none; }
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%; }
.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: var(--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; }
body > header > div, main, footer > .footer_widgets { width: 90%; max-width: 60rem; margin: 0 auto; }
svg.icon { width: 1em; height: 1em; vertical-align: middle; margin: 0 0.5rem 0.125rem 0; }
button svg.icon { margin: 0 0.5rem 0 0; }
button.icon svg.icon { margin: 0; }
/* Header */
body > header { border-top: 0.4rem solid var(--acc); }
body > header > div > a { display: block; }
body > header > div > a > svg { width: 100%; max-width: 32rem; fill: var(--c); }
nav { width: 100%; margin: 1.25rem auto; padding: 0 0 2rem 0; border-bottom: var(--b); position: relative; }
nav > a, nav > a:visited { display: inline-block; height: 2rem; line-height: 2rem; text-decoration: none; margin: 0 1.6rem -0.0625rem 0; font-family: var(--font); color: var(--acc); text-transform: uppercase; }
nav > a:hover, nav > a:focus, nav > a[aria-current] { border-bottom: 0.25rem solid var(--acc); color: var(--c); }
div.buttons { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
.toggle { width: max-content; white-space: nowrap; height: 2rem; font-family: var(--font); line-height: 2rem; font-size: 0.9rem; padding: 0 0.8rem 0 0.2rem; color: var(--bg); background-color: var(--c); border: 0; border-radius: 10rem; 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.1875rem 0.5rem 0 0; background-color: var(--svg); border: var(--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(--c); border-radius: 50%; transition: transform .3s; }
.toggle[aria-pressed="true"] span:first-of-type { background-color: var(--acc); }
.toggle[aria-pressed="true"] span:first-of-type:before { content: " "; transform: translateX(1rem); }
.toggle .on { display: none; }
.toggle[aria-pressed="true"] .off { display: none; }
.toggle[aria-pressed="true"] .on { display: inline; }
/* Main */
main { flex: 1; padding: 0 0 3rem 0; }
main > article { padding: 2rem 0 1.25rem; display: flex; flex-direction: row; flex-wrap: wrap; }
article > header { width: 100%; border-bottom: var(--b); margin: 0 0 2rem 0; }
div.article-content, article > aside { flex: 1 1 100%; width: 100%; margin: 0 0 2rem 0; padding: 0 1rem; }
div.article-content { flex-basis: 0%; min-width: 64%; }
article > aside { flex-basis: 32%; min-width: 16rem; }
/* Forms */
form input, form textarea, form button { display: block; border-radius: var(--rd); border: var(--b); cursor: pointer; }
form input, form textarea { width: 80%; max-width: 20rem; line-height: 1.6em; margin: 1rem 0; padding: 0.5rem; }
form textarea { height: 4.8rem; }
form button { background-color: var(--btn); color: var(--btn-c); font-family: var(--font); line-height: 1.6em; margin: 0; padding: 0.5rem; border: 0; }
form input[type="search"], form input[type="search"] + button { display: inline-block; }
p.small { font-size: 0.7em; }
.grecaptcha-badge { visibility: hidden; }
/* Footer */
footer { font-size: 0.75rem; line-height: 1.4; background-color: var(--bg-f); color: var(--c-f); padding: 2.5rem 0 3rem 0; }
footer h2, footer h3 { font-size: 1rem; margin-left: 0; }
footer > .footer_widgets { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 2%; }
footer > .footer_widgets > div { flex: 1 0 31%; min-width: 18.75rem; padding: 0.625rem; border-radius: var(--rd); margin: 0; }
footer .widget img { max-width: 20rem; }
footer > .footer_widgets a, footer > .footer_widgets a:visited { color: var(--acc-f); }
footer > .footer_widgets form { width: 100%; text-align: left; }
footer > .footer_widgets label { width: 4rem; display: inline-block; margin: 0; padding: 0; }
footer > .footer_widgets input { display: inline-block; margin: 0; line-height: 1.75rem; width: calc(80% - 2rem); }
footer > .footer_widgets button { display: inline-block; margin: 0 0 0 -2.4rem; font-size: 1rem; width: 2rem; padding: 0; height: 2.5rem; }
/* To Top */
a#to-top { bottom: 1.25rem; position: fixed; right: 1.25rem; color: var(--acc); font-size: 2.5rem; line-height: 2.5rem; display: none; opacity: 0.5; z-index: 999; }
a#to-top svg.icon { margin: 0; }
a#to-top:hover { opacity: 1; }
/* YouTube Facade */
iframe, *[data-youtube-facade] { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; margin: 0; padding: 0; border: 0; border-radius: 0; }
*[data-youtube-facade] img { aspect-ratio: 16/9; object-fit: cover; cursor: pointer; }
*[data-youtube-facade]:after { content: '\25B6'; font-size: 2.5rem; color: var(--btn-c); text-align: center; display: block; position: absolute; top: calc(50% - 2rem); left: calc(50% - 3rem); width: 5rem; height: 2rem; padding: 1rem 0 1rem 0.5rem; line-height: 2.5rem; border-radius: 1.5rem; background-color: var(--btn); box-shadow: var(--shd); border: 0.1875rem solid var(--btn-c); opacity: 0.8; transition: opacity 0.2s; }
*[data-youtube-facade]:hover:after { opacity: 1; }
*[data-youtube-facade]:focus:after { opacity: 1; outline: 0.1875rem solid var(--fcs); outline-offset: 0.1875rem; }
/* Cards */
.cards { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin: 0 0 2rem 0; gap: 1rem; }
.cards > div { flex: 0 1 calc(25% - 1rem); min-width: 10rem; align-self: stretch; padding: 0 0 1rem 0; border: 0; border-radius: var(--rd); overflow: hidden; margin: 0 0 1rem 0; display: flex; flex-flow: column nowrap; position: relative; }
.cards > div a { color: var(--acc); text-decoration: none; text-decoration-thickness: 0.125em; text-underline-offset: 0.125em; font-family: var(--font); text-transform: uppercase; margin: 1em 0 0; }
.cards > div a:hover { color: var(--acc); text-decoration: underline; }
.cards > div svg { transition: 1s; }
.cards > div:hover svg, .cards > div:focus-within svg { color: var(--acc); }
.cards > div a:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.cards > div:focus-within { outline: 0.1875rem solid var(--fcs); outline-offset: 0.1875rem; }
.cards > div:focus-within a:focus-visible { outline: 0; text-decoration: underline; }
.cards > div p { margin: 0.375rem 0 0; font-size: 0.9rem; z-index: 50; }
/* Example bullets */
li.icon { list-style: none; }
li.icon > svg { position: relative; left: -1.5rem; width: 1em; height: 1em; vertical-align: middle; margin: 0 -1rem 0.125rem 0; }
/* Print */
@media only print {
	.skip-link, #masthead, #to-top, .secondary, #cookie-bar { display: none !important; }
	div.article-content { width: 100% !important; }
	* { background-image: none !important; background-color: #FFF !important; border-color: #000 !important; color: #000 !important; box-shadow: none !important; }
}