:root {
    --size: 10px;
    --gap: calc(var(--size) / 14);
    --duration: 9s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
}

@font-face {
    font-family: "redaction-50";
    src:
        url("fonts/Redaction_50-Bold.woff2") format('woff2');
}

body {
    background-image: url("images/backdv2.png");
    background-repeat: repeat;
    background-size: 300px 300px;
    font-family: monospace;
    color: ghostwhite;
}

.center {
    text-align: center;
}

table {
    background-color: black;
}

.window {
    margin-left: 15px;
    margin-right: 15px;
}

.main-table {
    margin: 0 auto;
}

.body-header-table {
    width: 100%;
    height: 20px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-word;
    word-break: break-word;
}

.body-header-table tr {
    background-color: aliceblue;
}

.body-header-table td {
    color: black;
}

.body-table {
    width: 100%;
    max-width: 1000px;
    height: 400px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-word;
    word-break: break-word;
}

.body-table td {
    overflow: visible;
}

.col-white {
    color: ghostwhite;
}

.col-tear {
    color: cornflowerblue;
}

.col-blood {
    color: darkred;
}

.center2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.effect {
    width: fit-content;
    block-size: fit-content;
}

.effect:hover img.image {
    display: none;
}

.effect img.hover {
    display: none;
}

.effect:hover img.hover {
    display: block;
}

.spoiler,
.spoiler2,
.spoiler a,
.spoiler2 a {
    background-color: #111111;
}

.spoiler:hover,
.spoiler:hover a {
    color: ghostwhite;
    background-color: black;
}

.spoiler2:hover,
.spoiler2:hover a {
    background-color: ghostwhite;
    color: black;
}

.spoiler3:before {
    background-color: #111111;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 3px;
    content: attr(cen);
}

.spoiler3:hover:before {
    color: ghostwhite;
    content: attr(rev);
    font-size: x-small;
    background-color: black;
    padding: 0;
}



.caption {
    background-color: black;
    color: ghostwhite;
    height: fit-content;
    width: fit-content;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-top: 5px;
    font-family: monospace;
    font-size: x-large;
}

.body-table-main {
    height: 700px;
    width: auto;
    overflow: auto;
    border: 2px solid ghostwhite;
    color: ghostwhite;
    font-family: monospace;
    font-size: larger;
    padding: 10px;
}

.a-table-main {
    height: 530px;
    width: auto;
    overflow: auto;
    border: 2px solid ghostwhite;
    color: ghostwhite;
    font-family: monospace;
    font-size: larger;
    padding: 10px;
    text-align: center;
}

.top-f {
    display: table;
}

.dark {
    color: #221C35;
}

.flicker {
    animation: flicker 1s infinite;
}

.hacker {
    color: #149414;
}

.top-fc {
    display: table-caption;
    caption-side: top;
}

.a-date {
    display: flex;
    align-items: center;
    text-align: center;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
}

.a-date::before,
.a-date::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid darkred;
}

.a-date:not(:empty)::before {
    margin-right: .25em;
}

.a-date:not(:empty)::after {
    margin-left: .25em;
}

code {
    color: gainsboro;
    background-color: #0e0e0e;
    padding: 2px;
    border-radius: 5px;
}

.video-holder {
    border: 15px groove cornflowerblue;
}

.main-container, .main-container-left {
    margin: auto;
    max-width: 1000px;
    padding-top: 25px;
    padding-bottom: 8px;
    padding-left: 1em;
    padding-right: 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    min-height: 700px;
    border-style: solid;
    border-width: 15px 2px 15px 2px;
    border-color: ghostwhite;
    color: ghostwhite;
    background-color: black;
    font-family: monospace;
    font-size: larger;
    margin-top: 100px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-word;
    word-break: break-word;
}
.main-container-left {
    align-items: normal; 
}
.max-width-90 {
    max-width: 90%;
}

.main-video {
    margin: auto;
    max-width: 1000px;
    padding-top: 25px;
    padding-bottom: 8px;
    padding-left: 1em;
    padding-right: 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    height: 700px;
    border-style: solid;
    border-width: 15px 2px 15px 2px;
    border-color: ghostwhite;
    color: ghostwhite;
    background-color: black;
    font-family: monospace;
    font-size: larger;
    padding: 10px;
    margin-top: 100px;
}

.main-video h2 {
    font-size: x-large;
}

.main-video video {
    object-fit: cover;
    max-width: 100%;
    height: auto;
}

.topnav {
    overflow: hidden;
    background-color: black;
    text-align: center;
    margin-bottom: 20px;
    max-width: 1002px;
    border: 6px ridge ghostwhite;
    position: relative;
}

.inner-topnav {
    display: inline-block;
    background-color: black;
}

.topnav a {
    display: inline-block;
    padding: 5px 20px;
    color: ghostwhite;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    border-right: 2px solid ghostwhite;
    margin-top: 10px;
    margin-bottom: 10px;
}

.topnav a:last-child {
    border-right: none;
}

.topnav a:hover {
    background-color: rgb(8, 8, 8);
    color: black;
    animation: textWiggle 1.0s infinite;
}

.topnav .right {
    position: absolute;
    left: 20px;
    top: 1px;
    max-height: 50px;
}

.topnav .left {
    position: absolute;
    right: 20px;
    top: 1px;
    max-height: 50px;
}

.topnav a:active {
    background-color: darkred;
    color: ghostwhite;
}

.body-table-marquee {
    height: 390px;
    width: 100%;
    max-width: 1000px;
    overflow: auto;
    border: 1px solid ghostwhite;
}

.body-table-div {
    height: 1090px;
}

.a-table-div {
    height: 552px;
}

.a-table-div img {
    width: 100%;
    max-width: 350px;
}
.body-table-div table img {
    max-width: 100%;
}

.img-hor {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.title {
    background-color: black;
    color: ghostwhite;
    font-size: 100px;
    width: fit-content;
    font-family: redaction-50, serif;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

.dv-font {
    font-family: redaction-50, serif;
}

.wiggle {
    animation: textWiggle 2.4s infinite;
}

.wiggle2 {
    animation: textWiggle 1.0s infinite;
}

.flash {
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

hr {
    color: ghostwhite;
    width: 85%;
    border: 3px double ghostwhite;
}

.artist-portraits img {
    max-width: 100%;
}

.marquee {

    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
}

.marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    animation: scroll-x var(--duration) linear infinite;
}

@keyframes scroll-x {
    from {
        transform: translateX(var(--scroll-start));
    }

    to {
        transform: translateX(var(--scroll-end));
    }
}

@keyframes scroll-y {
    from {
        transform: translateY(var(--scroll-start));
    }

    to {
        transform: translateY(var(--scroll-end));
    }
}

.body-table-marquee .marquee img {
    height: 300px;
    object-fit: cover;
}

a:hover {
    color: slategrey;
}

.follow-footer {
    display: block;
    background-color: ghostwhite;
    border: 2px solid black;
    height: fit-content;
    width: fit-content;
    padding-left: 40px;
    padding-right: 40px;
    font-size: x-large;
    font-family: monospace;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 10px;
}

.text_back {
    background-color: black;
    height: fit-content;
    width: fit-content;
    padding-left: 20px;
    padding-right: 20px;
    font-family: monospace;
    font-size: large;
}

.flip-off {
    position: fixed; 
    right: 0; 
    bottom: 0; 
    width: 200px; 
    height: 250px;
}

.smsh {
    background: url(images/summershow.png);
    background-color: black;
    background-repeat: repeat;
    background-size: cover;
    color: ghostwhite;
    font-size: 85px;
    font-family: redaction-50, serif;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 1300px;
    width: 80%;
    border: 15px solid black;
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-word;
    word-break: break-word;
}

.cancer {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-word;
    word-break: break-word;
}


@keyframes textWiggle {
    0% {
        text-shadow: 0.4389924193300864px 0 1px ghostwhite, -0.4389924193300864px 0 1px black, 0 0 3px;
    }

    5% {
        text-shadow: -2.7928974010788217px 0 1px ghostwhite, -2.7928974010788217px 0 1px black, 0 0 3px;
    }

    10% {
        text-shadow: 0.02956275843481219px 0 1px ghostwhite, -0.02956275843481219px 0 1px black, 0 0 3px;
    }

    15% {
        text-shadow: -0.40218538552878136px 0 1px ghostwhite, -0.40218538552878136px 0 1px black, 0 0 3px;
    }

    20% {
        text-shadow: 3.4794037899852017px 0 1px ghostwhite, -3.4794037899852017px 0 1px black, 0 0 3px;
    }

    25% {
        text-shadow: -1.6125630401149584px 0 1px ghostwhite, -1.6125630401149584px 0 1px black, 0 0 3px;
    }

    30% {
        text-shadow: 0.7015590085143956px 0 1px ghostwhite, -0.7015590085143956px 0 1px black, 0 0 3px;
    }

    35% {
        text-shadow: -3.896914047650351px 0 1px ghostwhite, -3.896914047650351px 0 1px black, 0 0 3px;
    }

    40% {
        text-shadow: 3.870905614848819px 0 1px ghostwhite, -3.870905614848819px 0 1px black, 0 0 3px;
    }

    45% {
        text-shadow: -2.231056963361899px 0 1px ghostwhite, -2.231056963361899px 0 1px black, 0 0 3px;
    }

    50% {
        text-shadow: 0.08084290417898504px 0 1px ghostwhite, -0.08084290417898504px 0 1px black, 0 0 3px;
    }

    55% {
        text-shadow: -2.3758461067427543px 0 1px ghostwhite, -2.3758461067427543px 0 1px black, 0 0 3px;
    }

    60% {
        text-shadow: 2.202193051050636px 0 1px ghostwhite, -2.202193051050636px 0 1px black, 0 0 3px;
    }

    65% {
        text-shadow: -2.8638780614874975px 0 1px ghostwhite, -2.8638780614874975px 0 1px black, 0 0 3px;
    }

    70% {
        text-shadow: 0.48874025155497314px 0 1px ghostwhite, -0.48874025155497314px 0 1px black, 0 0 3px;
    }

    75% {
        text-shadow: -1.8948491305757957px 0 1px ghostwhite, -1.8948491305757957px 0 1px black, 0 0 3px;
    }

    80% {
        text-shadow: 0.0833037308038857px 0 1px ghostwhite, -0.0833037308038857px 0 1px black, 0 0 3px;
    }

    85% {
        text-shadow: -0.09769827255241735px 0 1px ghostwhite, -0.09769827255241735px 0 1px black, 0 0 3px;
    }

    90% {
        text-shadow: 3.443339761481782px 0 1px ghostwhite, -3.443339761481782px 0 1px black, 0 0 3px;
    }

    95% {
        text-shadow: -2.1841838852799786px 0 1px ghostwhite, -2.1841838852799786px 0 1px black, 0 0 3px;
    }

    100% {
        text-shadow: 2.6208764473832513px 0 1px ghostwhite, -2.6208764473832513px 0 1px black, 0 0 3px;
    }
}

@keyframes flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    27%,
    29%,
    31%,
    33%,
    35%,
    37%,
    39%,
    41%,
    43%,
    45%,
    47%,
    49%,
    51%,
    53%,
    55%,
    57%,
    59%,
    61%,
    63%,
    65%,
    67%,
    69%,
    71%,
    73%,
    75%,
    77%,
    79%,
    81%,
    83%,
    85%,
    87%,
    89%,
    91%,
    93%,
    95%,
    97%,
    99%,
    100% {
        filter: brightness(100%);
    }

    20% {
        filter: brightness(90%);
    }

    22%,
    24%,
    26%,
    28%,
    30%,
    32%,
    34%,
    36%,
    38%,
    40%,
    42%,
    44%,
    46%,
    48%,
    50%,
    52%,
    54%,
    56%,
    58%,
    60%,
    62%,
    64%,
    66%,
    68%,
    70%,
    72%,
    74%,
    76%,
    78%,
    80%,
    82%,
    84%,
    86%,
    88%,
    90%,
    92%,
    94%,
    96%,
    98% {
        filter: brightness(80%);
    }
}

pre {
    white-space: pre-wrap;
    /* Since CSS 2.1 */
    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+ */
}

.image-left {
    position: fixed;
    top: 400px;
    left: 260px;
    transform: translate(-50%, -50%);
    width: 400px;
}

.image-right {
    position: fixed;
    top: 190px;
    right: 150px;
    width: 300px;
}

/* START GALLERY AUTO GENERATION STYLES */
.gallery-body {
    text-align: center;
}

.gallery-body header h1 {
    margin-bottom: 0px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-gap: 2px;
    width: 100%;
}

.gallery-item {
    text-align: center;
}

.gallery-item img {
    max-width: 100%;
    height: 400px;
    object-fit: cover;
    border: 5px double darkred;
    padding: 10px;
}

.stand-alone-gallery {
    text-align: center;
    
}

.stand-alone-gallery img {
    width: 100%;
    max-width: 1000px;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 5px double darkred;
    padding: 10px;
}

/* END GALLERY AUTO GENERATION STYLES */


@media screen and (max-width: 1000px) {

    .main-video {
        height: auto;
        width: 95%;
    }

    .image-left,
    .image-right {
        position: fixed;
    }

    .image-left {
        left: 10px;
        top: 800px;
    }

    .image-right {
        right: 10px;
        top: 550px;
    }

    .topnav .left, .topnav .right {
        visibility: hidden;
    }
    
    .title {
        font-size: 50px;
    }
    .smsh {
        font-size: 45px;
        padding-left: 5px;
        padding-right: 5px;
        max-width: 100%;
        width: 90%;
    }
    .flip-off {
        opacity: 0.5;
    }
    .gallery {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 450px) {
    .follow-footer {
        font-size: small;
    }
}

.glitch {
    position: relative;
    margin: 0 auto;
}

@keyframes noise-anim {
    0% {
        clip: rect(90px, 9999px, 61px, 0);
    }

    5% {
        clip: rect(98px, 9999px, 17px, 0);
    }

    10% {
        clip: rect(90px, 9999px, 83px, 0);
    }

    15% {
        clip: rect(53px, 9999px, 61px, 0);
    }

    20% {
        clip: rect(61px, 9999px, 82px, 0);
    }

    25% {
        clip: rect(36px, 9999px, 24px, 0);
    }

    30% {
        clip: rect(84px, 9999px, 56px, 0);
    }

    35% {
        clip: rect(85px, 9999px, 99px, 0);
    }

    40% {
        clip: rect(92px, 9999px, 32px, 0);
    }

    45% {
        clip: rect(97px, 9999px, 58px, 0);
    }

    50% {
        clip: rect(63px, 9999px, 34px, 0);
    }

    55% {
        clip: rect(27px, 9999px, 79px, 0);
    }

    60% {
        clip: rect(88px, 9999px, 41px, 0);
    }

    65% {
        clip: rect(71px, 9999px, 10px, 0);
    }

    70% {
        clip: rect(10px, 9999px, 64px, 0);
    }

    75% {
        clip: rect(47px, 9999px, 74px, 0);
    }

    80% {
        clip: rect(8px, 9999px, 96px, 0);
    }

    85% {
        clip: rect(24px, 9999px, 15px, 0);
    }

    90% {
        clip: rect(98px, 9999px, 11px, 0);
    }

    95% {
        clip: rect(56px, 9999px, 75px, 0);
    }

    100% {
        clip: rect(44px, 9999px, 91px, 0);
    }
}

.glitch:after {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    text-shadow: -1px 0 red;
    top: 0;
    color: white;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
    0% {
        clip: rect(31px, 9999px, 16px, 0);
    }

    5% {
        clip: rect(79px, 9999px, 52px, 0);
    }

    10% {
        clip: rect(27px, 9999px, 22px, 0);
    }

    15% {
        clip: rect(34px, 9999px, 38px, 0);
    }

    20% {
        clip: rect(10px, 9999px, 68px, 0);
    }

    25% {
        clip: rect(10px, 9999px, 49px, 0);
    }

    30% {
        clip: rect(90px, 9999px, 3px, 0);
    }

    35% {
        clip: rect(44px, 9999px, 89px, 0);
    }

    40% {
        clip: rect(71px, 9999px, 50px, 0);
    }

    45% {
        clip: rect(46px, 9999px, 63px, 0);
    }

    50% {
        clip: rect(72px, 9999px, 81px, 0);
    }

    55% {
        clip: rect(82px, 9999px, 48px, 0);
    }

    60% {
        clip: rect(14px, 9999px, 85px, 0);
    }

    65% {
        clip: rect(3px, 9999px, 22px, 0);
    }

    70% {
        clip: rect(100px, 9999px, 62px, 0);
    }

    75% {
        clip: rect(29px, 9999px, 38px, 0);
    }

    80% {
        clip: rect(19px, 9999px, 84px, 0);
    }

    85% {
        clip: rect(71px, 9999px, 21px, 0);
    }

    90% {
        clip: rect(57px, 9999px, 57px, 0);
    }

    95% {
        clip: rect(20px, 9999px, 5px, 0);
    }

    100% {
        clip: rect(75px, 9999px, 99px, 0);
    }
}

.glitch:before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: 1px 0 blue;
    top: 0;
    color: white;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim-2 3s infinite linear alternate-reverse;
}