@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

/* +-----------+ */
/* | CSS RESET | */
/* +-----------+ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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


/* +---------------+ */
/* | CSS VARIABLES | */
/* +---------------+ */
:root {
    /* Default Navigation Styles */
    --STUDIO-BLUE-LITE: #2953a7;
    --STUDIO-BLUE-DARK: #0b2049;
    --NAV-COLOR-01: #000;
    --NAV-COLOR-02: #333;
    --MAIN-BGCOLOR-01: #fff;
    --MAIN-BGCOLOR-02: #fff;
    --MAIN-TEXT-COLOR: #000;
    --MAIN-LINK-DEFAULT: #2953a7;
    --MAIN-LINK-HOVER: #0b2049;
    --MAIN-LINK-ACTIVE: firebrick;
    --BACK-TO-TOP-BTN: #fff;
    --BACK-TO-TOP-TEXT: #2953a7;
    --UP-ARROW-01: #2953a7;
    --UP-ARROW-02: #0b2049;

    /* Original Series Styles */
    --ICON-HOVER-BORDER: none;
    --HR-BORDER-COLOR: #2953a7;
    --STORY-CARD-BG: #000;
    --STORY-CARD-GRAD: linear-gradient(to bottom, #000, #000, #444);
    --STORY-IMG-BORDER: 2px solid #000;
    --BUY-BTN-HOVER-BGCOLOR: limegreen;
    --BUY-BTN-HOVER-BGIMAGE: linear-gradient(to bottom, limegreen, green);
    --BUY-BTN-HOVER-TEXT: #fff;
    --SERIES-SELECT-TEXT-COLOR: #fff;
    --SERIES-SELECT-BG-COLOR: #000;
    --SERIES-SELECT-TEXT-HOVER: rgb(252, 230, 108);
    --SERIES-SELECT-BG-HOVER: #2953a7;

    /* About Page */
    --BIO-BORDER-COLOR: #000;
    --BIO-CAPTION-BGCOLOR: #000;;
    --BIO-CAPTION-IMAGE: linear-gradient(to bottom, #000, #000);
    --BIO-CAPTION-TEXT: #fff;
    --BIO-TABLE-BORDER: #000;
    --BIO-THEAD-BGBOLOR: #2953a7;
    --BIO-THEAD-IMAGE: linear-gradient(to left, #2953a7, #0b2049);
    --BIO-THEAD-TEXT: #fff;
    --BIO-TD-BGCOLOR: #fff;
    --BIO-TD-IMAGE: linear-gradient(to left, #fff, #fff);
    --BIO-TD-TEXT: #000;
    --ASIDE-BODY-COLOR: #2953a7;
    --ASIDE-BODY-IMAGE: linear-gradient(to left, #2953a7, #0b2049);
    --ASIDE-TEXT: #fff;
    --ABOUT-STUDIO-BGCOLOR: #2953a7;
    --ABOUT-STUDIO-IMAGE: linear-gradient(to bottom, #2953a7, #0b2049);
    --ABOUT-STUDIO-TEXT: #fff;

    /* Essay Directory Page */
    --ESSAY-TITLE-BGCOLOR: #2953a7;
    --ESSAY-TITLE-IMAGE: linear-gradient(to bottom, #2953a7, #0b2049);
    --ESSAY-TITLE-TEXT: #fff;
    --ESSAY-ENTRY-BGCOLOR: #fff;
    --ESSAY-ENTRY-BORDER: grey;
    --ESSAY-ENTRY-HOVER: #fff2c6;
    --ESSAY-ENTRY-TITLE-TEXT: #000;
    --ESSAY-ENTRY-DETAILS-TEXT: #2953a7;
    --ESSAY-CREDITS-BGCOLOR: #2953a7;
    --ESSAY-CREDITS-IMAGE: linear-gradient(to top, #2953a7, #0b2049);
    --ESSAY-CREDITS-TEXT: #fff;

    /* Manga Directory Page */
    --MANGA-ENTRY-BORDER: #000;
    --MANGA-TEXT-BGCOLOR: #000;
    --MANGA-TEXT-BGIMAGE: linear-gradient(to bottom, #000, #333);
    --MANGA-TEXT-COLOR: #fff;

    /* Reading Progress Bar */
    --PROGRESS-BAR-COLOR: #02fee4;
    --PROGRESS-BAR-IMAGE: linear-gradient(to right, #02fee4, #25c4f8);

    /* Essay Entries */
    --ESSAY-NAV-BTN-BGCOLOR: #2953a7;
    --ESSAY-NAV-BTN-IMAGE: radial-gradient(#2953a7, #0b2049);
    --ESSAY-NAV-BTN-TEXT: #fff;
    --ESSAY-NAV-BTN-BG-HOVER: radial-gradient(white, gold);
    --ESSAY-NAV-BTN-TEXT-HOVER: #000;
    --DOWNLOAD-TEXT: #000;
    --DOWNLOAD-ICON-BGCOLOR: #2953a7;
    --DOWNLOAD-ICON-IMAGE: radial-gradient(#2953a7, #0b2049);
    --DOWNLOAD-ICON-VECTOR: #fff;
    --DOWNLOAD-ICON-BG-HOVER: radial-gradient(white, gold);
    --DOWNLOAD-ICON-VECTOR-HOVER: #000;
    --ESSAY-CONTENT-TITLE-BGCOLOR: #000;
    --ESSAY-CONTENT-TITLE-IMAGE: linear-gradient(to top, #0c2555, #000);
    --ESSAY-CONTENT-BODY-COLOR: #000;
}

.darkmode {
    /* Default Navigation Styles */
    --STUDIO-BLUE-LITE: #000;
    --STUDIO-BLUE-DARK: #333;
    --NAV-COLOR-01: #000;
    --NAV-COLOR-02: #000;
    --MAIN-BGCOLOR-01: #3a435d;
    --MAIN-BGCOLOR-02: #000;
    --MAIN-TEXT-COLOR: #fff;
    --MAIN-LINK-DEFAULT: gold;
    --MAIN-LINK-HOVER: red;
    --MAIN-LINK-ACTIVE: #9bcdff;
    --BACK-TO-TOP-BTN: #3a435d;
    --BACK-TO-TOP-TEXT: #fff;
    --UP-ARROW-01: #3a435d;
    --UP-ARROW-02: #3a435d;
    
    /* Original Series Styles */
    --ICON-HOVER-BORDER: 3px solid rgba(255, 231, 93, 1);
    --HR-BORDER-COLOR: #fff;
    --STORY-CARD-BG: red;
    --STORY-CARD-GRAD: linear-gradient(to bottom, rgb(211, 3, 3), rgb(211, 3, 3), rgb(134, 2, 2));
    --STORY-IMG-BORDER: 2px solid rgb(211, 3, 3);
    --BUY-BTN-HOVER-BGCOLOR: rgb(255, 231, 93);
    --BUY-BTN-HOVER-BGIMAGE: radial-gradient(white, rgb(255, 231, 93));
    --BUY-BTN-HOVER-TEXT: #000;
    --SERIES-SELECT-TEXT-COLOR: #fff;
    --SERIES-SELECT-BG-COLOR: rgb(202, 19, 19);
    --SERIES-SELECT-TEXT-HOVER: rgb(252, 230, 108);
    --SERIES-SELECT-BG-HOVER: rgb(131,68, 194);

    /* About Page */
    --BIO-BORDER-COLOR: #000;
    --BIO-CAPTION-BGCOLOR: #000;;
    --BIO-CAPTION-IMAGE: linear-gradient(to bottom, #0b2049, #000);
    --BIO-CAPTION-TEXT: #fff;
    --BIO-TABLE-BORDER: #000;
    --BIO-THEAD-BGBOLOR: #2953a7;
    --BIO-THEAD-IMAGE: linear-gradient(to left, #3a435d, #1c202c);
    --BIO-THEAD-TEXT: #fff;
    --BIO-TD-BGCOLOR: grey;
    --BIO-TD-IMAGE: linear-gradient(to right, rgb(104, 104, 104), rgb(66, 66, 66));
    --BIO-TD-TEXT: #fff;
    --ASIDE-BODY-COLOR: #fff;
    --ASIDE-BODY-IMAGE: linear-gradient(to bottom, #fff, rgb(176, 185, 192));
    --ASIDE-TEXT: #1c202c;
    --ABOUT-STUDIO-BGCOLOR: #000;
    --ABOUT-STUDIO-IMAGE: linear-gradient(to right, #000, #444);
    --ABOUT-STUDIO-TEXT: #fff;

    /* Essay Directory Page */
    --ESSAY-TITLE-BGCOLOR: #2953a7;
    --ESSAY-TITLE-IMAGE: linear-gradient(to top, #0c2555, #000);
    --ESSAY-TITLE-TEXT: #fff;
    --ESSAY-ENTRY-BGCOLOR: #1c202c;
    --ESSAY-ENTRY-BORDER: #555;
    --ESSAY-ENTRY-HOVER: #3a435d;
    --ESSAY-ENTRY-TITLE-TEXT: #f0f0f0;
    --ESSAY-ENTRY-DETAILS-TEXT: #fde473;
    --ESSAY-CREDITS-BGCOLOR: #2953a7;
    --ESSAY-CREDITS-IMAGE: linear-gradient(to top, #0c2555, #000);
    --ESSAY-CREDITS-TEXT: #fff;

    /* Manga Directory Page */
    --MANGA-ENTRY-BORDER: #0c2555;
    --MANGA-TEXT-BGCOLOR: #fff;
    --MANGA-TEXT-BGIMAGE: linear-gradient(to top, #0c2555, #000);
    --MANGA-TEXT-COLOR: #fff;

    /* Reading Progress Bar */
    --PROGRESS-BAR-COLOR: #c04dff;
    --PROGRESS-BAR-IMAGE: linear-gradient(to left, #c04fdd, #ff00aa);

    /* Essay Entries */
    --ESSAY-NAV-BTN-BGCOLOR: #3a435d;
    --ESSAY-NAV-BTN-IMAGE: radial-gradient(#3a435d, #3a435d);
    --ESSAY-NAV-BTN-TEXT: #fff;
    --ESSAY-NAV-BTN-BG-HOVER: radial-gradient(white, gold);
    --ESSAY-NAV-BTN-TEXT-HOVER: #000;
    --DOWNLOAD-TEXT: #fff;
    --DOWNLOAD-ICON-BGCOLOR: #fff;
    --DOWNLOAD-ICON-IMAGE: radial-gradient(#fff);
    --DOWNLOAD-ICON-VECTOR: #3a435d;
    --DOWNLOAD-ICON-BG-HOVER: radial-gradient(white, gold);
    --DOWNLOAD-ICON-VECTOR-HOVER: #000;
    --ESSAY-CONTENT-TITLE-BGCOLOR: #000;
    --ESSAY-CONTENT-TITLE-IMAGE: linear-gradient(to bottom, #0c2555, #000);
    --ESSAY-CONTENT-BODY-COLOR: #fff;
}


/* +-----------------+ */
/* | UTILITY CLASSES | */
/* +-----------------+ */
.offscreen {
    position: absolute;
    left: -10000px;
}

.gold-borders {
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    border-image: radial-gradient(white, white, gold, brown);
    border-image-slice: 1;
    width: 100%;
}

.nowrap {white-space: nowrap;}

.center {margin: 0 auto;}

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

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

.quote-text-padding {
    padding-left: 45px;
    padding-right: 45px;
}

.underline {text-decoration: underline;}

.cross-out-text {text-decoration: line-through;}

.flex-centering {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.in-between {margin-top: 35px;}

.zoom {transition: transform .2s;}
.zoom:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 10px #333;
    border: var(--ICON-HOVER-BORDER);
}

.horizontal-ruler {
    width: 100%;
    border: 1px solid var(--HR-BORDER-COLOR);
    margin-top: 25px;
    margin-bottom: 25px;
}


/* +----------------+ */
/* | GENERAL STYLES | */
/* +----------------+ */
html {
    scroll-behavior: smooth;
    font-family: "Poppins", sans-serif;
}

body {min-height: 100vh;}


/* +-----------------------+ */
/* | HEADER SECTION STYLES | */
/* +-----------------------+ */
.header {
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 1px 4px 10px #000;
}

.header__title {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 1em 2.5%;
    background-color: var(--STUDIO-BLUE-LITE);
    background-image: linear-gradient(to right, var(--STUDIO-BLUE-LITE), var(--STUDIO-BLUE-DARK));
}

.header__h1 {color: #fff;}

.header__figure {
    background-color: #fff;
    padding: 15px;
    border-radius: 50%;
}

.header img {width: 75px;}


/* +---------------------------+ */
/* | NAVIGATION SECTION STYLES | */
/* +---------------------------+ */
.navbar {
    background-color: var(--NAV-COLOR-01);
    background-image: linear-gradient(to left, var(--NAV-COLOR-02), var(--NAV-COLOR-01), var(--NAV-COLOR-02));
}

.navbar__ul {
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
    padding: 0.35em 2.5%;
    font-size: 1.1rem;
    max-width: 1000px;
}

.navbar a:any-link {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

.navbar a:hover,
.navbar a:focus {
    color: #ffe553;
    text-decoration: underline;
}

.navbar a:active {color: #9bcdff;}


/* +---------------------+ */
/* | HERO SECTION STYLES | */
/* +---------------------+ */
.hero {position: relative;}

.hero__figure {
    position: relative;
    margin: 0;
}

.hero__figure img {
    width: 100%;
    height: auto;
    display: block;
}

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero__h2 {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    text-align: center;
    color: #fff;
    z-index: 2;
}


/* +---------------------+ */
/* | MAIN SECTION STYLES | */
/* +---------------------+ */
.main {
    padding: 25px 25px;
    background-color: var(--MAIN-BGCOLOR-01);
    background-image: linear-gradient(to bottom, var(--MAIN-BGCOLOR-01), var(--MAIN-BGCOLOR-02));
    color: #000;
}

.main__container {max-width: 1000px;}

.main__h2 {
    margin-top: 15px;
    margin-bottom: 5px;
    color: var(--MAIN-TEXT-COLOR);
}

.main__h3 {
    margin-top: 5px;
    margin-bottom: 5px;
    color: var(--MAIN-TEXT-COLOR);
}

.main__p {
    margin-bottom: 10px;
    word-spacing: 0.1rem;
    line-height: 1.7;
    color: var(--MAIN-TEXT-COLOR);
}

.main a:any-link {
    text-decoration: none;
    font-weight: bold;
    color: var(--MAIN-LINK-DEFAULT);
}

.main a:hover,
.main a:target {
    color: var(--MAIN-LINK-HOVER);
    text-decoration: underline;
}

.main a:active {
    color: var(--MAIN-LINK-ACTIVE);
}


/* +-----------------------+ */
/* | FOOTER SECTION STYLES | */
/* +-----------------------+ */
.footer {
    background-color: var(--STUDIO-BLUE-LITE);
    background-image: linear-gradient(to left, var(--STUDIO-BLUE-LITE), var(--STUDIO-BLUE-DARK));
    color: #fff;
}

.footer p {word-spacing: 0.1rem;}

.footer__container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
    padding: 25px;
}

.footer__social a {
    margin: 0 10px;
    color: #fff;
}

.footer__info {
    line-height: 1.8;
    font-size: 0.9rem;
}

.footer__ai-disclaimer {
    font-size: 0.8rem;
    max-width: 850px;
}

.footer__ai-disclaimer a:any-link,
.footer__ai-disclaimer a:visited {
    color: #fff;
}

.footer__ai-disclaimer a:hover,
.footer__ai-disclaimer a:focus {
    color: #ffe553;
    font-weight: bolder;
}

.footer__ai-disclaimer a:active {
    color: #9bcdff;
}

.fa-bluesky,
.fa-youtube,
.fa-tiktok,
.fa-instagram,
.fa-twitter {
    transition: transform .2s;
}

.fa-bluesky:hover,
.fa-youtube:hover,
.fa-tiktok:hover,
.fa-instagram:hover,
.fa-twitter:hover {
    transform: scale(1.4);
}

.footer__btn {
    display: inline-block;
    width: max-content;
    background-color: var(--BACK-TO-TOP-BTN);
    border-radius: 15px;
    padding: 10px 15px;
    color: var(--BACK-TO-TOP-TEXT);
    font-weight: bolder;
    text-decoration: none;
    box-shadow: 0 6px 5px -6px #000;
    margin-bottom: 10px;
}

.footer__btn:hover {
    background-color: gold;
    background-image: radial-gradient(white, gold);
    color: #000;
}


/* +----------------------+ */
/* | SCROLL TO TOP Button | */
/* +----------------------+ */
.scroll-to-top {
    border: none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 2rem;
    background-color: var(--UP-ARROW-01);
    background-image: radial-gradient(var(--UP-ARROW-01), var(--UP-ARROW-02));
    color: #fff;
    font-weight: bolder;
    box-shadow: 0 6px 5px -5px #000;
    z-index: 4;
}

.scroll-to-top:hover {
    background-color: gold;
    background-image: radial-gradient(white, gold);
    color: #000;
}


/* +--------------------------+ */
/* | LIGHT & DARK MODE TOGGLE | */
/* +--------------------------+ */
#theme-switch {
    z-index: 7;
    height: 50px;
    width: 50px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #e8e9ed;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 15px;
    right: 15px;
    box-shadow: 0 6px 5px -5px #000;
}

#theme-switch svg {
    fill: #3a435d;
}

#theme-switch svg:last-child {
    display: none;
}

.darkmode #theme-switch svg:first-child {
    display: none;
}

.darkmode #theme-switch svg:last-child {
    display: block;
}

#theme-switch:hover {
    background-color: gold;
    background-image: radial-gradient(white, gold);
}


/* +--------------------------------+ */
/* | MEDIA QUERIES | DEFAULT STYLES | */
/* +--------------------------------+ */
/* Screen Size: Tiny (300px) */
@media screen and (min-width: 300px) {
    .header__title {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }
    .header__h1 {
        font-size: 1.5rem;
    }
    .header img {
        width: 60px;
    }
    .navbar__ul a {
        font-size: 1rem;
    }
    .hero__h2 {
        font-size: 2rem;
    }
    .footer__info {
        font-size: 0.8rem;
    }

    .footer__ai-disclaimer {
        line-height: 1.8;
        font-size: 0.70rem;
    }
}

/* Screen Size: Small (576px) */
@media screen and (min-width: 576px) {
    .header__title {
        flex-direction: row-reverse;
        gap: 1.5rem;
    }
    .header__h1 {
        font-size: 2rem;
    }
    .navbar__ul a {
        font-size: 1.2rem;
    }
    .hero__h2 {
        font-size: 3rem;
    }
    .footer__info {
        font-size: 0.9rem;
    }
    .footer__ai-disclaimer {
        line-height: 1.5;
        font-size: 0.8rem;
    }
}

/* Screen Size: Medium (768px) */
@media screen and (min-width: 768px) {
    .header__h1 {
        font-size: 2rem;
    }
    .header img {
        width: 75px;
    }
    .navbar__ul a {
        font-size: 1.2rem;
    }
    .hero__h2 {
        font-size: 4rem;
    }
}

/* Screen Size: Large (992px) */
@media screen and (min-width: 992px) {
    .hero__h2 {
        font-size: 5rem;
    }
} 

/* Screen Size: X-Large (1200px) */
@media screen and (min-width: 1200px) {
    .hero__h2 {
        font-size: 7rem;
    }
    .hero__h2 {
        top: 35%;
        left: 50%;
    }
}

/* Screen Orientation: Landscape */
@media screen and (max-height: 450px) and (min-aspect-ratio: 7/4) {
    .header__h1 {
        font-size: 1.5rem;
    }
    .header img {
        width: 50px;
    }
    .header__figure {
    padding: 10px;
}
    .navbar__ul a {
        font-size: 1rem;
    }
    .hero__h2 {
        top: 25%;
        left: 50%;
    }
}



/* -------------------------------------- */
/* -------------------------------------- */
/* +------------------------------------+ */
/* |        PAGE-SPECIFIC STYLES        | */
/* +------------------------------------+ */
/* -------------------------------------- */
/* -------------------------------------- */


/* +-----------------------------------+ */
/* | SERIES SELECT STYLES / NAVIGATION | */
/* +-----------------------------------+ */
.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

.series-select-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    text-align: center;
}

.series-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.series-flex-container a:any-link {
    color: var(--SERIES-SELECT-TEXT-COLOR);
    text-decoration: none;
}

.series-link {
    background-color: var(--SERIES-SELECT-BG-COLOR);
    border: 4px solid var(--SERIES-SELECT-BG-COLOR);
    border-radius: 15px;
}

.series-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.series-content h3 {
    padding: 5px 0;
}

.series-content img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.series-flex-container a:hover,
.series-link:hover,
.series-flex-container a:focus,
.series-link:focus {
    color: var(--SERIES-SELECT-TEXT-HOVER);
    background-color: var(--SERIES-SELECT-BG-HOVER);
    border: 4px solid var(--SERIES-SELECT-BG-HOVER);
}

/* If width is >=901px, then 4 items per row */
.series-link {
    flex: 0 0 calc(25% - 15px);
}

/* If width is <= 900px, then 3 items per row */
@media (max-width: 900px) {
    .series-link {
        flex: 0 0 calc(33% - 15px);
    }
}

/* If width is <= 650px, then 2 items per row */
@media (max-width: 650px) {
    .series-link {
        flex: 0 0 calc(50% - 15px);
    }
    .series-content h3 {
        font-size: 0.75rem;
    }
}

 

/* +-------------------------------+ */
/* | MEDIA QUERIES | SERIES SELECT | */
/* +-------------------------------+ */
/* Screen Size: Tiny (300px) */
@media screen and (min-width: 300px) {
    .series-content h3 {
        font-size: 0.75rem;
    }
}

/* Screen Size: Small (576px) */
@media screen and (min-width: 576px) {
    .series-content h3 {
        font-size: 0.85rem;
    }
}

/* Screen Size: Medium (768px) */
@media screen and (min-width: 768px) {
    .series-content h3 {
        font-size: 0.9rem;
    }
}

/* Screen Size: Large (992px) */
@media screen and (min-width: 992px) {
    .series-content h3 {
        font-size: 1.1rem;
    }
} 

/* Screen Orientation: Landscape */
@media screen and (min-height: 300px) and (min-aspect-ratio: 7/4) {
    .series-link {
        flex: 0 0 calc(25% - 15px);
    }
    .series-content h3 {
        font-size: 0.8rem;
    }
    .anchor {
        top: -140px;
    }
}


/* +----------------------+ */
/* | STUDIO BLUE TEXT BOX | */
/* +----------------------+ */
.studio-blue-box {
    background-color: var(--ABOUT-STUDIO-BGCOLOR);
    background-image: var(--ABOUT-STUDIO-IMAGE);
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.studio-blue-box h2,
.studio-blue-box p {
    max-width: 1000px;
    color: var(--ABOUT-STUDIO-TEXT);
    margin-bottom: 10px;
}


/* +-------------------+ */
/* | ABOUT PAGE STYLES | */
/* +-------------------+ */
.author-figure {
    margin-top: 25px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.author-bio h2 {
    text-align: center;
}

.author-bio-table-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.author-bio-table {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 100%;
}

.author-bio-table,
.author-bio-table caption,
.author-bio-table tbody,
.author-bio-table th,
.author-bio-table td {
    border: 2px solid var(--BIO-BORDER-COLOR);
    border-collapse: collapse;
    padding: 5px 10px;
}

.author-bio-table caption {
    background-color: var(--BIO-CAPTION-BGCOLOR);
    background-image: var(--BIO-CAPTION-IMAGE);
    color: var(--BIO-CAPTION-TEXT);
    font-weight: bold;
    font-size: 1.2rem;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 2px solid var(--BIO-TABLE-BORDER);
    border-left: 2px solid var(--BIO-TABLE-BORDER);
    border-right: 2px solid var(--BIO-TABLE-BORDER);
}

.author-bio-table {
    border-left: var(--BIO-TABLE-BORDER);
    border-right: var(--BIO-TABLE-BORDER);
    border-bottom: var(--BIO-TABLE-BORDER);
}

.author-bio-table th {
    background-color: var(--BIO-THEAD-BGBOLOR);
    background-image: var(--BIO-THEAD-IMAGE);
    color: var(--BIO-THEAD-TEXT);
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
}

.author-bio-table td {
    background-color: var(--BIO-TD-BGCOLOR);
    background-image: var(--BIO-TD-IMAGE);
    color: var(--BIO-TD-TEXT);
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
}

.favorite-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.aside-container {
    background-color: var(--ASIDE-BODY-COLOR);
    background-image: var(--ASIDE-BODY-IMAGE);
    color: var(--ASIDE-TEXT);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 15px;
    width: 100%;
}

.aside-summary {
    color: var(--ASIDE-TEXT);
    font-weight: bolder;
}

.aside-detail {
    color: var(--ASIDE-TEXT);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    font-size: 0.95rem;
    line-height: 1.8;
    word-spacing: 0.1rem;
}

.favorite-title {
    margin-bottom: 15px;
    font-size: 1.5rem;
}


/* +----------------------------+ */
/* | MEDIA QUERIES | ABOUT PAGE | */
/* +----------------------------+ */
/* Screen Size: Tiny (300px) */
@media screen and (min-width: 300px) {
    .about-p {
        font-size: 0.85rem;
    }
    .author-bio-table th,
    .author-bio-table td {
        font-size: 0.8rem;
    }
    .aside-detail {
        font-size: 0.8rem;
    }
    .author-figure img {
        width: 100%;
    }
    .aside-container {
        width: 85%;
    }
}

/* Screen Size: Small (576px) */
@media screen and (min-width: 576px) {
    .about-p {
        font-size: 1rem;
    }
    .author-bio-table th,
    .author-bio-table td {
        font-size: 1rem;
    }
    .aside-detail {
        font-size: 1rem;
    }
    .author-bio-table {
        width: 85%;
    }
    .author-figure img {
        width: 90%;
    }
    .aside-container {
        width: 75%;
    }
}

/* Screen Size: Medium (768px) */
@media screen and (min-width: 768px) {
    .author-bio-table {
        width: 70%;
    }
    .author-figure img {
        width: 80%;
    }
    .aside-container {
        width: 55%;
    }
}

/* Screen Size: Large (992px) */
@media screen and (min-width: 992px) {
    .author-bio-table {
        width: 60%;
    }
    .author-figure img {
        width: 70%;
    }
} 

/* Screen Size: X-Large (1200px) */
@media screen and (min-width: 1200px) {
    .author-bio-table {
        width: 50%;
    }
    .author-figure img {
        width: 60%;
    }
}

/* Screen Orientation: Landscape */
@media screen and (max-height: 450px) and (min-aspect-ratio: 7/4) {
    .author-figure img {
        width: 50%;
    }
    .author-bio-table {
        width: 75%;
    }
    .author-bio-table th,
    .author-bio-table td {
        font-size: .9rem;
    }
}


/* +------------------------------+ */
/* | ESSAYS DIRECTORY PAGE STYLES | */
/* +------------------------------+ */
.essay__h2 {
    margin-bottom: 15px;
    font-size: 1.75rem;
    text-align: center;
}

.essay-list-section {
    margin-top: 35px;
    margin-bottom: 25px;
}

.essay-list-container {
    max-width: 800px;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

.essay-list-title {
    background-color: var(--ESSAY-TITLE-BGCOLOR);
    background-image: var(--ESSAY-TITLE-IMAGE);
    color: var(--ESSAY-TITLE-TEXT);
    text-align: center;
    font-weight: bolder;
    font-size: 1.35rem;
    padding: 12px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.essay-entry-selection {
    border: 1px solid var(--ESSAY-ENTRY-BORDER);
    background-color: var(--ESSAY-ENTRY-BGCOLOR);
    display: flex;
    gap: 1rem;
    align-items:center;
}

.essay-entry-selection:hover {
    background-color: var(--ESSAY-ENTRY-HOVER);
}

.essay-entry-image {
    width: 80px;
    border-right: 1px solid var(--ESSAY-ENTRY-BORDER);
}

.essay-entry-contents {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.essay-title-group {
    display: flex;
    flex-direction: row;
    gap: 0.65rem;
}

.essay-entry-title-01 {
    font-size: 1.1rem;
    color: var(--ESSAY-ENTRY-TITLE-TEXT);
}

.essay-entry-title-02 {
    font-size: 1.1rem;
    color: var(--ESSAY-ENTRY-TITLE-TEXT);
}

.essay-entry-details {
    font-size: 0.9rem;
    color: var(--ESSAY-ENTRY-DETAILS-TEXT);
}

.essay-list-credits {
    background-color: var(--ESSAY-CREDITS-BGCOLOR);
    background-image: var(--ESSAY-CREDITS-IMAGE);
    color: var(--ESSAY-CREDITS-TEXT);
    text-align: center;
    font-weight: bolder;
    font-size: 0.8rem;
    padding: 12px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}


/* +------------------------------------+ */
/* | MEDIA QUERIES  |  ESSAYS DIRECTORY | */
/* +------------------------------------+ */
/* Screen Size: Tiny (300px) */
@media screen and (min-width: 300px) {
    .essay__p {
        font-size: 0.85rem;
    }
    .essay-list-container {
        max-width: 600px;
    }
    .essay-list-title {
        font-size: 1rem;
    }
    .essay-entry-selection {
        gap: 0.6rem;
    }
    .essay-title-group {
        flex-direction: column;
        gap: 0rem;
    }
    .essay-entry-image {
        width: 90px;
    }
    .essay-entry-title-01 {
        font-size: 0.95rem;
    }
    .essay-entry-title-02 {
        font-size: 0.8rem;
    }
    .essay-entry-details {
        font-size: 0.7rem;
    }
    .essay-list-credits {
        font-size: 0.6rem;
    }
}

/* Screen Size: Small (576px) */
@media screen and (min-width: 576px) {
    .essay__p {
        font-size: 1rem;
    }
    .essay-list-title {
        font-size: 1.1rem;
    }
    .essay-entry-selection {
        gap: 0.85rem;
    }
    .essay-title-group {
        flex-direction: row;
        gap: .65rem;
    }
    .essay-entry-image {
        width: 85px;
    }
    .essay-entry-title-01 {
        font-size: 0.95rem;
    }
    .essay-entry-title-02 {
        font-size: 0.95rem;
    }
    .essay-entry-details {
        font-size: 0.8rem;
    }
    .essay-list-credits {
        font-size: 0.75rem;
    }
}

/* Screen Size: Medium (768px) */
@media screen and (min-width: 768px) {
    .essay-list-title {
        font-size: 1.35rem;
    }
    .essay-entry-selection {
        gap: 1rem;
    }
    .essay-title-group {
        flex-direction: row;
        gap: .65rem;
    }
    .essay-entry-image {
        width: 85px;
    }
    .essay-entry-title-01 {
        font-size: 1.1rem;
    }
    .essay-entry-title-02 {
        font-size: 1.1rem;
    }
    .essay-entry-details {
        font-size: 0.9rem;
    }
    .essay-list-credits {
        font-size: 0.8rem;
    }
}


/* +-------------------------------+ */
/* | MANGA SUBMISSIONS PAGE STYLES | */
/* +-------------------------------+ */
.manga-entry-group {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.manga-entry-group a:hover {
    text-decoration: none;
}

.manga-entry-container {
    /* border: 1px dashed red; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    border-radius: 5px;
}

.manga-entry-image {
    width: 200px;
    border: 1px solid var(--MANGA-ENTRY-BORDER);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.manga-entry-text {
    background-color: var(--MANGA-TEXT-BGCOLOR);
    background-image: var(--MANGA-TEXT-BGIMAGE);
    width: 100%;
    text-align: center;
    padding: 10px 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.manga-entry-title,
.manga-entry-details {
    font-size: 0.8rem;
    color: var(--MANGA-TEXT-COLOR);
}

.zoom-manga {transition: transform .2s;}

.zoom-manga:hover {
    transform: scale(1.03);
}

.manga__p {
    margin-top: 25px;
    margin-bottom: 15px;
    text-align: center;
}


/* +-----------------------------------+ */
/* | MEDIA QUERIES | MANGA SUBMISSIONS | */
/* +-----------------------------------+ */
/* Screen Size: Tiny (300px) */
@media screen and (min-width: 300px) {
    .manga-entry-group {
        gap: 1.5rem;
    }
    .manga-entry-image {
        width: 250px; 
    }
    .manga-entry-text {
        gap: 0.3rem;
    }
    .manga-entry-title,
    .manga-entry-details {
        font-size: 0.8rem;
    }
}

/* Screen Size: Tiny (400px) */
@media screen and (min-width: 400px) {
    .manga-entry-image {
        width: 300px; 
    }
    .manga-entry-text {
        gap: 0.5rem;
    }
    .manga-entry-title,
    .manga-entry-details {
        font-size: 0.85rem;
    }
}

/* Screen Size: Small (576px) */
@media screen and (min-width: 576px) {
    .manga-entry-group {
        gap: 1rem;
    }
    .manga-entry-image {
        width: 225px; 
    }
}

/* Screen Orientation: Landscape */
@media screen and (max-height: 450px) and (min-aspect-ratio: 7/4) {
    .manga-entry-image {
        width: 175px; 
    }
    .manga-entry-title,
    .manga-entry-details {
        font-size: 0.75rem;
    }
}


/* +-----------------------------------+ */
/* | FANTASY NOVEL LANDING PAGE STYLES | */
/* +-----------------------------------+ */
.story__card {
    background-color: var(--STORY-CARD-BG);
    background-image: var(--STORY-CARD-GRAD);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
}

.story__h2 {
    margin-top: 8px;
    margin-bottom: 8px;
    color: #fff;
}

.story__p {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 0 25px;
    color: #fff;
}

.story__img {
    border: var(--STORY-IMG-BORDER);
}

.icon-select-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

/* Book Preview Icons (row) */
.icon-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.icon-flex-item img {
    width: 100%;
    height: auto;
    display: block;
}

.buy-button {
    border: none;
    border-radius: 15px;
    padding: 20px 30px;
    font-size: 1.5rem;
    background-color: #2953a7;
    background-image: linear-gradient(to bottom, #2953a7, #0b2049);
    color: #fff;
    margin-top: 15px;
    margin-bottom: 10px;
}

.buy-button:hover,
.buy-button:focus {
    background-color: var(--BUY-BTN-HOVER-BGCOLOR);
    background-image: var(--BUY-BTN-HOVER-BGIMAGE);
    color: var(--BUY-BTN-HOVER-TEXT);
}

/* If width is >=901px, then 4 items per row */
.icon-flex-item {
    flex: 0 0 calc(25% - 15px);
}

/* If width is <= 900px, then 3 items per row */
@media (max-width: 900px) {
    .icon-flex-item {
        flex: 0 0 calc(33% - 15px);
    }
}

/* If width is <= 650px, then 2 items per row */
@media (max-width: 650px) {
    .icon-flex-item {
        flex: 0 0 calc(50% - 10px);
    }
}


/* +----------------------------------+ */
/* | MEDIA QUERIES  |  FANTASY NOVELS | */
/* +----------------------------------+ */
/* Screen Size: Tiny (300px) */
@media screen and (min-width: 300px) {
    .story__p {
        font-size: 0.85rem;
    }
}

/* Screen Size: Small (576px) */
@media screen and (min-width: 576px) {
    .story__p {
        font-size: 1rem;
    }
}

/* Screen Size: Medium (768px) */
@media screen and (min-width: 768px) {
    .story__card {
        width: 85%;
    }
}

/* Screen Size: Large (992px) */
@media screen and (min-width: 992px) {
    .story__card {
        width: 75%;
    }
    .story__p {
        margin-top: 25px;
        margin-bottom: 25px;
        padding: 0 30px;
    }
} 

/* Screen Size: X-Large (1200px) */
@media screen and (min-width: 1200px) {
    .story__card {
        width: 65%;
    }
}

/* Screen Orientation: Landscape */
@media screen and (max-height: 450px) and (min-aspect-ratio: 7/4) {
    .icon-flex-item {
        flex: 0 0 calc(25% - 15px);
    }
    .icon-flex-item img {
        width: 85%;
        height: auto;
        display: block;
    }
    .story__card {
        width: 65%;
    }
    .story__p {
        font-size: 0.85rem;
    }
}


/* +-----------------------------+ */
/* | READING PROGRESS BAR STYLES | */
/* +-----------------------------+ */
.progress-bar {
    --progress: 0;
    height: 6px;
    width: var(--progress);
    background-color: var(--PROGRESS-BAR-COLOR);
    background-image: var(--PROGRESS-BAR-IMAGE);
    position: absolute;
}


/* +--------------------------+ */
/* | ESSAY ENTRY | TITLE AREA | */
/* +--------------------------+ */
.essay-entry-title-area {
        text-align: center;
        display: flex;
        flex-direction: column;
}

.title-group {
    background-color: var(--ESSAY-CONTENT-TITLE-BGCOLOR);
    background-image: var(--ESSAY-CONTENT-TITLE-IMAGE);
    padding: 25px 15px;
    color: white;
}

.title-group h2 {
    margin-bottom: 5px;
}

.download-pfd {
    color: var(--DOWNLOAD-TEXT);
    text-align: center;
}

.fa-download {
    background-color: var(--DOWNLOAD-ICON-BGCOLOR);
    background-image: var(--DOWNLOAD-ICON-IMAGE);
    color: var(--DOWNLOAD-ICON-VECTOR);
    padding: 10px;
    border-radius: 10px; 
}

.fa-download:hover {
    background-image: var( --DOWNLOAD-ICON-BG-HOVER);
    color: var(--DOWNLOAD-ICON-VECTOR-HOVER);
    box-shadow: 0px 0px 10px #333;
}


/* +---------------------------------+ */
/* | ESSAY ENTRY | MAIN CONTENT AREA | */
/* +---------------------------------+ */
.disclaimer {
    text-align: center;
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 25px;
}

.essay-section {
    margin-bottom: 35px;
}

.essay-entry-h3 {
    margin-bottom: 5px;
    font-size: 1.5rem;
    word-spacing: 0.35rem;
}
.essay-entry-p {
    margin-bottom: 15px;
    word-spacing: 0.095rem;
    line-height: 1.65rem;
}

.end-credits {
    font-weight: bolder;
    font-size: 0.9rem;
    margin-bottom: 35px;
}

.end-credits p {
    padding-bottom: 5px;
    word-spacing: 0.095rem;
}

.essay-entry-content-area {
    color: var(--ESSAY-CONTENT-BODY-COLOR);
}

.essay-entry-ul {
    margin-left: 50px;
    margin-top: 25px;
    margin-bottom: 25px;
}


/* +--------------------------+ */
/* | ESSAY ENTRY | NAVIGATION | */
/* +--------------------------+ */
.essay-btn-menu {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.essay-btn-button {
    padding: 15px;
    font-size: 1.1rem;
    font-weight: bolder;
    border: none;
    border-radius: 15px;
    background-color: var(--ESSAY-NAV-BTN-BGCOLOR);
    background-image: var(--ESSAY-NAV-BTN-IMAGE);
    color: var(--ESSAY-NAV-BTN-TEXT);
}

.essay-btn-button:hover {
    background-image: var(--ESSAY-NAV-BTN-BG-HOVER);
    color: var(--ESSAY-NAV-BTN-TEXT-HOVER);
    box-shadow: 0px 0px 10px #333;
}



/* +-------------------------------+ */
/* | MEDIA QUERIES | ESSAY ENTRIES | */
/* +-------------------------------+ */
/* Screen Size: Tiny (300px) */
@media screen and (min-width: 300px) {
    .essay-entry-p {
        font-size: 0.85rem;
        line-height: 1.5rem;
        word-spacing: 0.095rem;
    }
    .essay-entry-ul li {
        font-size: 0.85rem;
        line-height: 1.5rem;
    }
}

/* Screen Size: Small (576px) */
@media screen and (min-width: 576px) {
    .essay-entry-p {
        font-size: 0.9rem;
        line-height: 1.65rem;
    }
    .essay-entry-ul li {
        font-size: 0.9rem;
        line-height: 1.65rem;
    }
    .essay-entry-ul {
        margin-left: 65px;
    }
}

/* Screen Size: Medium (768px) */
@media screen and (min-width: 768px) {
    .essay-entry-p {
        font-size: 1rem;
        line-height: 1.75rem;

    }
    .essay-entry-ul li {
        font-size: 1rem;
        line-height: 1.75rem;
    }
    .essay-entry-ul {
        margin-left: 80px;
    }
}


/* +----------------------------------------+ */
/* | MANGA ENTRY | HOW-TO-READ MANGA STYLES | */
/* +----------------------------------------+ */
.how-to-read-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background-color: #000;
    background-image: linear-gradient(to bottom, #0c2555, #000, #000);
}

.how-to-image {
    margin-top: 35px;
    max-width: 600px;
    border: 2px solid #fff;
}

.how-to-p {
    max-width: 1000px;
    padding: 0 25px;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.75;
}

.manga-entry-title-area {
        text-align: center;
        display: flex;
        flex-direction: column;
}

.title-group {
    background-color: #000;
    /* background-image: linear-gradient(to top, #0c2555, #000); */
    padding: 25px 15px;
    color: white;
}

.title-group h2 {
    margin-bottom: 5px;
    word-spacing: 0.1rem;
}


/* +---------------------------------------+ */
/* | MANGA ENTRY | MANGA PAGE CONTENT AREA | */
/* +---------------------------------------+ */
.manga-content-area {
    background-color: #333;
    background-image: linear-gradient(to left,);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.manga-page {
    width: 100%;
    margin-bottom: 25px;
}

.manga-end-area {
    background-color: #000;
    color: #fff;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.manga-end-text {
    font-size: 1rem;
    text-align: center;
    /* margin-bottom: 25px; */
    word-spacing: 0.095rem;
    line-height: 1.75;
    max-width: 600px;
}


/* +--------------------------+ */
/* | MANGA ENTRY | NAVIGATION | */
/* +--------------------------+ */
.manga-btn-menu {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.manga-btn-button {
    padding: 15px;
    font-size: 1.1rem;
    font-weight: bolder;
    border: none;
    border-radius: 15px;
    background-color: var(--ESSAY-NAV-BTN-BGCOLOR);
    background-image: var(--ESSAY-NAV-BTN-IMAGE);
    color: var(--ESSAY-NAV-BTN-TEXT);
}

.manga-btn-button:hover {
    background-image: var(--ESSAY-NAV-BTN-BG-HOVER);
    color: var(--ESSAY-NAV-BTN-TEXT-HOVER);
    box-shadow: 0px 0px 10px #333;
}



/* +----------------------------------+ */
/* | MEDIA QUERIES | MANGA ENTRY PAGE | */
/* +----------------------------------+ */
/* Screen Size: Tiny (300px) */
@media screen and (min-width: 300px) {
    .how-to-image {
        margin-top: 0px;
    }
    .how-to-p {
        font-size: 0.8rem;
    }
    .title-group h2 {
        font-size: 1rem;
    }
    .title-group p {
        font-size: 0.9rem;
    }
    .title-group {
        padding: 15px 15px;
    }
    .manga-page {
        width: 100%;
    }
    .manga-end-text {
        font-size: 0.75rem;
    }
}

/* Screen Size: Small (576px) */
@media screen and (min-width: 576px) {
    .how-to-image {
        margin-top: 0px;
    }
    .how-to-p {
        font-size: 0.8rem;
    }
    .title-group h2 {
        font-size: 1.25rem;
    }
    .title-group p {
        font-size: 0.9rem;
    }
    .title-group {
        padding: 15px 15px;
    }
    .manga-page {
        width: 550px;
    }
    .manga-end-text {
        font-size: 0.75rem;
    }
}

/* Screen Size: Medium (768px) */
@media screen and (min-width: 768px) {
    .how-to-image {
        margin-top: 25px;
    }
    .how-to-p {
        font-size: 1rem;
    }
    .title-group h2 {
        font-size: 1.5rem;
    }
    .title-group p {
        font-size: 1rem;
    }
    .title-group {
        padding: 25px 15px;
    }
    .manga-end-text {
        font-size: 1rem;
    }
}

/* Screen Orientation: Landscape */
@media screen and (max-height: 450px) and (min-aspect-ratio: 7/4) {
    .how-to-image {
        margin-top: 0px;
    }
    .manga-page {
        width: 400px;
    }
}



/* +--------------------------------------+ */
/* | BOOK RELEASE TABLE | AUTHORS NOTE 03 | */
/* +--------------------------------------+ */
.deorum-book-list-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.deorum-book-list-table {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.deorum-book-list-table,
.deorum-book-list-table caption,
.deorum-book-list-table thead,
.deorum-book-list-table tbody,
.deorum-book-list-table th,
.deorum-book-list-table td {
    border: 2px solid #000;
    border-collapse: collapse;
    padding: 5px 10px;
}

.deorum-book-list-table caption {
    background-color: #000;
    color: #fff;
    font-weight: bold;
}

.deorum-book-list-table thead {
    background-color: lightgray;
    color: #000;
}

.deorum-book-list-table td {
    background-color: #fff;
    color: #000;
    font-size: 0.9em;
}

.deorum-book-list-table .green {
    background-color: rgb(120, 235, 145);
}

.deorum-book-list-table .yellow {
    background-color: rgb(235, 252, 140);
}


/* +------------------------------------------+ */
/* | MEDIA QUERIES | BOOK RELEASE TABLE - AN3 | */
/* +------------------------------------------+ */
/* Screen Size: Tiny (300px) */
@media screen and (min-width: 300px) {
    .deorum-book-list-table,
    .deorum-book-list-table thead,
    .deorum-book-list-table tbody,
    .deorum-book-list-table th,
    .deorum-book-list-table td {
        font-size: 0.6rem;
    }
    .deorum-book-list-table caption {
        font-size: 0.8rem;
    }
}

/* Screen Size: Small (576px) */
@media screen and (min-width: 576px) {
    .deorum-book-list-table,
    .deorum-book-list-table thead,
    .deorum-book-list-table tbody,
    .deorum-book-list-table th,
    .deorum-book-list-table td {
        font-size: 0.85rem;
    }
    .deorum-book-list-table caption {
        font-size: 0.9rem;
    }
}

/* Screen Size: Medium (768px) */
@media screen and (min-width: 768px) {
    .deorum-book-list-table,
    .deorum-book-list-table caption,
    .deorum-book-list-table thead,
    .deorum-book-list-table tbody,
    .deorum-book-list-table th,
    .deorum-book-list-table td {
        font-size: 1rem;
    }
}

/* Screen Orientation: Landscape */
@media screen and (max-height: 450px) and (min-aspect-ratio: 7/4) {
    
}



/* +--------------------------------+ */
/* | YOSHI IMAGES | AUTHORS NOTE 05 | */
/* +--------------------------------+ */
.yoshi-image {
    margin-top: 25px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.yoshi-image img {
    border-radius: 15px;
}

/* +------------------------------------+ */
/* | MEDIA QUERIES | YOSHI IMAGES - AN5 | */
/* +------------------------------------+ */
/* Screen Size: Tiny (300px) */
@media screen and (min-width: 300px) {
    .yoshi-image img {
        width: 100%;
    }
}

/* Screen Size: Small (576px) */
@media screen and (min-width: 576px) {
    .yoshi-image img {
        width: 85%;
    }
}

/* Screen Size: Medium (768px) */
@media screen and (min-width: 768px) {
    .yoshi-image img {
        width: 75%;
    }
}

/* Screen Size: Large (992px) */
@media screen and (min-width: 992px) {
    .yoshi-image img {
        width: 65%;
    }
}

/* Screen Orientation: Landscape */
@media screen and (max-height: 450px) and (min-aspect-ratio: 7/4) {
    .yoshi-image img {
        width: 50%;
    }
}