:root {
    --bs-body-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
    --color-primary: #FE65CB;
    --color-secondary: #FECADA;
    --color-accent: #891688;
    --color-white: #ffffff;
    --color-dark: #000000;
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='rgba(254, 101, 203, 0.8)'/%3E%3C/svg%3E");
}

@font-face {
    font-family: 'Montserrat';
    src: url("fonts/Montserrat-VariableFont_wght-P_0Ra6F.ttf");
}

@font-face {
    font-family: 'Montserrat';
    src: url("fonts/Montserrat-Italic-VariableFont_wght-skXtakp.ttf");
    font-style: italic;
}

html, body {
    width: auto !important;
    overflow-x: hidden !important;
}

body {
    font-weight: 450;
}

body .lead {
    font-weight: 400;
}

h1, h2 {
    color: var(--color-primary);
}

h2 {
    font-weight: bold;
    /*font-size: 2.2rem;*/
    margin-bottom: 1rem;
}

h3 {
    color: var(--color-accent);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

h5 {
    color: var(--color-accent);
    font-weight: bold;
}

a {
    color: var(--color-accent);
}

.container {
    max-width: 1200px;
}

.main-content {
    padding-top: 2.5em;
    min-height: 65vh !important;
}

.nav-title {
    font-size: 1.5rem !important;
    font-weight: bold;
    text-align: left;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.site-header {
    background-color: var(--color-white);
    padding-bottom: 20px;
    padding-top: 20px;
    max-width: 1300px;
    border-bottom: 3px solid var(--color-secondary);
}

.site-footer {
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 3rem;
    background-color: var(--color-secondary);
}

h3.work-subtitle {
    margin-bottom: 2rem;
    font-style: italic;
}

.work-description b {
    color: var(--color-accent);
}

.lead b {
    color: var(--color-accent);
    font-weight: 500;
}

.work-description hr {
    color: var(--color-secondary);
    width: 75%;
    min-width: 350px;
    margin: 1.5rem auto;
    border-top-width: 3px;
}

hr.series-separator {
    color: var(--color-primary);
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

hr.separator {
    color: var(--color-primary);
    opacity: 0.8;
    width: 75%;
    min-width: 350px;
    margin: 0 auto;
    border-top-width: 3px;
}

.store-link-container, .stories-link-container {
    background-color: var(--color-secondary);
    border-radius: 25px;
    min-height: 200px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.stories-link-container {
    min-height: 100px;
    max-width: 850px;
}

.popular-works-container {
    background-color: var(--color-secondary);
}

.buy-btn {
    min-width: 300px !important;
    border-radius: 50rem;
    color: var(--color-white) !important;
    background-color: var(--color-accent) !important;
}

.buy-btn, .buy-btn:hover {
    color: var(--color-white);
    background-color: var(--color-accent);
}

.buy-btn:active, .buy-btn.active {
    color: var(--color-white) !important;
    background-color: var(--color-accent) !important;
    border: var(--bs-btn-border-width) solid var(--color-accent) !important;
}

.cover-img, .author-img {
    max-height: 700px !important;
}

.series-cover-img {
    max-height: 500px !important;
}

.series-container img {
    max-height: 250px !important;
}

.works-container img {
    max-height: 400px !important;
}

.works-container h1, .series-detail-container h1 {
    text-align: center;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 1.2rem;
    line-height: 3.5rem;
    text-decoration-thickness: 3px;
}

.popular-works-container .card-text a {
    font-weight: 650;
}

.popular-works-container .card-text blockquote {
    font-size: 1.2rem;
    color: var(--color-primary);
}

.series-container a:hover {
    text-decoration: none;
}

.footer-link a {
    color: var(--color-accent);
    text-decoration: none;
}
.footer-link a:hover {
    text-decoration: underline;
}

.author-icon {
    color: var(--color-secondary);
}

/* bootstrap overrides */
.navbar {
    --bs-navbar-toggler-border-color: rgba(254, 101, 203, 0.8);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28254, 101, 203, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-color: var(--color-accent);
    --bs-navbar-hover-color: var(--color-accent);
    --bs-navbar-active-color: var(--color-accent);
}

.pagination {
    --bs-pagination-border-width: 0px;
    --bs-pagination-disabled-bg: none;
    --bs-pagination-active-bg: var(--color-accent);
    --bs-pagination-focus-bg: var(--color-secondary);
    --bs-pagination-focus-color: var(--color-accent);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-color: var(--color-accent);
    --bs-pagination-hover-bg: var(--color-secondary);
    --bs-pagination-hover-color: var(--color-accent);
    --bs-pagination-padding-y: .5rem;
    --bs-pagination-padding-x: 1rem;
}

.nav-link.active {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    text-decoration-thickness: 2px;
}

.nav-link.active:hover {
    text-decoration-thickness: 2px;
}

.nav-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.5rem;
}

.dropdown-item:active, .dropdown-item.active {
    background-color: var(--color-accent);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--color-secondary);
    padding: 0.5rem;
}

.breadcrumb-item a {
    color: var(--color-accent);
}