: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_above_text_left {
    clear: both;
    overflow: hidden;

    .text_container {
        text-align: left;
    }

    .image_container {
        text-align: center;
    }

    .text_container {
        text-align: left;
    }
}

.image_above_text_right {
    clear: both;
    overflow: hidden;

    .text_container {
        text-align: right;
    }

}

.image_below_text_center {
    clear: both;
    overflow: hidden;

    .text_container {
        text-align: center;
    }
}

.image_below_text_left {
    clear: both;
    overflow: hidden;

    .text_container {
        text-align: left;
    }
}

.image_below_text_right {
    clear: both;
    overflow: hidden;

    .text_container {
        text-align: right;
    }
}

.image_left_text_wrap {
    clear: both;
    overflow: hidden;

    .card {
        overflow: hidden;
    }

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

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

    .text_container {
        order: 2;
        text-align: left;
    }
}

.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;
    }

    .image_container {
        float: right;
        order: 2;

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

    .text_container {
        order: 1;
        text-align: left;
    }
}

.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.5rem;
    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;
    }
}

@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;
}