/* Regular Styles go below */

html {
    height: 100% !important;
    width: 100%;
    margin: 0;
    touch-action: manipulation;
}

body {
    background-image: url("/your_content/images/bg-header-comic.jpg");
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    min-width: 100%;
    min-height: 100%;
}

p, ul, a {
    font-family:'Rubik',sans-serif;
    color: #341a09;
}

h1, h2, h3, h4 {
    font-family: 'Underdog', cursive;
    color: #341a09;
}

h3 {
    font-size: 1.25em;
}

a {
    text-decoration: none;
    color: #68ad43;
}

header {
    display: grid;
    grid-template-areas:
        "logo"
        "menu";
    width: 100%;
}

#logo {
    grid-area: logo;
    width: 100%;
    max-height: 250px;
    margin: auto;
}

#logo a {
    background-image: url("/your_content/images/Banner top.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    width: 100%;
    height: 175px;
    display: block;
    margin: auto;
}

#mobile-menu {
    display: grid;
    grid-template-areas:
            "social"
            "navigation";
}

#mobile-menu-button {
    display: none;
    grid-area: menu;
    width: 100%;
    background-color: #341A09;
    text-align: center;
    padding: 1px;
    height: 48px;
    font-family: 'Underdog', cursive;
    text-decoration: none;
}

#mobile-menu-button h3 {
    color: #f5debd;
    text-shadow: 0 0 3px #F35E36;
}

header ul.social-links {
    grid-area: social;
    display: flex;
    justify-content: center;
    list-style-type: none;
    width: 100%;
    margin-bottom: 2px;
    z-index: 2;
    padding-left: 0;
}

header ul.social-links li {
    text-align: center;
    margin: 0 3px 0 3px;
    font-size: x-large;
    color: #341a09;
}

header ul.social-links li a {
    text-decoration: none;
    width: 30px;
    height: 100%;
    color: #f5debd;
    text-shadow: 0 0 3px #F35E36;
    transition: 0.2s ease;
}

header .social-links li a:hover {
    color: #fff;
    text-shadow: 0 0 5px #F35E36, 0 0 10px #fffad3;
    transition: 0.2s ease;
}

header ul.social-links li:nth-child(1) a {
    padding-right: 5px;
}

header ul.social-links li a span {
    display: none;
}

header ul.links-menu {
    grid-area: navigation;
    display: flex;
    justify-content: center;
    list-style-type: none;
    background-color: #341a09;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* Gets rid of the First & Last Comic links for desktop, so that it can be added in later for mobile */
header ul.links-menu li:first-child, header ul.links-menu li:nth-child(2) {
    display: none;
}

header ul.links-menu li a {
    color: #f5debd;
    text-shadow: 0 0 3px #F35E36;
    text-decoration: none;
    font-size: 1.25em;
    font-weight: bold;
    font-family: 'Underdog', cursive;
    transition: ease 0.2s;
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
}

header ul.links-menu li:hover a {
    color: #fff;
    text-shadow: 0 0 2px #F35E36, 0 0 3px #fffad3;
    transition: ease 0.2s;
}

header ul.links-menu li:hover {
    box-shadow: inset 0 0 0 100vw rgba(0,0,0,0.5);
    transition: ease 0.2s;
}

.liveStream {
    display: none;
}

ul.links-menu .liveStream a {
    display: grid;
    grid-template-columns: 8px 1fr;
    grid-gap: 0.5em;
    grid-template-areas:
            "icon label label";
    align-items: center;
    background-color: #2E0854;
}

@keyframes glowing {
    0% {
        text-shadow: 0 0 0;
    }
    40% {
        text-shadow: 0 0 2px #302B54, 0 0 4px #551A8B, 0 0 5px #6B238E	;
    }
    50% {
        text-shadow: 0 0 2px #302B54, 0 0 4px #551A8B, 0 0 5px #6B238E	;
    }
    60% {
        text-shadow: 0 0 2px #302B54, 0 0 4px #551A8B, 0 0 5px #6B238E	;
    }
    100% {
        text-shadow: 0 0 0;
    }
}

@keyframes fading {
    0% {
        opacity: 75%;
    }
    40% {
        opacity: 100%;
    }
    50% {
        opacity: 100%;
    }
    60% {
        opacity: 100%;
    }
    100% {
        opacity: 75%;
    }
}

.links-menu .liveStream .icon-twitch{
    grid-area: icon;
    color: #9146FF;
    animation: glowing 1500ms infinite;
    text-shadow: -1px 0 #5C246E, 0 1px #5C246E, 1px 0 #5C246E, 0 -1px #5C246E;
}

.liveStream h3 {
    grid-area: label;
    color: #AB82FF;
    animation: fading 1500ms infinite;
    text-decoration: none;
}

.liveStream:hover {
    background-color: #2E0854;
    transition: background-color 0.20s;
}

.liveStream h3:hover {
    animation: none;
    color: white;
    transition: color 0.20s;
}

#page {
    background-image: url("/your_content/images/bg-body-med.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    padding-bottom: 30px;
}

#comic-page {
    max-width: 1000px;
    margin: auto;
    text-align: center;
    position: relative;
}

.draggable {
    min-width: 30px;
    min-height: 30px;
    background: gray;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 50%;
}

.handle {
    margin: 3px;
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: white;
    opacity: 50%;
}

.caption {
    position: absolute;
    background: beige;
    z-index: 10;
    margin: auto;
    border: 1px solid black;
    display: none;
    overflow-wrap: break-word;
}

.caption p {
    margin: 0.2em;
}

#comic-page img {
    max-width: 100%;
}
.comic-image {
    margin-bottom: 0;
}

.comic-navigation {
    text-align: center;
    padding: 10px 0;
    display: grid;
    grid-template-areas: "FirstPage PreviousPage PageNum NextPage LatestPage";
    justify-content: center;
}

.page-number, .chapter-number, .page-interlude, .scene {
    grid-area: PageNum;
    background-image: url("/your_content/images/Icon_Blank_Long.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 85px;
    width: 150px;
    display: flex;
    align-self: center;
}

.page-number {
    background-image: url("/your_content/images/Icon_Blank.png");
}

.comic-navigation span {
    font-family: 'Underdog', cursive;
    font-size: xx-large;
    margin: auto;
    color: #e1df72;
    text-shadow: 0 0 2px #284532;
}

.first-link, .first-invalid, .previous-link, .previous-invalid, .next-link, .next-invalid, .latest-link, .latest-invalid {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 85px;
    width: 150px;
    text-indent: 100%;
    overflow: hidden;
    display: inline-block;
}

.first-link {
    background-image: url("/your_content/images/Icon_First.png");
    grid-area: FirstPage;
}

.first-invalid {
    background-image: url("/your_content/images/Icon_First2.png");
    grid-area: FirstPage;
}

.previous-link {
    background-image: url("/your_content/images/Icon_Previous.png");
    grid-area: PreviousPage;
}

.previous-invalid {
    background-image: url("/your_content/images/Icon_Previous2.png");
    grid-area: PreviousPage;
}

.next-link {
    background-image: url("/your_content/images/Icon_Next.png");
    grid-area: NextPage;
}

.next-invalid {
    background-image: url("/your_content/images/Icon_Next2.png");
    grid-area: NextPage;
}

.latest-link {
    background-image: url("/your_content/images/Icon_Latest.png");
    grid-area: LatestPage;
}

.latest-invalid {
    background-image: url("/your_content/images/Icon_Latest2.png");
    grid-area: LatestPage;
}

#comic-support {
    text-align: center;
    margin: 0 auto 15px 0;
    padding: 1px 0 15px 0;
    background-color: rgba(0,0,0,0.5);
    height: 100%;
}

#comic-support h3 {
    color: white;
    line-height: 0.5em;
}

#comic-support p {
    color: white;
    width: 75%;
    text-align: center;
    margin: auto;
    padding-bottom: 1.2em;
}

.button {
    display: inline-block;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 1.2em;
    transition: ease 0.2s;
    cursor: pointer;
}

.button a, .button span, .button i {
    color: white;
}

#copy-modal {
    visibility: hidden;
    display: table;
    margin: auto;
    margin-left: -150px;
    min-width: 250px;
    border-radius: 0.6em;
    position: fixed;
    z-index: 2;
    left: 50%;
    bottom: 30px;
    text-align: center;
}

#copy-info {
    padding: 1em 2em;
    background-color: #1B0600;
    color: #f5debd;
    font-family: 'Rubik', sans-serif;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

#copy-modal.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#patreon-button {
    background-color: #F35E36;
}

#patreon-button:hover {
    background-color: #052d49;
    transition: ease 0.2s;
}

#coffee-button {
    background-color: #29ABE0;
    transition: ease 0.2s;
}

#coffee-button:hover {
    background-color: #FBAA19;
    transition: ease 0.2s;
}

#share-button {
    background-color: #68ad43;
    transition: ease 0.2s;
}

#share-button:hover {
    background-color: #e33e2a;
    transition: ease 0.2s;
}

#afterpost-text-buttons {
    margin: auto;
    display: flex;
    flex: auto;
    justify-content: center;
}

.aftertext-button {
    display: inline-block;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 1.2em;
    transition: ease 0.2s;
    background-color: #68ad43;
    margin: 0 0.25em 0 0.25em;
}

.aftertext-button:hover {
    background-color: #458323;
}

.aftertext-button a {
    color: white;
}

#comic-content {
    background-color: #FDF1DC;
    box-shadow: 0 0 15px black;
    max-width: 75%;
    padding: 30px;
    margin: auto;
}

#comic-content img {
    width: 100%;
}

#comic-post {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas:
        "metadata metadata post post post"
        "banner banner banner banner banner";
}

#metadata {
    padding: 10px 30px;
    grid-area: metadata;
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
    border-right: double 5px #341a09;
    text-align: center;
    font-size: small;
}

#post-content {
    grid-area: post;
    margin-left: 1em;
    align-self: start;
    width: 98%;
}

#post-content p {
    padding-left: 20px;
}

#post-content em {
    font-family: 'Underdog', cursive;
}

#transcripts-container {
    max-width: 100%;
    padding: 2em;
}

#active-transcript > * {
    overflow-wrap: anywhere;
    display: none;
}

#active-transcript p {
    margin-top: 0.8em;
}

#language-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    align-content: center;
}

#language-label {
    font-size: 0.9em;
}

#language-select {
    height: 85%;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    font-size: medium;
    margin: 1em 1em 0 1em;
}

#language-select option:checked {
    box-shadow: 0 0 10px 100px #68ad43 inset;
}

#submit-transcript-button {
    background-color: #68ad43;
    margin-left: 1em;
}

/* I changed this from an ID to a class for the book drop */
a.afterpost-img img {
    width: auto;
    max-width: 100%;
    /*float: right;*/
    /*padding: 5px;*/
    margin: 10px 20px 10px 10px;
}

#bonus-banner {
    width: 680px;
    height: 150px;
    margin: 1em auto auto;
    grid-area: banner;
    padding: 5px;
}

#bonus-banner a {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    width: 100%;
    height: 150px;
    display: block;
}

@media only screen and (max-width: 875px) {
    #bonus-banner {
        width: 480px;
        height: 100px;
    }
}

#discourse-comments, #comments-header {
    width: 95%;
    grid-area: discourse;
    margin: 0.6em auto;
}

#footer {
    border-top: #341a09 solid 30px;
    font-size: small;
    text-align: center;
    padding: 1em;
}

#footer p {
    color: #FDF1DC;
}

/* Trying to fix some mobile issues. */
@media only screen and (max-width: 900px) {
    p {
        font-size: 1.1em;
    }

    #comic-page img {
        max-width: 100%;
        margin: auto;
    }

    #comic-support h3 {
        line-height: 1em;
    }

    #comic-support .button, #comic-support .patreon-button {
        margin: 0 0 10px 0;
    }

    .comic-navigation {
        grid-template-areas: "PreviousPage NextPage" "FirstPage LatestPage";
        width: 100%;
        align-content: center;
        justify-content: center;
    }

    .page-number {
        display: none;
    }

    .page-interlude {
        display: none;
    }

    .chapter-number {
        display: none;
    }

    #comic-post {
        display: block;
    }

    .scene {
        display: none;
    }

    #post-content {
        padding: 0;
    }

    #comic-content {
        max-width: 100%;
        padding: 20px;
    }

    #bonus-banner {
        width: 400px;
        max-width: 100%;
        height: 100px;
    }

    #metadata {
        border: none;
        border-bottom: #341a09 double 0.5em;
        border-radius: 0;
        padding: 10px;
    }

    #metadata p {
        line-height: 1em;
    }

    #transcripts-container {
        grid-template-areas:
                "transcript"
                "languages";
    }

    #language-select {
        height: auto;
    }

    #page {
        width: 100%;
    }

    header {
        display: block;
        width: 100vw;
    }

    #logo a {
        height: 100px;
        width: 100vw;
    }

    #mobile-menu-button {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    #mobile-menu {
        display: none;
        grid-template-areas: "navigation" "social";
    }

    .social-links li:first-child, .social-links li:last-child {
        display: none;
    }

    header ul.social-links {
        margin: 0;
    }

    header ul.social-links li {
        width: 20%;
        height: auto;
        margin: 5px;
        align-self: stretch;
    }

    header ul.social-links li a {
        font-size: xx-large;
    }

    header ul.social-links li a:hover {
        font-size: xx-large;
    }

    .social-links {
        flex-wrap: wrap;
        justify-content: space-evenly;
        background-color: #341a09;
        padding: 10px;
    }

    ul.links-menu {
        flex-wrap: wrap;
        align-content: center;
    }

    .links-menu li {
        flex-grow: 1;
        width: 100%;
        height: 48px;
    }

    ul.links-menu li a {
        width: 100%;
        height: 100%;
        display: block;
    }

    ul.links-menu li h3 {
        margin: 13px;
    }

    header ul.links-menu li:first-child, header ul.links-menu li:nth-child(2) {
        display: block;
    }

    .content, #comic-content {
        max-width: 90%;
        width: 90%;
        padding: 15px;
    }


    #page-number {
        display: none;
    }

    .button a {
        border-radius: 2em;
        font-size: large;
        padding: 20px 25px;
    }
}
@media only screen and (min-width: 1800px) {
    body {
        display: grid;
        grid: auto-flow / 1fr 3fr;
        background-image: url("/your_content/images/bg-header-comic.jpg");
        background-repeat: repeat-y;
    }

    #footer {
        grid-column: span 3;
        font-size: medium;
    }

    header {
        align-self: start;
        grid-template-areas: "logo" "menu" "clear";
        background-image: none;
        padding-top: 2em;
    }

    header ul.social-links {
        margin: 0;
        padding-top: 2.5em;
    }

    header ul.social-links li {
        width: 8%;
        height: auto;
        margin: 5px;
        align-self: stretch;
        font-size: 2em;
    }

    ul.social-links li span {
        color: #d29166;
    }

    header ul.social-links li a {
        font-size: 1.25em;
    }

    header ul.social-links li a:hover {
        font-size: 1.25em;
    }

    .social-links {
        justify-content: space-evenly;
        padding: 10px;
    }

    header ul.links-menu {
        flex-wrap: wrap;
        align-content: center;
        background-color: transparent;
        padding-top: 1em;
    }

    .links-menu li {
        flex-grow: 1;
        width: 100%;
        /*height: 48px;*/
        font-size: 1.5em;
    }

    ul.links-menu li a {
        width: 100%;
        height: 100%;
        display: block;
    }

    #page {
        border-left: rgba(52, 26, 9, 1) 10px solid;
    }

    #comic-support {
        height: auto;
    }

    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 2em;
    }

    h3 {
        font-size: 1.75em;
    }

    h4 {
        font-size: 1.5em;
    }

}

#discord-button-div {
    text-align: center;
}

#discord-button-img {
    margin: auto;
    max-width: 350px;
}

#art-raffle-stream-link {
    color: #aee079;
}