@font-face {
    font-family: 'NotCourierSans';
    src: url('NotCourierSans.otf') format('opentype');
}

@font-face {
    font-family: 'NotCourierSans-Bold';
    src: url('NotCourierSans-Bold.otf') format('opentype');
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

:root {
    font-size: 18px;
    --color-text: #fff;
    --color-bg: #000000;
    --color-link: #0fff50;
    --color-link-hover: #0fff50;
    --color-title: #00ffff;
    --line-height: 19px;
}
/* Page Loader */
.js .loading::before,
.js .loading::after {
    content: '';
    position: fixed;
    z-index: 1000;
}

.js .loading::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
}

.js .loading::after {
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    opacity: 0.4;
    background: var(--color-link);
    animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
    to {
        opacity: 1;
        transform: scale3d(0.5,0.5,1);
    }
}

a {
    text-decoration: none;
    color: var(--color-link);
    outline: none;
    cursor: pointer;
}

a:not(.frame__title-back) {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

a .char, a .word {
    text-decoration: none;
    color: inherit; /* Inherit color from parent */
}

a:hover {
    color: var(--color-link-hover);
    outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
    /* Provide a fallback style for browsers
     that don't support :focus-visible */
    outline: none;
    background: lightgrey;
}

a:focus:not(:focus-visible) {
    /* Remove the focus indicator on mouse-focus for browsers
     that do support :focus-visible */
    background: transparent;
}

a:focus-visible {
    /* Draw a very noticeable focus style for
     keyboard-focus on browsers that do support
     :focus-visible */
    outline: 2px solid red;
    background: transparent;
}

.unbutton {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

.unbutton:focus {
    outline: none;
}

/*main {*/
/*    height: 100vh;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/


.frame {
    color: var(--color-title);
    padding: 1rem 2rem;
    margin-bottom: 3rem;
    grid-gap: 2rem;
    align-items: start;
    text-transform: lowercase;
    font-size: 0.75rem;
}

.frame a:not(.frame__title-back)::before {
    content: '';
    height: 1px;
    width: 100%;
    background: currentColor;
    position: absolute;
    top: 90%;
    transition: transform 0.3s;
    transform-origin: 0% 50%;
}

.frame a:not(.frame__title-back):hover::before {
    transform: scaleX(0);
    transform-origin: 100% 50%;
}

.frame__title {
    grid-area: title;
    display: flex;
}

.frame__title-main {
    font-size: inherit;
    margin: 0;
    font-weight: inherit;
}

.frame__title-back {
    position: relative;
    display: flex;
    align-items: flex-end;
}

.frame__title-back span {
    display: none;
}

.frame__title-back svg {
    fill: currentColor;
}

.frame__prev {
    grid-area: prev;
    align-self: start;
}

.ascii {
    color: var(--color-link);
    opacity: 0.5;
    position: fixed;
    right: 0;
    top: 0;
    pointer-events: none;
    line-height: normal;
    font-size: 8px
}

.content {
    display: grid;
    gap: 1rem;
    /*max-width: 830px;*/
    /*padding: 7vh 2rem 0;*/
}

dt {
    font-weight: bold;
}

dd {
    margin: 0;
}

.effects {
    margin-top: auto;
    padding: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.effects button {
    border: 0;
    color: inherit;
    white-space: nowrap;
    background: none;
    text-transform: inherit;
    font: inherit;
    cursor: pointer;
    color: var(--color-link);
    font-size: 0.75rem;
    text-transform: lowercase;
}

.effects button::before {
    content: "[";
    margin-right: 0.5rem;
    display: inline-block;
}

.effects button::after {
    content: "]";
    margin-left: 0.5rem;
    display: inline-block;
}

.effects button:hover {
    color: var(--color-link-hover);
}

.splitting .words .word {
    white-space: nowrap;
}

/*@media screen and (min-width: 53em) {*/
/*    .frame {*/
/*        display: grid;*/
/*        grid-template-columns: auto auto 1fr;*/
/*        grid-template-rows: auto;*/
/*        grid-template-areas: 'title prev sponsor';*/
/*        justify-content: start;*/
/*    }*/
/*    .content {*/
/*        grid-template-columns: 15ch 1fr;*/
/*    }*/
/*}*/

/* New Stuff */

main {
    display: grid;
    max-width: calc(calc(15ch * 8) + calc(2ch * 5));
    grid-template-columns: 1fr 1fr 1.5fr 1.5fr 1.5fr 1.5fr;
    grid-gap: 2ch;
    /*position: absolute;*/
    position: relative;
    left:2ch;
    margin-right: 2ch;
    top: 0;
}

main div {
    background-color: #000000;
    box-sizing: border-box;
    /*border-left: 2px solid white;*/
    padding-left: 10px
}

main2 {
    display: grid;
    max-width: calc(calc(15ch * 8) + calc(2ch * 5));
    grid-template-columns: 1fr 2.5fr 2.5fr 1.5fr;
    grid-gap: 2ch;
    /*position: absolute;*/
    position: relative;
    left:2ch;
    margin-right: 2ch;
    top: 0;
}

main2 div {
    background-color: #000000;
    box-sizing: border-box;
    /*border-left: 2px solid white;*/
    padding-left: 10px
}

.subpage {
    display: grid;
    /*max-width: calc(calc(15ch * 8) + calc(2ch * 5));*/
    max-width: calc(100ch);
    grid-template-columns: 1fr 7fr;
    grid-gap: 2ch;
    /*position: absolute;*/
    /*left:2ch;*/
    margin-right: 2ch;
    top: 0;
}

@media only screen and (max-width: 100ch){
    .subpage {
        grid-template-columns: 1fr;
        row-gap: 6ch;
    }
}

.subpage ol {
    list-style-position: inside;
    padding-left: 0;
    margin-left: 0;
}

.subpage ol li {
    font-weight: 600;
}

.subpage ol li > p {
    font-weight: normal;
}

.green {
    color: #0fff50;
}

.no-display-large {
    display: none;
}

.hidden-large {
    visibility: hidden;
}

@media only screen and (max-width: 130ch){
    body {
        --display-mode: rows;  /* -- Internal use */
        --font-size-change: 1; /* -- Internal use */
    }
    main {
        grid-template-columns: 1fr 1fr;
        left: 1ch;
        top: var(--line-height);
        max-width: 57ch;
        /*grid-gap: calc(var(--line-height) * 1) 1ch;*/
        grid-gap: calc(var(--line-height) * 1) 2ch;
    }
    main div {
        min-height: calc(var(--line-height) * 3);
        margin-bottom: var(--line-height);
    }

    main2 {
        grid-template-columns: 1fr;
        /*grid-template-areas:*/
        /*    "column1 column1"*/
        /*    "column2 column3"*/
        /*    "column4 column4";*/
        left: 1ch;
        top: var(--line-height);
        max-width: 57ch;
        /*grid-gap: calc(var(--line-height) * 1) 1ch;*/
        grid-gap: calc(var(--line-height) * 1) 2ch;
    }
    main2 div {
        min-height: calc(var(--line-height) * 3);
        margin-bottom: var(--line-height);
    }

    .column1 {
        padding-bottom: 60px;
    }

    .no-display-small {
        display: none;
    }

    .hidden-large {
        visibility: visible;
    }

    .no-display-large {
        display: block;
    }

    .span {
        grid-column: span 2;
        grid-column: 2;
    }
}




/*html,*/
/*body {*/
/*    !*https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css!*/
/*    height: 100vh;*/
/*    width: 100vw;*/
/*    position: fixed;*/
/*    overflow: hidden;*/
/*}*/

html,
body {
    height: 100%;
    width: 100%;
    position: relative;
    overflow-y: auto;
    padding-bottom: 20px;
}

.padtop {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.padtop li {
        padding-top: 20px;
}

.no-bullet {
    list-style-type: none;
    padding: 0;
}


body {
    font-size: 0.9em;
    box-sizing: content-box;
    margin: 0;
    font-family: 'NotCourierSans', 'Courier New', Courier, monospace;
    /*font-family:  'Courier New', Courier, monospace;*/
    color: #fff;
    line-height: 1.2em;
    background-color: #000000;
}

main div {
    position: relative;  /* Ensures the border-effect div can be absolutely positioned */
    background-color: #000000;
    box-sizing: border-box;
    margin-top: 40px;
    /*padding-left: 10px;  !* You might need to adjust this to accommodate the inner border *!*/
}

main2 div {
    position: relative;  /* Ensures the border-effect div can be absolutely positioned */
    background-color: #000000;
    box-sizing: border-box;
    margin-top: 40px;
    /*padding-left: 10px;  !* You might need to adjust this to accommodate the inner border *!*/
}

.border-effect {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;  /* Width of the border */
    height: calc(1.2em * 5);  /* Adjust '1.2em' to the line-height of your text multiplied by the number of lines */
    /*background-color: white;  !* Color of the border *!*/
    border-left: 1px solid rgba(255,255,255,0.6);
    margin-top: 0px;
}

.displaynone {
    display: none;
}

.invisible {
    visibility: hidden;
}

/* Post Stuff */
.post-content {
    width: 1080px;
    height: 1080px;
    margin: auto;
    position: absolute;
    left: 0px;
    top: 0px;

    /*position: relative;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    border: 1px solid #000; /* Optional: for visual debugging */
}

.post-title {
    color: var(--color-link);
    font-size: 5em;
    line-height: 1em;
    position: absolute;
    top: 60px;
    left: 60px;
}

.post-title-bold {
    color: var(--color-text);
    font-size: 4em;
    line-height: 1em;
    position: absolute;
    top: 60px;
    left: 60px;
    font-family: 'NotCourierSans-Bold', 'Courier New', Courier, monospace;
}

.post-title-white {
    color: var(--color-text);
    font-size: 5em;
    line-height: 1em;
    position: absolute;
    top: 60px;
    left: 60px;
}

.post-editorial {
    color: var(--color-text);
    font-size: 3.5em;
    line-height: 1em;
    position: absolute;
    left: 60px;
    top: 180px;
}

.post-left-footer {
    color: var(--color-link);
    font-size: 3em;
    position: absolute;
    left: 60px;
    bottom: 60px;
    font-family: 'NotCourierSans', 'Courier New', Courier, monospace;
}


.post-left-footer-bold {
    text-text-replace: uppercase;
    color: var(--color-link);
    font-size: 3em;
    position: absolute;
    left: 60px;
    bottom: 60px;
    font-width: bold;
    font-family: 'NotCourierSans-Bold', 'Courier New', Courier, monospace;
}

.post-right-footer-bold {
    text-text-replace: uppercase;
    color: var(--color-link);
    font-size: 3em;
    position: absolute;
    right: 60px;
    bottom: 60px;
    font-width: bold;
    font-family: 'NotCourierSans-Bold', 'Courier New', Courier, monospace;
}