:root {
    --red: red;
    --bs-nav-link-font-size: 1.5rem;
    /*--bs-body-font-size: 24px*/
}

/*src: url(asset-url("/fonts/Montserrat-Regular.ttf")) format('truetype');*/

@font-face {
    font-family: "playfairdisplay";
    src: url("/fonts/PlayfairDisplay-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
    size-adjust: 110%;
}

@font-face {
    font-family: "playfairdisplay";
    src: url("/fonts/PlayfairDisplay-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
    size-adjust: 110%;
}

@font-face {
    font-family: "merriweather";
    src: url("/fonts/Merriweather_24pt-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "merriweather";
    src: url("/fonts/Merriweather_24pt-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "ebgaramond";
    src: url("/fonts/EBGaramond-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
    size-adjust: 110%;
}

@font-face {
    font-family: "ebgaramond";
    src: url("/fonts/EBGaramond-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
    size-adjust: 110%;
}

@font-face {
    font-family: "gloock";
    src: url("/fonts/Gloock-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "ptserif";
    src: url("/fonts/PTSerif-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "ptserif";
    src: url("/fonts/PTSerif-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "ptserif";
    src: url("/fonts/PTSerif-Bold.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "ptserif";
    src: url("/fonts/PTSerif-BoldItalic.ttf") format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "crimsontext";
    src: url("/fonts/CrimsonText-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "crimsontext";
    src: url("/fonts/CrimsonText-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "crimsontext";
    src: url("/fonts/CrimsonText-Bold.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "crimsontext";
    src: url("/fonts/CrimsonText-BoldItalic.ttf") format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "poppins";
    src: url("/fonts/Poppins-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "poppins";
    src: url("/fonts/Poppins-Bold.ttf") format('truetype');
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "poppins";
    src: url("/fonts/Poppins-RegularItalic.ttf") format('truetype');
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: "poppins";
    src: url("/fonts/Poppins-MediumItalic.ttf") format('truetype');
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: "montserrat";
    src: url("/fonts/Montserrat-Regular.ttf") format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "montserrat";
    src: url("/fonts/Montserrat-Italic.ttf") format('truetype');
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: "montserrat";
    src: url("/fonts/Montserrat-MediumItalic.ttf") format('truetype');
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: "montserrat";
    src: url("/fonts/Montserrat-Bold.ttf") format('truetype');
    font-style: normal;
    font-weight: bold;
}

*, .image-container > * {
    font-family: "montserrat", "Open Sans", "lato", sans-serif, serif;
}

html, body {
}

body {
    height: 100%;
}

#cosplayer_of_the_day a {

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

/*
Source - https://stackoverflow.com/a/75133529
Posted by Arpita Patel, modified by community. See post 'Timeline' for change history
Retrieved 2025-12-20, License - CC BY-SA 4.0
*/

.modal-open .modal-backdrop {
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1 !important;
}

h1, h2, h1 a, h3, h3 a, h4, h4 a, h5, h5 a, .card-title {
    font-family: "merriweather", "Open Sans", "lato", sans-serif, serif;
    /*font-weight: bold;*/
}

.nav_font {
    font-family: "montserrat", "Open Sans", "lato", sans-serif, serif;
}

.title_font, .title_font a {
    font-family: "merriweather", "Open Sans", "lato", sans-serif, serif;
}

.subtitle {
    font-family: "crimsontext", "Open Sans", "lato", sans-serif, serif;
    font-size: 1.5rem;
}

.btn.active {
    -webkit-box-shadow: 0 0.25em 0.1em 0 #999999;
    -moz-box-shadow: 0 0.25em 0.1em 0 #999999;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

.card-text {
    font-size: smaller;
}

.field_with_errors {
    background-color: lightcoral;

    & span, & input, & textarea {
        border: 1px solid red;
        display: inline-block;
        vertical-align: top;
    }

    & + input[type=" checkbox "] {
        outline: 1px solid red;
    }

    select {
        border: 2px solid lightcoral;
    }
}

/* Rails wraps an errored field's label/input each in their own
   .field_with_errors span, making them grandchildren instead of direct
   children of .input-group -- Bootstrap's corner-squaring rules are all
   direct-child (>) selectors, so they stop matching and both ends render
   fully rounded. Reach through the wrapper the same way Bootstrap's own
   rule does. */
.input-group > .field_with_errors:not(:last-child) .input-group-text,
.input-group > .field_with_errors:not(:last-child) .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .field_with_errors:not(:first-child) .input-group-text,
.input-group > .field_with_errors:not(:first-child) .form-control {
    margin-left: calc(-1 * var(--bs-border-width));
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.floating_button {
    position: fixed;
    bottom: .5em;
    right: 1em;
    z-index: 101;
}

/* Fixed-position wrapper for a page's floating action buttons (scroll-to-
   top, View/Edit), constrained to the same width as the page's Bootstrap
   container instead of the full viewport. These breakpoints intentionally
   duplicate Bootstrap's own .container max-widths rather than using the
   .container class directly: Bootstrap's grid CSS includes ".row > *
   { max-width: 100% }", which matches any direct child of a .row regardless
   of its own class, and since that rule has the same specificity as
   ".container"'s breakpoint rules, wherever this wrapper happens to land as
   a direct child of a .row in a template, that rule silently wins and the
   buttons end up unconstrained at the viewport edge. Defining our own class
   here (loaded after bootstrap.min.css, so it wins any specificity tie on
   source order) makes this robust regardless of surrounding DOM structure. */
.floating_button_group {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    pointer-events: none;
    z-index: 101;
}

@media (min-width: 576px) {
    .floating_button_group {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .floating_button_group {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .floating_button_group {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .floating_button_group {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .floating_button_group {
        max-width: 1320px;
    }
}

.fluid-img img {
/ / This auto-resizes the image . / / max-width: 100 %;
    height: auto;
    width: 100%;
}

.footer_links {
    /*font-size: 1rem;*/

    a, a:visited, a:hover {
        color: black;
        text-decoration: none;
    }
}


.haze {
    opacity: .5;
}

.image-container {
    .card {
        margin: 0 auto;
    }

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

.image_above_text_center {
    clear: both;
    text-align: center;
    overflow: hidden;

    .text_container {
        flex-basis: 100%;
        text-align: center;
    }
}

.image_left_text_wrap {
    clear: both;
    overflow: hidden;

    .card {
        overflow: hidden;
    }

    &.edit {
        display: flex;
        align-items: flex-start;
    }

    .image-container {
        float: left;
        order: 1;
        overflow: hidden;
        padding-right: .35em;

        &:not(.edit) {
            max-width: 50%;
        }
    }

    .text_container {
        order: 2;
        text-align: left;
        width: 100%;

        textarea {
            flex-grow: 1;
            width: 100%;
        }
    }
}

.image_only, .image_only_edit {
    display: inline-block;
    margin: 0 auto;
    vertical-align: top;
/ / width: 100 %;

    .image-container img {
        max-width: 100%;
        height: auto;
    }

    .text_container {
        display: none;
        overflow: hidden;
    }
}

.image_right_text_wrap {
    overflow: hidden;

    .card {
        overflow: hidden;
    }

    &.edit {
        display: flex;
        align-items: flex-start;
    }

    .image-container {
        float: right;
        order: 2;

        &:not(.edit) {
            max-width: 50%;
        }
    }

    .text_container {
        order: 1;
        text-align: left;
        resize: vertical;
        width: 100%;

        textarea {
            flex-grow: 1;
            width: 100%;
        }
    }
}

.img-click-to-enlarge {
    display: none;
}

.icon_black {
    color: black;
}

.page-item.prev {
    display: none;
}

.paginationTop, .paginationBottom {
    list-style: none;
    padding: 0;
    display: inline;
    float: none;
    width: 70%;
    margin: 0 auto;

    li {
        a {
            color: black;
            margin: .2em;
            padding: 0.2em 0.5em;
            text-decoration: none;
        }

        display: inline-block;
        border: 1px solid black;
        border-radius: .2em;

    }

    li.active {
        background-color: lightgray;
    }

}

main a {
    text-decoration: none;
}

.pull_quote {
    border-radius: 5px;
    box-shadow: 0 0 6px 1px rgba(201, 201, 201, 1);
    background-color: white;
    border: 1px solid #c0c0c0;
    font-family: "ebgaramond", "Open Sans", "lato", sans-serif, serif;
    font-size: 1.2rem;
    padding: .9rem;
    margin: .5em auto;

    & * {
        font-family: "ebgaramond", "Open Sans", "lato", sans-serif, serif;
    }
}

/* Make the nav bar centered on collapsed view. */

.navbar .navbar-collapse {
    text-align: center;
}

.red {
    color: var(--red);
}

#scroll_to_top_button {
    position: fixed;
    top: .5em;
    right: 1em;
    z-index: 101
}

.social_media_icons {
    text-align: center;
    float: left;
    padding-bottom: .7rem;
    padding-top: .5rem;
    margin: 0 .7rem;
    border-radius: 6px;
    border: 1px solid rgb(222, 226, 230);

    legend {
        color: black;
        font-size: 1rem;
    }
}

.social-share-button {
    text-align: center;

    .ssb-icon {
        height: 1.5rem;
        width: 1.5rem;
        background-size: 1.5rem 1.5rem;
    }
}

.sort.asc, .sort.desc {
    /*background-color: yellow;*/
}

.sort.asc::after {
    content: "\002B06";
    padding-left: 3px;
}

.sort.desc::after {
    content: "\002B07";
    padding-left: 3px
}

.show_text_container {
    white-space: pre-wrap;
}

.text_container {
    font-family: "ebgaramond", "Open Sans", "lato", sans-serif, serif;
    font-size: 1.2rem;
    text-align: left;
    padding: 0 .5rem 0 .5rem;

    & * {
        font-family: inherit;
        text-align: inherit;
        font-size: inherit;
        text-justify: inherit;
        white-space: inherit;
    }

    legend {
        margin-bottom: .25em;
    }

    & > h2 {
        line-height: 1.4em;
    }

    & > h1, & > h2, & > h3, & > h4, & > h1 a, & > h2 a, & > h3 a, & > h4 a {
        font-family: "merriweather", "Open Sans", "lato", sans-serif, serif;
        font-size: revert;
        margin-bottom: 0;
    }

    textarea {
        white-space: pre-wrap;
    }

    ul, ul li, ul li a {
        white-space: normal;
        text-align: left;
    }

    .show-youtube {
        font-family: "montserrat", "Open Sans", "lato", sans-serif, serif;
        font-size: 0.6em;
    }
}

@media (min-width: 768px) {


    :root {
        --red: red;
        --bs-body-font-size: 16px;
        --bs-nav-link-font-size: 1.2rem;

    }

    .form-control {
        font-size: 1rem;
    }

    .image_left_text_wrap.image-container, .image_right_text_wrap.image-container {
        width: auto;
    }

    .img-click-to-enlarge {
        display: block;
    }

    .image_only {
        max-width: 49%;

        .image-container img {
            width: 100%;
        }
    }

    .page-item.prev {
        display: list-item;
    }

    .pull_quote {
        width: calc(100% - 2em);
    }

    .rounded-md-3 {
        border-radius: .5rem;
    }

    .text_container {
        font-size: 1.1rem;
    }

    ul {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }
}

.rotate-text {
    transform: rotate(-5deg);
    background-color: white;
    opacity: 50%;
    transform-origin: center left;
}

/* Dim the article/content-block editor row when its hidden checkbox is
   checked -- driven directly off :checked instead of JS reading/writing
   inline opacity (see the eye-icon <label> next to these checkboxes).
   Scoped to the hidden checkbox specifically by id prefix -- .more_parent
   and .visibility_container also contain other unrelated checkboxes
   (nsfw, enable_comments, add_watermark, hide_image, ...), and a bare
   input[type=checkbox]:checked would dim the whole row based on any of
   those instead of the one it's actually meant to reflect. */
.more_parent:has(input[id^="article_hidden_"]:checked),
.visibility_container:has(input[id^="content_hidden_"]:checked) {
    opacity: 0.5;
}

/* Image-preview toggle icons (click to enlarge, watermark, cosplayer, hide
   image) -- replaces the old clickyThings/toggleCheckboxColor JS entirely.
   Each icon is now a <label for="..."> around the hidden checkbox, so the
   click-to-toggle is native; this just drives the icon's color off the
   checkbox's :checked state. Scoped to each field's own image_preview_*
   root container by id, so multiple content blocks on the same page (each
   with their own per-instance checkbox ids) don't affect each other's icon
   color. Substring match (not a prefix) since the id looks like
   "content_click_to_enlarge_5" for content blocks but plain
   "article_click_to_enlarge" (no numeric suffix) for the single article
   image, which only ever has one instance per page. */
[id^="image_preview_"]:has([id*="click_to_enlarge"]:checked) .icon_click_to_enlarge,
[id^="image_preview_"]:has([id*="add_watermark"]:checked) .icon_add_watermark,
[id^="image_preview_"]:has([id*="is_cosplayer"]:checked) .icon_is_cosplayer {
    color: var(--color1);
}

/* hide_image is the one reversed case: purple/unchecked means visible
   (matches the eye icon), checked means hidden -- so this one goes purple
   -> black instead of black -> purple like the others. */
[id^="image_preview_"]:has([id*="hide_image"]:checked) .icon_hide_image {
    color: black;
}