/*
Theme Name: SHIN! Ghost Revolution
Author: NOLNIR
Author URI: https://nolnir.com
Description: custom WordPress theme made for Ghost Revolution.
Version: 1.0
*/


                /* website palette */

:root {
    --backgroundColor: #cac6c7;
    --contentColor: #CAC6C7;
    --backgroundGradientColor: #6D0006;
    --bodyFontColor: #2b292a;
    --bodyLinkColor: #6D0006;
    --bodyLinkHoverColor: #940006;
    --headingColor: #6D0006;
    --headingHoverColorLink: #940006;
    --buttonColor: #000000;
    --buttonHoverColor: #6D0006;
    --buttonTextColor: #B99630;
    --buttonTextColorHover: #525252;
    --paginationButtonColor: #6D0006;
    --paginationButtonHoverColor: #940006;
    --paginationButtonTextColor: #B99630;
    --paginationButtonTextColorHover: #000000;
    --scrollBarColor: #2b292a;
    --sideBarScrollBarColor: #B99630;
    --landingLink: #000000;
    --landingLinkHover: #B99630;
    --scrollbarFaceColor: #B99630;
    --cabinFont: "Cabin", sans-serif;
    --bebasNeueFont: "Bebas Neue", sans-serif;
    --logoDropshadow: rgba(202, 198, 199, 1);
    /* generic colors that do not change btwn modes */
    --darkRed: #6D0006;
    --red: #940006;
    --brightRed: #d80007;
    --black: #000000;
    --gold: #B99630;
    --lightGrey: #CAC6C7;
    --grey: #525252;
    --darkGrey: #2b292a;
}

.darkmode {
    --logoDropshadow: rgba(185, 150, 48, 1);
    --backgroundColor: #6D0006;
    --backgroundGradientColor: #2b292a;
    --buttonHoverColor: #940006;
    --contentColor: #2b292a;
    --bodyFontColor: #CAC6C7;
    --bodyLinkColor: #b99630;
    --bodyLinkHoverColor: #d80007;
    --headingColor: #B99630;
    --paginationButtonColor: #940006;
    --paginationButtonHoverColor: #525252;
    --landingLink: #B99630;
    --landingLinkHover: #CAC6C7;
    --scrollBarColor: #B99630;

}

                /* animations */

@keyframes allowScroll {
    /* allows page to scroll after it loads */
    from {
        overflow-y: hidden;
        overflow-x: hidden;
    }
    to {
        overflow-y: auto;
        overflow-x: hidden;
    }
}

@keyframes openPage {
    /* animation for a soft load */
    from {opacity: 0;}
    to {opacity: 1;}
} 

@keyframes slideInLeft {
    /* animation for a slide in from the left */
    from {
        opacity: 0;
        translate: -100vw;
        display: none;
    }
    to {
        opacity: 1;
        translate: 0vw;
    }
}

@keyframes slideInRight {
    /* animation fot a slide in from the right */
    from {
        opacity: 0;
        translate: 100vw;
        display: none;
    }
    to {
        opacity: 1;
        translate: 0vw;
    }
}

@keyframes slideDownMenu {
    /* page opener animation for sliding in the menu tab */
    from {translate: 0vw -10vh;}
    to {translate: 0vw 0vh;}
}

@keyframes slideRightMenu {
    /* animation for sliding in the side bar tab */
    from {translate: -10vw;}
    to {translate: 0vw;}
}

@keyframes slideUpToggle {
    /* animation for dark mode toggle */
    from {translate: 0vh 0vh;}
    to {translate: 0vh -12vh;}
}

@keyframes loadFadeOut {
    /* animation to fade out the loading screen background */
    from {
        opacity: 1;
        z-index: 1000;
        display:block;
    }
    to {
        opacity: 0;
        z-index: -1000;
        display:none;
    }
}

@keyframes loadingBar {
	/* loading bar on loading screen*/
	0% {transform: scale(1, 1)}
	15% {transform: scale(0.5, 1)}
	20% {transform: scale(0, 1)}
	25% {transform: scale(0.5, 1)}
	30% {transform: scale(1, 1)}
	45% {transform: scale(0.5, 1)}
	50% {transform: scale(0, 1)}
	55% {transform: scale(0.5, 1)}
	60% {transform: scale(1, 1)}
}




                /* loading screen */
.loadBg {
    background-color: var(--backgroundColor);
    background: linear-gradient( var(--backgroundColor) 20%,  var(--backgroundGradientColor) 80%);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0 auto;
    align-content: space-around;
    z-index: 1000;
    animation: 200ms ease-in-out 1.2s forwards loadFadeOut;
    cursor: wait;
}

.loadingDot {
    width: 100%;
    text-align: center;
    color: var(--bodyFontColor);
    margin: 0 auto;
    font-size: 5rem;
    color: var(--landingLink);
    animation: 1s ease-in-out 0ms 20 alternate loadingBar;
}

                /* general style */

* {
    /* fix the calculations of the container final sizes -
    make sure the determined size remains just that */
    box-sizing: border-box;
}


html {
    /*scrollbar definitions below*/
    scrollbar-color: var(--scrollBarColor) var(--contentColor);
    scrollbar-width: thin;
    scroll-behavior: smooth;
}


body {
    background-color: var(--backgroundColor);
    background: linear-gradient( var(--backgroundColor) 20%,  var(--backgroundGradientColor) 80%);
    background-attachment: fixed;
    font-family: var(--cabinFont);
    padding: 0;
    margin: 0;
    color: var(--bodyFontColor);
    scrollbar-gutter: stable both-edges;
    font-size: 1.2rem;
}

video {
    width: 100%;
    height: auto;
}

.noScroll {overflow-y: hidden;}
.yesScroll {overflow-y: auto;}
/* catch-all scroll enable / disable toggles */

.loadScroll { /* class to lazy load a page */
    overflow-y: hidden; /* this is frame 0 for the animation */
    overflow-x: hidden;
    animation: 1ms ease-in-out 1300ms forwards allowScroll;
}

h1,h2,h3,h4,h5 {
    font-family: var(--bebasNeueFont);
    &:a:hover {
        color: var(--headingHoverColorLink);
        cursor: grab;
    }
    &.altHeading {color: var(--headingColor);}
}

a {
    color: var(--bodyLinkColor);
    text-decoration: none;
    transition: color 150ms 0s ease-in-out;
    &:hover {color: var(--bodyLinkHoverColor)}
}

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

button {
    margin: 0 auto;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    padding: .5rem;
    border: 0;
    border-radius: 10px;
    &:hover{
        cursor: grab;
    }

}

p,h1,h2,h3,h4,h5 {
    text-wrap: wrap;
    word-break: break-word;
}

code {
    display: block;
    background-color: #111;
    color: yellow;
    text-wrap: wrap;
    word-break: normal;
    padding: 1rem;
    font-size: 0.9rem;
    font-family: monospace;
}

hr {
    /* change line color and style */
        color: inherit;
        width: 50%;
        border: 1px dashed;
}


                /* generic containers */

.container {
    /* general container styling */
    width: 100%;
    border-radius: 1rem;
    padding: 1rem;
    height: auto;
    margin: 0 auto 1rem;
    hr {
    /* change line color and style */
        color: transparent;
        width: 50%;
    }
    h1,h2,h3,h4,h5 {margin: 0 0 1rem;}
}
    /* container colors */
.styleA {background-color: var(--grey);}
.styleB {background-color: var(--darkRed);}
.styleC {background-color: var(--black);}
.styleD {background-color: var(--gold);}

    /* scrollbar colors */
.goldScrollBar {scrollbar-color: var(--gold) transparent;}
.darkRedScrollBar {scrollbar-color: var(--gold) transparent;}
.blackScrollBar {scrollbar-color: var(--black) transparent;}
.lightGreyScrollBar {scrollbar-color: var(--lightGrey) transparent;}

    /* container text colors */
.goldText {
    color: var(--gold);
    h1,h2,h3.h4,h5 {color: var(--gold);}
    hr {border: 1px dashed var(--gold);}
}
.whiteText {
    color: var(--lightGrey);
    h1,h2,h3.h4,h5 {color: var(--lightGrey);}
    hr {border: 1px dashed var(--lightGrey);}
}
.blackText {
    color: var(--black);
    h1,h2,h3.h4,h5 {color: var(--black);}
    hr {border: 1px dashed var(--black);}
}
    /* text changes */
.alignRight {text-align: right;}
.alignCenter {text-align: center;}
.lowerCase {text-transform: lowercase;}
.upperCase {text-transform: uppercase;}

    /* width changes */
.smaller {width:60%;}
.halfSize {width: 50%;}
.quarterSize {width: 25%;}
.centerContainer {margin: 0 auto;}

    /* link colors */
.goldLink {a {color: var(--gold);}}
.blackLink {a {color: var(--black);}}
.darkRedLink {a {color: var(--darkRed);}}
.lightGreyLink {a {color: var(--lightGrey);}}

    /* link hover colors */
.goldLinkHover {a:hover, .current-menu-item a:hover, .current-menu-item a{color: var(--gold);}}
.blackLinkHover {a:hover, .current-menu-item a:hover, .current-menu-item a {color: var(--black);}}
.darkRedLinkHover {a:hover, .current-menu-item a:hover, .current-menu-item a {color: var(--darkRed);}}
.lightGreyLinkHover {a:hover, .current-menu-item a:hover, .current-menu-item a {color: var(--lightGrey);}}

    /* selection box */
.selectBox {
/* for boxes that are considered selection containers */
    scrollbar-gutter: stable both-edges;
    text-transform: lowercase;
    scrollbar-width: thin;
    padding: .2rem;
    min-height: 75px;
    max-height: 125px;
    overflow-y: scroll;
    border: .5rem solid transparent;
    a {transition: color 0s 0s linear;}
    ul {margin: 0; padding: 0;}
    li {
        list-style: none;
        border-radius: 1rem;
        padding: 0 0.5rem;
        width: 100%;
        font-weight: bold;
        &:hover {cursor: grab; a{color: initial;}}
    }
    
    .current-menu-item {
        :after {margin-left: 1rem; content: '•';}
        padding-left: 1rem;
    }

    /* list highlight colors */
    &.goldHover {li:hover, .current-menu-item {background-color: var(--gold);}}
    &.blackHover {li:hover, .current-menu-item {background-color: var(--black);}}
    &.darkRedHover {li:hover, .current-menu-item {background-color: var(--darkRed);}}
    &.darkGreyHover {li:hover, .current-menu-item {background-color: var(--darkGrey);}}
}




                /* style for landing page */

.landingPage {
    overflow: hidden;
    a {color: var(--landingLink);}
    a:hover {color: var(--landingLinkHover);}
}

.logoBox {
    /* the container for the logo itself */
    background-color: transparent;
    margin: 1rem auto;
    width: 50%;
    max-width: 600px;
    img {
        filter: drop-shadow(0 0.5rem var(--logoDropshadow)) invert(0%);
        transition: all 300ms 50ms ease-in-out;
        &:hover {transform: scale(.9); filter: drop-shadow(0 0.5rem var(--logoDropshadow)) invert(90%);}
    }
}
.logoCradle {
    /* the container holding the logo and the website title */
    margin: 0 auto;
    text-align: center;
    height: 100vh;
    align-content: space-around;
    li {
        list-style: none;
        margin: 0 auto;
        padding: 0;
    }
    a {
        transition: letter-spacing 100ms 0ms linear;
        &:hover {letter-spacing: .1rem;}
    }
}

.logoLinks {
    width: 100%;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    li {
        list-style: none;
        display: inline-block;
    }
    button {
        margin: 0 1rem;
        font-size: 2rem;
        font-weight: bold;
        background-color: transparent;
        color: var(--landingLink);
        transition: color 200ms 0s ease-in-out;
        &:hover {color: var(--landingLinkHover);}
    }
}

.websiteTitle {
    /* the website name itself */
    font-size: 10rem;
}

.landingRow {
    width: 100%;
    position: absolute;
    &::after {clear:both;}
    /* position the first navigation cradle at the top */
    &:nth-of-type(odd){
        top: 0;
        left: 0;
    }
    /* position the second navigation cradle at the bottom */
    &:nth-of-type(even){
        bottom: 0;
        left: 0; 
    }
    li {
        list-style: none;
    }
    li:nth-of-type(odd) {
        text-align: left;
    }
    li:nth-of-type(even) {
        text-align: right;
    }
}

.landingColumn {
    width: 50%;
    padding: 1rem;
    margin: 0 auto;
    float: left;

    a {
        transition: all 100ms 0ms linear;
        &:hover {letter-spacing: .15rem;}
    }
}

                /* menu styling */
.menuWrapper {
    position: fixed;
    right: 5vw;
    width: 300px;
    top: 0;
    z-index: 99; /* higher than all elements, but below loading screen */
    translate: 0 -10vh; /* this is frame 0 for the animation */
    animation: 1s ease-in-out 1000ms 1 forwards slideDownMenu;
    transition: top 500ms 0ms ease-in-out;
}

.menuTab {
    /* this is the tab that appears at the top left of the page */
    position: relative;
    font-size: 2rem;
    font-weight: bold;
    padding: 1rem;
    width: 80px;
    margin: 0 auto;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    border-radius: 0 0 1rem 1rem;
    color: var(--buttonTextColor);
    background-color: var(--buttonColor);
    transition: color 150ms 0ms ease-in-out;
    span {
            display: block;
            transition: transform 150ms 0ms ease-in-out;
        }
    &:hover {
        color: var(--brightRed);
        cursor: pointer;
    }
    &.active {
        span {
            color: var(--headingHoverColorLink);
            transform: rotate(180deg);
        }
    }
}

.menu {
    /*this is the actual menu */
    position: relative;
    text-align: left;
    display: none;
    background-color: var(--buttonColor);
    width: 100%;
    .current-menu-item {
        a:after {margin-left: 1rem; content: '•';}
        .sub-menu a:after {content: '';}
        border-radius: 1rem;
        padding-left: 1rem;
    }
}

.menuItems {
    padding: 1rem;
    a {
        color: var(--buttonTextColor);
        transition: color 150ms 0ms ease-in-out;
        &:hover {
            color: var(--headingHoverColorLink);
            cursor: pointer;
        }
    }
    ul {
        padding: 0;
        margin: 0;
    }
    li {
        list-style: none;
        padding: .5rem 0;
        transition: margin 150ms 0ms ease-in-out;
        &:hover {margin: 0 0 0 1rem;}
    }
}

                /* side bar widget carousel */

.sideBarWrapper {
    overflow: hidden;
    display: inline-flex;
    position: fixed;
    top: 0;
    left: -500px;
    height: auto;
    width: 70%;
    max-width: 500px;
    /* the wrapper can be full viewport width */
    transition: left 500ms 10ms ease-in-out;
    z-index: 99; /* higher than all elements, but below loading screen */
    translate: -10vw; /* this is frame 0 for the animation */
    animation: 1s ease-in-out 800ms 1 forwards slideRightMenu;
}

.sideBarTab {
    /* this is the tab that appears at the left of the page */
    position: relative;
    top: 50vh;
    font-size: 2rem;
    font-weight: bold;
    align-content: space-around;
    height: 80px;
    width: 50px;
    padding: 1rem .5rem;
    margin: 0;
    border-radius: 0 1rem 1rem 0;
    background-color: var(--buttonColor);
    color: var(--buttonTextColor);
    transition: color 150ms 0ms ease-in-out;
    /* for transitioning the text */
    span {
        display: block;
        transition: transform 150ms 0ms ease-in-out;
    }
    &:hover {
        color: var(--brightRed);
        cursor: pointer;
    }
    &.active {
        span {
            transform: rotate(180deg);
        }
    }
}

.sideBar {
    /*the actual side bar */
    background-color: var(--buttonColor);
    padding: 1rem;
    margin: 0;
    min-height: 525px;
    overflow: auto;
    border-right: .3rem solid var(--buttonColor);
    color: var(--buttonTextColor);
    h1,h2,h3,h4,h5 {color: var(--buttonTextColor);}
    scrollbar-color: var(--sideBarScrollBarColor) transparent;
    scrollbar-width: thin;
    scrollbar-gutter: stable both-edges;
    /* don't dip below this height */
    height: 100vh;
    max-width: 450px;
    z-index: 1;

    div {margin: 1rem auto;}
    a {color: var(--brightRed);}
    #wp-calendar {
        text-align: center;
        width: 80%;
        margin: auto;
    caption, th {font-weight: bold;}
    }
    .search {
        /* styling for the search bar on the homepage */
        display: inline-flex;
        justify-content: space-around;
        input[type=text] {
            background-color: var(--darkRed);
            color: var(--gold);
            width: 75%;
            border-color: transparent;
            transition: background-color 150ms 0s ease-in-out;
            &::placeholder {color: var(--gold);}
            &:focus {
                width: 75%;
                border-color: transparent;
                background-color: var(--darkGrey);
            }
        }
        button {
            background-color: var(--darkRed);
            transition: background-color 150ms 0s ease-in-out;
            &:hover {background-color: var(--buttonHoverColor);}
        }
    }

    button {
        font-size: 1.7rem;
        font-weight: bold;
        width: 3.2rem;
        aspect-ratio: 1;
        border-radius: 100%;
        margin: 0 .5rem;
        background-color: var(--black);
        color: var(--buttonTextColor);
        transition: background-color 150ms 0s ease-in-out;
        &:hover {background-color: var(--darkRed);}
    }

    nav {
        margin: auto;
        text-align: center;
        li {list-style: none; display: inline-block; padding: 0 .2rem;}
        button {a {color: var(--gold); &:hover{color: var(--gold);}}}
    }
}

.sideBarProfileWrapper {
    /* wrapper for the profile image in the side bar */
    width: 70%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 100%;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
        transition: transform 200ms 0ms ease-in-out;
    }
    &:hover {
        img {transform: scale(1.2);}
    }
}

                /* gallery carousel on main page */

.carousel {
  /* gallery carousel on the main page */
    margin: .5rem auto 0;

    .carouselImages {
        /* position the center of the image into the frame */
        width: 100%;
        overflow: hidden;
        height: calc(450px - 10vh);
        border-radius: 1rem;
        img {
            object-fit: cover;
            width: 100%;
            display: block;
            height: calc(450px - 10vh);
            object-position: 0 50%;
            transition: transform 400ms 50ms ease-in-out;
            &:hover {
                transform: scale(1.1);
            }
        }
    }

}



                /* website build */
.wrapper {
  /* this is the wrapper keeping the website organized */
  background-color: var(--contentColor);
  width: 50%;
  overflow-x: hidden;
  min-height: 100vh;
  height: auto;
  margin: 0 auto;
  padding: .5rem;
  outline: .5rem solid var(--contentColor);
  outline-offset: .5rem;
  opacity: 0; /* this is frame 0 for the animation */
  animation: 500ms ease-in-out 1000ms 1 forwards openPage;
  
  /* page specific wrappers */
  &.galleryPage {width: 75%;}
}

.page {
    /*wrapper to neaten up content placement */
    padding: 1rem;
    .column {padding: .2rem;}
} 

.updateWrapper {
    padding: 1rem 2rem 0;
    margin: auto;
    overflow-x: hidden;
}

.row {
  /* general row build */
  width: 100%;
  display: inline-flex;
  margin: 1rem auto;

}


.column {
  /* generic column */
  flex-direction: row;
}
.gen {width: 50%;}

.userSorting {
/* for the tag system on homepage*/
    display: flex;
    flex-direction: column;
}

.pageTitle {
    width: 100%;
    margin: 0;
    padding: .5rem 2rem;
    font-weight: bold;
    color: var(--headingColor);
}

.toggleCarousel {
    /* for nesting the toggles in a similar position */
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 0 1rem;
    text-align: right;
    button {
        font-size: 1.5rem;
        width: 3.5rem;
        aspect-ratio: 1;
        border-radius: 100%;
        margin: 0 .5rem;
        background-color: var(--buttonColor);
        color: var(--buttonTextColor);
        transition: color 150ms 0s ease-in-out;
        &:hover {
            color: var(--brightRed);
        }
    }
}

                /* dark / light mode toggle */
.modeToggle {
    /* toggle switch for dark / light mode */
    position: relative;
    bottom: -10vh;
    display: inline-block;
    animation: 1s ease-in-out 1000ms 1 forwards slideUpToggle;
}

                /* scroll to top toggle */
.scrollToggle {
    position: relative;
    bottom: -10vh;
    display: inline-block;
    transition: bottom 1s 0ms ease-in-out; 
}

            /* homepage */

.updateEntry {
    width: 100%;
    display: inline-flex;
    margin: .5rem 0;
    align-items: center;
    flex-direction: row;
    translate: -100vw;
    animation: 1s ease-in-out 1000ms 1 forwards slideInLeft;
    /* alternate the way the updates are posted */
    &:nth-of-type(odd) {
        .column {
            &.right {text-align: right;}
        }
    }
    &:nth-of-type(even){
        flex-direction: row-reverse;
        translate: 100vw;
        animation: 1s ease-in-out 1000ms 1 forwards slideInRight;
        .column {
            &.left {.updateImage {float: right;}}
        }
    }
    .column {
        padding: 1rem 2rem;
        &.right {width: 60%; align-content: space-around;}
        &.left {width: 40%;}
    }
}

.dateLine {
    font-size: .99rem;
    margin-top: 0;
    margin-bottom: 0;
}
    
.titleLine {
    margin-bottom: 0;
    padding-bottom: 0;
}

#article {
    h1{font-size: 3rem;}
    .updateImage {
        width: 75%;
        max-width: 525px;
        margin: auto;
        &:hover {cursor: grab;}
    }

}


.updateImage {
    /*wrapper for update images*/
    overflow: hidden;
    aspect-ratio: 1;
    width: 13rem;
    border-radius: 2rem;
    transition: border-radius 400ms 50ms ease-in-out;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
        transition: transform 200ms 0ms ease-in-out;
    }
    &:hover {
        border-radius: 100%;
        img {transform: scale(1.2);}
    }
}

.readMore {
    /* the button underneath post highlight text */
    background-color: var(--buttonColor);
    width: 50%;
    margin: auto;
    font-weight: bold;
    text-transform: lowercase;
    color: var(--buttonTextColor);
    transition: all 300ms 0ms ease-in-out;
    &:hover {
        width: 75%;
        background-color: var(--buttonHoverColor);
    }
}

.footer {
    background-color: transparent;
    display: flex;
    position: relative;
    bottom: 0;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin: 1rem auto 0;
    padding: 1rem 1rem 3rem;
    font-size: 0.99rem;
    text-transform: lowercase;
    .column {
        display: flex;
        justify-content: center;
        &.right {
            justify-content: right;
            text-align: right;
        }
    }
    img {
        width: 70%;
        max-width: 300px;
        height: auto;
        filter: drop-shadow(0 0.3rem var(--logoDropshadow)) invert(0%);
        transition: all 300ms 50ms ease-in-out;
        &:hover {transform: scale(.9); filter: drop-shadow(0 0.3rem var(--logoDropshadow)) invert(90%);}
    }
}


            /* gallery and comic chapter listing */

    /* masonry.js css */
.illustGallery {margin: 2rem auto; text-align: center;}
.galleryGridSizer {width: 20%;}
.galleryGutterSizer {width: 0px;}

.galleryImgWrapper {overflow:hidden;}
.galleryImg {
    width: 20%;
    margin-bottom: 0;
    border-radius: 1rem;
    transition: all 200ms 50ms ease-in-out;
    &:hover {transform: scale(.9);}
}

    /* image filters */

.galleryFilters {
    justify-content: center;
    button {
        padding: 1rem;
        &:hover {cursor: grab;}
        &.active { background-color: var(--red);}
    }
}
.nsfwImg, .spoilerImg { 
    display: none;
}

.nsfwImg, .spoilerImg { 
    filter: brightness(0.2);
    &:hover {filter: brightness(0.7);}
}

    /* page-specific classes */

.galleryPage{
    .row {
        display: inline-flex;
        flex-wrap: wrap;
    }
    img {border-radius: 1rem;}
    h1 {font-size: 3rem;}

    li {
    list-style: none;
    padding: .2em;
    button {
        width: 100%;
        min-height: 2rem;
        background-color: var(--buttonColor);
        color: var(--buttonTextColor);
        transition: background-color 150ms 0s ease-in-out;
        &:hover {
            background-color: var(--buttonHoverColor);
            color: var(--gold);
        }
    }
  }
}

            /* comic chapter listing */


.comicPage{
    &.wrapper {width: 70%;} /* set page wrapper in comic chapter pages */
    .row {
        display: inline-flex;
        flex-wrap: wrap;
    }
    img {border-radius: 1rem;}
    h1 {font-size: 3rem;}

    .column {
        padding: 0;
        width: 50%;
    }
    .chapterTitlePage {
        min-height: 525px;
        max-height: 700px;
        text-align: center;
        img {max-width: 525px;}
    }

    .chapterPageContainer {
        scrollbar-gutter: stable both-edges;
        border: .5rem transparent solid;
        max-height: 525px;
        overflow-y: auto;
        text-align: center;
        img {width: 25%; filter: brightness(0.1); transition: filter 200ms 0s ease-in-out;}
        img:hover {filter:brightness(0.7);}

        
    }

    .comicRightColumn {padding: 1rem;}

    .comicNavigation {
        margin: .5rem auto;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        button {
            flex: auto;
            width: 30%;
            text-transform: lowercase;
            font-weight: bold;
            padding: .7rem 0;
            margin: .5rem;
            background-color: var(--paginationButtonColor);
            color: var(--paginationButtonTextColor);
            transition: background-color 150ms 0s ease-in-out;
            &:hover {background-color: var(--paginationButtonHoverColor);}
        }
    }
}

                /* comic chapters page */
.comicGallery {margin: 0 auto; text-align: center;}
.comicGridSizer {width: 25%;}
.comicGutterSizer {width: 0;}
.comicWrapper {display:inline-block;}
.comicImg {
    width: 25%;
    margin-bottom: .5rem;
    border-radius: 1rem;
    img {
        width: 90%;
        height: auto;
        transition: transform 200ms 50ms ease-in-out;
        &:hover {transform: scale(.9);}
    }
}

.comicButton {
    width: 90%;
    display: block;
    text-transform: lowercase;
    font-weight: bold;
    padding: .7rem 2rem;
    background-color: var(--buttonColor);
    color: var(--buttonTextColor);
    margin: .5rem auto;
    transition: background-color 150ms 0s ease-in-out;
    &:hover {background-color: var(--buttonHoverColor)};
}

.langNav {
    .current-menu-item {
        button{
        background-color: var(--darkRed); 
        color: var(--gold);
        }
        button:hover {color: var(--gold);}
    }
}

                /* textbox and form styling */

input, textarea, select, option,
input[type=text]
 {
    background-color: var(--buttonColor);
    border: .2rem solid var(--buttonColor);
    border-radius: 1rem;
    font-size: 1rem;
    color: var(--buttonTextColor);
    padding: .7rem;
    margin: .5rem 0;
    transition: all 150ms ease-in-out;
    &:focus {
        background-color: var(--buttonHoverColor);
        border: .2rem solid var(--buttonHoverColor);
        color: var(--lightGrey);
        outline: 0;
    }
    &::placeholder {color: var(--buttonTextColorHover)}
}


form {
    width: 100%;
    button {
        text-transform: lowercase;
        font-weight: bold;
        padding: .7rem 1rem;
        aspect-ratio: 1;
        background-color: var(--buttonColor);
        color: var(--buttonTextColor);
        transition: background-color 150ms 0s ease-in-out;
        margin: .5rem;
        &:hover {
            cursor: grab;
            color: var(--gold);
            background-color: var(--paginationButtonColor);
        }
    }
}

.search {
/* styling for the search bar on the homepage */
    display: inline-flex;
    input[type=text] {
        width: 50%;
        transition: width 650ms 0s ease-in-out;
        &:focus {
            &::placeholder {color: var(--gold);}
           width: 100%; 
        }
    }
}

                /* tag carousel */

.tagCarouselToggle {
    display: block;
    width: 100%;
    margin: .5rem auto;
    padding: .6rem;
    border: .3rem solid transparent;
    background-color: var(--buttonColor);
    color: var(--buttonTextColor);
    transition: background-color 200ms 0s ease-in-out;
    &:hover, &.active {
        cursor: grab;
        color: var(--gold);
        background-color: var(--paginationButtonColor);
    }
}

.tagCarousel {
    display: none;
    width: 100%;
    padding: .5rem;
    text-align: center;
    button {
        padding: 1rem;
        background-color: var(--buttonColor);
        color: var(--buttonTextColor);
        &:hover, &:active {
            cursor: grab;
            color: var(--gold);
            background-color: var(--buttonHoverColor);
        }
        a, a:hover, a:active {color: inherit;}
    }
    
    ul{margin: 0; padding: 0;}
    li {
    display: inline-flex;
    list-style: none;
    padding: .2em;
    }
}

.paginationCradle {
  width: 100%;
  margin: 1rem auto;
  display: inline-block;
  font-weight: bold;
  text-align: center;
  ul{margin: 0; padding: 0;}

  li {
    list-style: none;
    display: inline-block;
    padding: .2em;
    button {
        height: 2.2rem;
        aspect-ratio: 1;
        background-color: var(--paginationButtonColor);
        color: var(--paginationButtonTextColor);
        transition: background-color 150ms 0s ease-in-out;
        &:hover{
            background-color: var(--paginationButtonHoverColor);
            color: var(--gold);
            
        }
    }
  }
  span.current {button {background-color: var(--grey);}}
  .prevnext {background-color: var(--buttonColor); &:hover {background-color: var(--paginationButtonColor)}}
}

                /* comments section */
#comments {
    img {height: auto; width: auto;}
    cite {
        .url {
            font-size: 1.5rem;
            text-transform: uppercase;
            font-style: normal;
            font-weight: bold;
            font-family: var(--bebasNeueFont);
        }
    }
    .comment-meta, .reply {
        font-size: 0.99rem;
    }
    .comment {padding: 1rem 1rem 0 1rem;  margin: 1rem 0;}
    .depth-2{padding: 1rem 1rem 0 1rem; margin: 1rem 0 1rem 2.5rem; border-left: double .5rem var(--bodyLinkColor);}
    .depth-3{margin: 1rem 0 1rem 4.5rem; border-left: double .5rem var(--bodyLinkColor);}
}

#respond {
    form {
        textarea, input[type=text] {
            font-family: var(--cabinFont);
            width: 100%;}
    }
    .form-submit {text-align:center;}

    input[type=submit] {
    background-color: var(--buttonColor);
    width: 50%;
    text-align: center;
    margin: auto;
    font-size: 1rem;
    font-weight: bold;
    text-transform: lowercase;
    border-color: transparent;
    color: var(--buttonTextColor);
    transition: all 300ms 0ms ease-in-out;
    &:hover {
        cursor: grab;
        width: 75%;
        background-color: var(--buttonHoverColor);
    }
}
}


                /* tag cloud */
.wp-tag-cloud {
    li {
        padding: .6rem;
        background-color: var(--buttonColor);
        color: var(--buttonTextColor);
        transition: color 150ms 0s ease-in-out;
        list-style: none;
        margin: .5rem auto;
        font-weight: bold;
        font-size: 1.1rem;
        text-align: center;
        border: 0;
        border-radius: 10px;
        transition: background-color 150ms 0s ease-in-out;
        &:hover, &:active {
            cursor: grab;
            color: var(--gold);
            background-color: var(--paginationButtonColor);
        }
        a, a:hover, a:active {color: inherit; cursor: inherit;}
    }
}

                /* styling for modal */
.modalOverlay {
    background-color: rgba(0,0,0,0.5);
    width: 100vw;
    height: 100vh;
    z-index: 1001; /* higher than loading BG */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    margin: auto;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: space-around;
    justify-content: center;
}

.modalContainer {
    display: block;
    min-width: 500px;
    width: 40%;
    max-width: 600px;
    margin: auto;
    border: var(--gold) .2rem solid;
    outline: var(--gold) .2rem solid;
    outline-offset: .5rem;
    a {color: var(--gold); &:hover {color: var(--brightRed);}}
    button {
        font-size: 1.7rem;
        font-weight: bold;
        width: 3rem;
        aspect-ratio: 1;
        border-radius: 100%;
        margin: 0 .5rem;
        background-color: var(--black);
        color: var(--buttonTextColor);
        transition: background-color 150ms 0s ease-in-out;
        &:hover {background-color: var(--darkRed);}
    }
    .row {
        display: inline-flex;
        margin: 0;
        justify-content: flex-end;
    }
}

                /* for slow loading */
.js-loading {
      animation-play-state: paused !important;
}