:root {
     --grey: #ccc;
     --orange: orange;
}
html {
    scroll-behavior: smooth;
}
ol ol {
 list-style-type: lower-alpha;
}
article li {
     font-size: 1.2rem;
     margin-bottom: .5rem;
}
#help header {
    background-image: url(../../../data/uploads/gbnc/Frustration4bw.jpg);
}
main {
    font-size: 85%;
}
h2 {
    font-size: 1.5em;
    clear: both;
    background-color: var(--grey);
    text-align: center;
    transition: 1s;
    color: initial;
}
h2:target {
    background-color: var(--orange);
    color: #fff;
    text-align: center;
}
h3 {
    font-size: 1.3em;
}
h4 {
    font-size: 1.1em;
    margin-bottom: 0;
}
h4+p {
    margin-top: 0;
}
.emphasis {
     font-weight: bold;
}
.buttonContainer {
    display: flex;
    justify-content: flex-end;
}
#printButton, 
#collapseTopics {
    width: 8rem;
    background-color: var(--orange);
    font-size: .8rem;
    color: var(--white);
    margin-top: 1rem;
    margin-right: 1rem;
    padding: 0.5rem;
    border: none;
    box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, .5);
    cursor: pointer;
    transition: .3s;
}
#printButton:hover, 
#collapseTopics:hover {
    box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, .5);
    color: var(--black);
}
figure {
    max-width: 20%;
    float: right;
    clear: both;
    border: 1px solid #ccc;
}
p:has(img):not(dialog p) {
    max-width: 20%;
    float: right;
}
figure img,
p img {
    width: 100%;
}
a:has(figcaption),
figcaption a {
    text-decoration: none!important;
}
article ul:not(.thispage ul) {
    list-style-type: square;
    padding-left: 1rem;
}
article ul ul:not(.thispage ul ul) {
    padding-left: 2rem;
    margin-bottom: 1rem;
}
ul li::marker {
    color: var(--orange);
}
article ul ul li:last-of-type {
     padding-bottom: 0; 
}
article ul ul li {
    padding: 0;
}
ol {
    padding-left: 1rem;
}
ol ul {
    margin-top: 0.5rem;
}
dialog {
    padding: 3rem 0.5rem 0.5rem 0.5rem;
     max-height: 90vh;
}
dialog img {
     max-height: calc(100vh - 180px);
}
dialog::backdrop {
     background-color: black;
}
#ImageRules p {
    max-width: 60%;
    margin: 0 auto;
    margin-bottom: 1rem;
}
button.close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: var(--orange);
    border: 0 solid var(--orange);
    color: #fff;
    padding: 0.25rem;
    box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, .5);
    cursor: pointer;
    outline: 0;
}
article a {
     cursor: pointer;
}
.italics {
    font-style: italic;
}
section a:not(nav a) {
    color: var(--blue);
    text-decoration: underline;
}
.thispage {
    border-bottom: 1px solid #999;
    border-top: 1px solid #999;
    padding-bottom: 1rem;
    display: block;
    width: 60%;
    margin: 2rem auto;
}
.thispage ul {
    columns: 3;
    display: block;
}
.thispage h3 {
    font-size: 1.25rem;
    color: var(--orange);
    text-align: center;
}
.thispage a {
    color: var(--mainDark);
    transition: .3s;
    display: block;
}
.thispage a:hover {
    color: var(--grey);
}
nav.thispage>ul>li {
     position: initial; 
     width: initial; 
     text-align:  initial; 
     text-transform:  initial; 
     font-size: initial; 
     letter-spacing:  initial; 
}
figcaption {
    text-align: center;
    color: var(--orange);
    font-size: 1.5rem;
}
figure:has(video) {
    max-width: 50%;
    margin: 0 auto 2rem auto;
    float: none;
}
figure:target figcaption {
    background-color: var(--orange);
    color: #fff;
    font-weight: bold;
}
video {
    max-width: 100%;
}
.fa-videocamera::after,
.fa-cameraretro::after {
    margin-left: 0.2rem;
    color: var(--orange);
    border: 1px solid var(--grey);
    border-radius: 50%;
    padding: 0.5rem;
}
.fa-videocamera::after {
    content: "\f03d";
}
.fa-cameraretro::after { 
    content: "\f083";
}
p:has(.fa-arrowcircleup) {
    position: fixed;
    right: 0;
    bottom: 5.5rem;
    z-index: 10;
}
.fa-arrowcircleup::before {
    content: "\f0aa";
}
.fa::before {
    font-family: FontAwesome;
}
.fa-arrowcircleup {
    font-size: 3rem;
    color: var(--grey);
    text-decoration: none;
    opacity: .5;
}
.slugExplanation {
    border: 5px solid var(--orange);
    padding: 0.5rem;
    margin-bottom: 3rem;
    margin-top: 3rem;
}
.showPrint {
    display: none;
}
.superemphasis {
    color: var(--orange);
    font-weight: bold;
}
@media only screen and (max-width: 1300px) {
    .thispage ul {
        columns: 3;
      }
      figure:has(video) {
        max-width: 90%;
      }
}
@media only screen and (max-width: 1120px) {
    .thispage {
        width: 100%;
    }
}
@media only screen and (max-width: 910px) {
    .thispage li {
        text-align: center;
    }
}
@media only screen and (max-width: 880px) {
    figure {
        max-width: 100%;
        float: none;
    }
    dialog,
    dialog p,
    dialog img {
        width: 100%;
    }
    figure:has(video) {
        max-width: 100%;
    }
    .thispage li {
        white-space: nowrap;
    }
}
@media only screen and (max-width: 620px) {
    section {
        width: 99%;
    }
    .thispage ul {
        columns: 1;
        white-space: normal;
    }
}
@media only screen and (max-width: 540px) {
    #printButton {
        display: none;
    }
}
@media only screen and (max-width: 460px) {
    .thispage ul {
        display: block;
    }
    .thispage a {
        padding: .5rem 0;
    }
}
@media print {
    * {
        float: none!important;/*NECESSARY SO THAT FIREFOX RESPECTS PAGE BREAKS*/
        width: 100%!important;/*NECESSARY SO THAT FIREFOX RESPECTS PAGE BREAKS*/
        max-width: 100%!important;/*NECESSARY SO THAT FIREFOX RESPECTS PAGE BREAKS*/
    }
    body {
        font-size: 11pt;
        margin: 0;
        color: var(--black);
        display: block; /*NECESSARY SO THAT FIREFOX RESPECTS PAGE BREAKS*/
        background-color: white;
    }
    main {
        padding: 0;
        margin: 0;
    }
    section {
        width: 100%;
    }
    figure {
        max-width: 70%;
        margin: 0;
    }
    article a,
    section a:not(nav a) {
        text-decoration: none;
        color: inherit;
    }
    article a[onclick]::before {
        content: "";
    }
    h1,
    h2,
    h3,
    h4 {
        margin-bottom: 0;
        margin-top: 0;
    }
    h1+p,
    h2+p,
    h3+p,
    h4+p {
        margin-top: 0;
    }
    h2 {
        text-transform: uppercase;
    }
    h3 {
        font-size: 14pt;
    }
    h4 {
        font-size: 12pt;
    }
    p.emphasis {
        text-transform: uppercase;
    }
    ol,
    ul {
        padding-left: 1rem;
        margin: 0;
    }
    .wrapperTop,
    .requestsponsor,
    .printHide,
    nav,
    footer,
    button,
    h1,
    span:has(.fa-videocamera),
    span:has(.fa-cameraretro),
    .fa-cameraretro,
    .fa-videocamera {
        display: none;
    }
    p:has(.fa-arrowcircleup) {
        display: none;
    }
    .pageBreak {
        break-before: always;
        page-break-before: always;
    }
    .slugExplanation {
        border: 1px solid var(--orange);
        padding: 0 .5rem;
        margin-bottom: 0;
        margin-top: 0;
    }
    .showPrint {
        border-top: 1px solid var(--grey);
        padding-top: 2rem;
        display: block;
    }
}