/* variables ----------------------- */

:root {
    --text-size: ;
    --text-superscript: 1rem;
    --text-caption: 1.25rem;
    --text-footnotes: 1.5rem;
    --text-small: 1.5rem;
    --text-large: 2rem;
    --text-long-text: 1.3rem;
    --headline-size: ;
    --text-color: ;
    --background-color: ;
    --element-color-1: ;
    --element-color-2: ;
    --padding-small: .2rem;
    --padding-medium: .4rem;
    --padding-large: .8rem;
    --column-small: 25%;
    --column-large: 75%;
    }
    
    /* CSS resets ----------------------- */
    
    * {
      box-sizing: border-box;
    }
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      margin-block-end: 0;
      margin-block-start: 0;
    }
    
    ol, ul {
      list-style: none;
    }
    
    html, body {
      font-size: 14px;
      height: 100%;
      width: 100%;
    }
    
    img {
      display: block;
    }
    
    details > summary {
        list-style: none;
    }
    
    details summary::-webkit-details-marker {
        display: none;
    }
    
    /* general declarations ----------------------- */
    
    
    
    p {
        font-size: var(--text-small);
    }
    
    svg {
        display: none;
    }
    
    h2 {
        font-size: 4rem;
    }
    
    details {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    summary {
        width: fit-content;
    }
    
    details[open] {
        width: 100%;
        height: fit-content
    }
    
    /* UTITLITY CLASSES -----------------------*/
     
    .inline-image {
        height: var(--text-small);
        display: inline-block;
        width: fit-content;
    }
    .inline-image > img {
        height: 100%;
        display: block;
    }

    .hidden {
        display: none !important;
    }
    
    .print-only {
        display: none;
    }

    .highlight {
        background-color: yellow;
    }

    .no-indent {
        text-indent: 0 !important;
    }
    
    /* mail toggle utilities  */
    
    .mail-toggle,
    .print {
        display: inline;
        cursor: pointer;
        text-decoration: underline;
    }
    
    .mail-dialog {
        display: none;
        width: fit-content;
        cursor: pointer;
        text-decoration: underline;
        color: black;
    }
    
    .mail-info {
        cursor: pointer;
        text-decoration: underline;
        color: black;
        font-weight: bold;
    }

    /* INTRO FOR PRINT */

    .infos-for-print{
        display: none;
        height: 100vh;
        width: 100vw;
        background-color: white;
        z-index: 100;
        
    }
    
    /* MAIN WRAPPER ----------------------- */

    
    
    .main-wrapper {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        scroll-behavior: smooth;
        /* filter: url(#n0);
        filter: url(#n1); */
        scroll-snap-type: y mandatory;
    }
    
    .main-wrapper::-webkit-scrollbar {
        display: none;
    }
    
    /* HEADER AND INDEX AND NAVIGATION ----------------------- */
    
    .header-wrapper {
        height: 100%;
        width: 100%;
        position: relative;
        background-color: orangered;
        padding: 1rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        filter: url(#n0);
        filter: url(#n1);
        scroll-snap-align: start;
    }
    
    .header-wrapper > img {
        height: 100%;
        width: 100%;
    }
    
    .issue-link {
        max-width: 20vw;
        height: auto;
        text-align: center;
        z-index: 400;
        filter: url(#n0);
        filter: url(#n1);
    }

    .index-pagenumbers {
        visibility: hidden;
    }
    
    .issue-link a {
        text-align: center;
        background-color: white;
    }

    
    .issue-link a:visited {
        color: blue;
    }

    .half-page {
        width: 50%;
        height: 100%;
        padding: 2rem;
         filter: url(#n1);
    }

    .full-page {
        width: 100%;
        height: 100%;
        padding: 2rem;
         filter: url(#n1);
    }

    .italic {
        font-style: italic;
    }
    
    .index-toggle {
        position: absolute;
        color: blue;
        border: none;
        font-size: 15pt;
        height: fit-content;
        width: fit-content;
        text-align: center;
        z-index: 500;
        filter: url(#n0);
        filter: url(#n1);
        padding: 5px;
        user-select: none;
        -webkit-user-select: none;
    }
    
    .index-toggle a {
        color: blue;
        background-color: white;
        text-decoration: underline;
    }
    
    .index-toggle a:visited {
        color: blue;
    }
    
    .random {
        position: absolute;
        margin: 2;
        /* border: 1px solid black; */
        font-size: 15pt;
        height: fit-content;
        width: fit-content;
        top: 0px;
        left: 0pc;
        cursor: pointer;
        visibility: hidden;
    }

    .placed {
        cursor: pointer;
        visibility: visible;
    }
    
    /* CONTENT WRAPPER ----------------------- */
    
    .content-wrapper {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        /* overflow-y: auto;
        overflow-x: hidden; */
        flex-grow: 1;
        scroll-snap-align: start;
    }
    
    /* ASK SAMANTHA ----------------------- */
    
    .samantha-blurb {
        width: calc( 100% - 20px);
        height: fit-content;
        background-color: white;
        color: red;
        padding: 1rem;
        margin: 10px;
    }
    
    .samantha-blurb > p {
        font-size: var(--text-small); 
    }
    
    .samantha-desktop-fullscreenbutton {
        position: sticky;
        top: 0;
        left: 0;
        width: fit-content;
        z-index: 500;
        font-size: 15pt;
        text-decoration: underline;
        background-color: white;
        color: blue;
        filter: url(#n1);
    }
    
    .sam-fullscreen {
        width: 45%;
        margin: 0 auto;
    }
    
    .ask-samantha {
        width: var(--column-small);
        padding: 1rem;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-behavior: smooth;
        position: relative;
        transition: width;
        transition-duration: 1s;
    }
    
    .ask-samantha-wrapper {
        padding: 1rem;
        background-color: aliceblue;
        filter: url(#n1);
    }
    
    /* ask samantha scrollbar */ 
    
    .ask-samantha::-webkit-scrollbar {
        width: 0.5rem;
    }
       
    .ask-samantha::-webkit-scrollbar-track {
        background-color: black;
        filter: url(#n1);
    }
       
    .ask-samantha::-webkit-scrollbar-thumb {
        background-color: red;
    }
    
    /* ask samantha form */ 
    
    .samantha-question-form-wrapper {
        padding: .5rem;
        margin-bottom: 2rem;
        display: none;
    }
    
    .samantha-question-form-wrapper input {
        font-size: var(--text-small);
        width: 100%;
        height: auto;
    }
    
    #question-text {
        height: 8rem;
        min-height: calc(2rem * 1.3);
        width: 100%;
        padding: 0.4rem;
        max-width: 100%;
        min-width: 100%;
        height: auto;
        font-family:"Arial", Arial, sans-serif;  
        font-size: var(--text-small);
    }
    
    .samp-input[placeholder] {
        color: red;
    }
    
    .samp-submit {
        cursor: pointer;
    }
    
    .samantha-question {
        background-color: white;
        padding: var(--padding-medium) 1.2rem;
        font-size: var(--text-small);
    }
    
    .samantha-answer {
        padding: .6rem; 
    }
    
    .samantha-answer p {
        text-indent: 1.5rem;
        font-size: var(--text-small);
    }

    .samantha-answer :first-child {
        text-indent: 0;
    }
    
    .dear-s-p-styling {
        letter-spacing: var(--padding-small);
    }
    
    /* BIG TIME CHOICES -------------------------------------- */


        
    
    
    .btc-wrapper {
        width: var(--column-large);
        height: 100%;
        /* background-color: gold; */
        padding: var(--padding-medium);
        /* filter: url(#n0);
        filter: url(#n1); */
        overflow-y: auto;
        overflow-x: hidden;
        scroll-behavior: smooth;
        scroll-padding-top: 1.5rem;
        transition: width;
        transition-duration: 1s;
    }
    
    .btc-wrapper > * {
        filter: url(#n1);
    }
    
    .btc-blurb {
        width: calc( 100% - 20px );
        height: fit-content;
        background-color: white;
        color: green;
        padding: 1rem;
        margin: 10px;
        margin-bottom: calc(2rem + 10px);
    }
    
    /* btc scrollbar */
    
    .btc-wrapper::-webkit-scrollbar {
        width: 0.5rem;
    }
       
    .btc-wrapper::-webkit-scrollbar-track {
        background-color: black;
        
    }
       
    .btc-wrapper::-webkit-scrollbar-thumb {
        background-color: red;
    }
    
    /* general per article */ 

    .btc-article h2 {
        padding: var(--padding-medium) 1.2rem;
        font-size: 6rem;
    }

    .footnote-container {
        padding: 1rem 6rem 2rem 6rem;
    }

    /* anna */

    #making-it-more-than-work {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .btc-anna-text-wrapper > h2 {
        text-indent: 0;
        font-size: var(--text-small);
        padding: 0;
    }

    #making-it-more-than-work > :nth-child(1) {
        order: 1;
       
    }

    #making-it-more-than-work > :nth-child(2) {
        order: 2;
    }

    #making-it-more-than-work > :nth-child(3) {
        order: 3;
    }

    #making-it-more-than-work > :nth-child(4) {
        order: 4;
    }

    #making-it-more-than-work > :nth-child(5) {
        order: 5;
    }

    #making-it-more-than-work > :nth-child(6) {
        order: 6;
    }

    #making-it-more-than-work > :nth-child(7) {
        order: 7;
    }

    #making-it-more-than-work > :nth-child(8) {
        order: 8;
    }

    #making-it-more-than-work > :nth-child(9) {
        order: 9;
    }

    .btc-anna-text-wrapper {
        width: 75%;
        height: fit-content;
        padding: 1rem 8rem;
        text-indent: 2rem;
        font-size: 16px;
    }

    .btc-anna-text-wrapper > :nth-child(1) {
        text-indent: 0;
    }

    #making-it-more-than-work > .footnote-container {
        width: 25%;
        height: fit-content;
        padding: 1rem 4rem;
        display: flex;
        flex-direction: column;
        gap: 3rem;
        padding-right: 0;
    }

    .btc-byline {
        width: 100%;
        padding: var(--padding-medium) 1.2rem;
        font-size: var(--text-large);
    }

    /* gal */

    /* #juxtaposing p {
        text-indent: 3rem;
    }

    #juxtaposing > .btc-text-post-wrapper :first-child {
        text-indent: 0;
    } */

    /* fer thousand books */

    #what-to-do-with-a-thousand-books .footnote-container {
        padding: 0 4rem;
    }

    /* haron adobe dance */

    #the-adobe-dance ol {
        list-style: auto;
        padding: 0rem var(--text-small);
        margin: 0 var(--text-small);
        font-size: var(--text-small);

    }

    #the-adobe-dance  li {
        padding-bottom: 1.5rem;
        font-size: var(--text-small);
    }

    /* agathe */

    #this-state-of-alertness .btc-text-post-wrapper {
        padding-top: 0;
    }

    /* laura pappa */

    #pockets-for-fun-why-not-an-entire-bag h6 {
        padding-top: var(--text-caption);
        font-size: var(--text-caption) !important;
        font-weight: normal;
    }

    p:has(a[href='#columnbreak']) {
        break-after: column;
    }

    a[href='#columnbreak'] {
        text-decoration: none;
        pointer-events: none;
    }

    #pockets-for-fun-why-not-an-entire-bag .footnote-container {
        padding: 0 3rem;
    }

    /* footnotes */

    .footnote-row {
        width: 100%;
    }
    
    .footnote-number {
        vertical-align: super;
        font-size: var(--text-superscript);
    }

    .footnote-text {
        font-size: var(--text-caption);
        white-space: pre-wrap; /* CSS3 */    
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */    
        white-space: -o-pre-wrap; /* Opera 7 */    
        word-wrap: break-word; /* Internet Explorer 5.5+ */
    }
    
    .separator {
        /* border-top: 5px dotted black; */
        border-bottom: 0.5rem solid black;
        padding: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
        width: calc(100% - 2rem);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .separator h3 {
        width: 100%;
        height: fit-content;
        font-size: var(--text-small);
        text-align: center;
    }
    
    /* fluid field classes */

    .btc-text-post-wrapper {
        width: 100%;
        padding: 2rem;
        height: auto;
    }

    .btc-text-post-wrapper blockquote {
       padding: 0 3rem;
    }
    
    .btc-single-image-wrapper {
        height: auto;
        padding: 1rem;
    }
    
    .btc-single-image-wrapper > img {
        width: 100%;
        height: auto;
    }

    .half-width {
        width: 50%;
    }

    .full-width {
        width: 100%;
    }

    .two-thirds {
        width: 66%;
    }

    .centered {
        margin: 0 auto;
    }

    .caption {
        font-size: var(--text-caption);
        padding: 1rem 4rem;
        padding-top: 0rem;
        height: fit-content;
        /* font-weight: bold; */
    }
    
    .two-columns {
        columns: 2;
        column-gap: 3rem;
    }

    /* .two-thirds-centered {
    
    } */
    
    /* footer -------------------------------- */
    
    .footer-wrapper {
        height: fit-content;
        width: 100%;
        padding: var(--padding-medium);
        display: flex;
        background-color: cornflowerblue;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem 2rem;
        filter: url(#n0);
        filter: url(#n1);
        border-bottom: 10px solid white;
    }
    
    .footerinfocontainer {
        padding: 1rem;
        background-color: white;
        height: fit-content;
        width: 100%;
        font-size: var(--text-small);
    }
    
    .footerinfocontainer > p {
        font-size: var(--text-small);
        padding-bottom: 1rem;
    }
    
    .footer-wrapper > h1 {
        width: 100%;
    }
    
    .footer-wrapper > h3 {
        width: fit-content;
        font-size: var(--text-small);
    }
    
    .footer-button {
        text-decoration: underline;
        cursor: pointer;
    }
    
    /* mobile styling -------------------------------- */
    
    .mobile-only {
        display: none;
    }
    
    .mobile-button {
        height: 100%;
        width: calc( 1.5rem * 2);
        align-content: center;
        justify-content: center;
        align-items: center;
        background-color: yellow;
    }
    
    .button-headline {
        color: black;
        white-space: nowrap;
        text-align: center;
        font-size: 2rem;
        transform: rotate(90deg);
    }

    .border {
        display: none;
        position: fixed;
        z-index: 10;
        top: 0;
        height: 280mm;
        left: calc(24%); 
        width: 1mm;
        filter: url(#n0);
        filter: url(#n1);
        border-right: 1mm solid black;
        height: 100%;
    }
    
    
    
    @media screen and (max-width: 800px) {
    
        .samantha-desktop-fullscreenbutton {
            display: none;
        }
    
        .samantha-blurb > p {
            font-size: var(--text-large); 
        }
    
        .index-toggle {
            display: none;
        }
    
        .two-columns {
            columns: 1;
        }
    
        /* MOBILEINDEX */
    
        .mobile-index-toggle {
            position: absolute;
            top: 10px;
            right: 10px;
            color: blue;
            text-decoration: underline;
            border: none;
            font-size: 15pt;
            height: fit-content;
            width: fit-content;
            text-align: center;
            z-index: 500;
            filter: url(#n0);
            filter: url(#n1);
            padding: 5px;
            user-select: none;
            -webkit-user-select: none;
            background-color: white;
            cursor: pointer;
        }
    
        #mobile-index {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            position: absolute;
            top: 5%;
            left: 5%;
            height: 90%;
            width: 90%;
            z-index: 500;
            /* margin: 5% 0 5% 5%; */
            /* background-color: black; */
            padding: 1rem;
            overflow-x: hidden;
            overflow-y: auto;
        }

        #mobile-index::-webkit-scrollbar {
            width: 0.5rem;
        }
           
        #mobile-index::-webkit-scrollbar-track {
            background-color: black;
            filter: url(#n1);
        }
           
        #mobile-index::-webkit-scrollbar-thumb {
            background-color: yellow;
        }
    
        .mobile-issue-link {
            width: fit-content;
            height: fit-content;
        }
    
        .mobile-issue-link > a {
            /* color: black; */
            background-color: white;
            font-size: 15pt;
            filter: url(#n1);
        }
        .mobile-issue-link > a:visited {
            color: blue;
            background-color: white;
            font-size: 15pt;
        }
    
         /* MOBILEINDEX */
    
        .mobile-header-image-container {
            width: 100%;
            height: auto;
            padding: 1rem;
            overflow: hidden;
        }
    
        .mobile-header-image-container > img {
            width: 100%;
            height: auto;
        }
    
        .header-wrapper {
            display: none;
        }
    
        .main-wrapper {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
    
        .content-wrapper {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
    
        :root {
            --text-size: ;
            --headline-size: ;
            --text-color: ;
            --background-color: ;
            --element-color-1: ;
            --element-color-2: ;
            --padding-small: .2rem;
            --padding-medium: .4rem;
            --padding-large: .8rem;
            --column-small: 25%;
            --column-large: 75%;
            }
    
        html {
            font-size: 9px;
        }
    
        body {
            /* background-color: green; */
        }

        .two-thirds {
            width: 90%;
        }

        .two-thirds .image {
            width: 100% !important;
        }

        img {
            width: 100%;
            height: auto;
        }

        .two-thirds > img {
            width: 100%;
            height: auto;
        }

        .print{
            display: none;
        }
    
        .ask-samantha {
            display: none;
            width: 100%;
        }
    
        .ask-samantha-wrapper {
            background-color: transparent;
        }
    
        .btc-wrapper {
            width: 100%;
            flex-shrink: 1;
        }
    
        .issue-link {
            display: none;
        }
    
        
    
        .mobile-only {
            display: flex;
            /* background-color: blueviolet; */
        }


        /* anna */

        #making-it-more-than-work > :nth-child(6) {
            order: 7;
        }
    
        #making-it-more-than-work > :nth-child(7) {
            order: 6;
        }

        #making-it-more-than-work > .footnote-container {
            padding: 2rem 8rem;
            gap: 1rem;
            width: 100%;
            padding-top: 0.5rem;
        }

        #making-it-more-than-work > .footnote-container {
            padding: 1rem 3rem;
            gap: 1rem;
            width: 100%;
            padding-top: 0.5rem;
        }

        #making-it-more-than-work > .footnote-container::before {
            content: '';
            margin: 0.5rem 8rem;
            width: calc( 100% - 16rem );
            border-top: 2px solid black;
        }

        .btc-anna-text-wrapper {
            width: 100%;
            padding: 1rem 2rem;
        }

        .border {
            display: none;
      }
    }