/* LAYOUT.CSS 
 * Defines the general layout of most webpages.
 * Responsive grid, navbar styling, etc. */

/* RESPONSIVE GRID FOR MOBILE */
.left-sidebar-grid {
    display:grid;
    grid-template-areas:
        'header' /*Site Title*/
        'navbar' /* Main Site Navigation */
        'breadcrumbs' /* Fic Title, Breadcrumb Nav */
        'main-content' /* What it says on the tin */
        'left-sidebar' /* Fic Info and Navigation */
        'footer'
        'jumper'
        ; 
    margin-top: 10px;
    margin-bottom: 30px;
    filter: drop-shadow(0.35rem 0.35rem 0.44rem rgba(14, 22, 44, 0.81));
    }


/* GENERAL COLUMN PADDING */
.left-sidebar-grid > * {
    padding:1rem;
    /* max-width: calc(96vw) !important; MOBILE HACK */ 
    }

/* ASSIGN COLUMNS TO GRID AREAS. */
.left-sidebar-grid > .header {
    grid-area:header;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    background-color: var(--whitebrick);
    background: url("/assets/images/(Albany)_Traditional-Brick-Red.webp"); 
    background-repeat: repeat;
    background-size: 320px;
    padding-top: 0;
    padding-bottom: 0;
    color: black; /* Preload effect; see back-to-home for actual colour */
    text-align: center;
    }


/* DEFAULT, GENERAL, PRELOADED APPEARANCE */
.left-sidebar-grid > .navbar {
    grid-area:navbar;
    background-color: var(--foliage);
    font-family: Times New Roman; /* This defines the interpunct only; See Navbar-link for proper font  */
    padding-top: 5px;
    padding-right: 0;
    font-size: calc(30px + 0.380625vw);
    background: url("/assets/images/(Albany)_Cecilia-Navy.png"); 
    background-repeat: repeat;
    color: white;
    text-shadow: 1px 1px 2px rgba(88, 0, 38, 0.77) !important;
    text-align: left;
    background-size: contain;
    padding-bottom: 2px;
    }


/* GENERIC BREADCRUMBS */
.left-sidebar-grid > .breadcrumbs {
    grid-area:breadcrumbs;
    font-family: Russell Square;
    padding-top: 5px;
    padding-bottom: 0;
    font-size: calc(18px + 0.380625vw);
    background-color: var(--burgundy);
    background: url("/assets/images/(Background-Tiles.com)_1042.png"); 
    background-repeat: repeat;
    background-size: 150px;
    color: white;
    text-shadow: 2px 2px 2px rgba(82, 0, 66, 0.85);
    }
.left-sidebar-grid > .breadcrumbs > b {
    font-family: Russell Square Oblique;
    }
.left-sidebar-grid > .breadcrumbs > a {
    color: white;
    font-weight: normal;
    text-decoration: none;
    }
.left-sidebar-grid > .breadcrumbs > a:hover {
    color: var(--lightgold);
    text-decoration: underline;
    }


/* GENERAL NAVBAR PROPERTIES*/
a.navbar-link {
    font-family: Verve Regular;
    color: var(--lightgold) !important;
    text-decoration: none;
    font-size: 25px;
    font-weight: normal !important;
    }
a.navbar-link:hover {
    text-decoration: underline;
    }

/* GENERIC SIDEBAR PROPERTIES */
.left-sidebar-grid > .left-sidebar{
    grid-area:left-sidebar;
    background: url("/assets/images/(Mind_the_Gap)_Abeille-Decoratif-Indigo.webp"); 
    background-repeat: repeat;
    background-size: 110px;
    padding-right: 0;
    color: white;
    font-size: calc(25px + 0.380625vw);
    text-shadow: 1px 1px 2px black !important;
    padding-left: 0.95rem;
    /* list-style-image: url(/right-arrow.svg); */
    }
.left-sidebar-grid > .left-sidebar > h3 {
    padding: 0;
    margin: 0;
    font-size: calc(34px + 0.380625vw);
    }
.sidebar-list > * > a {
    color: #ffc486 !important;
    text-decoration: none;
    font-weight: normal !important; 
    text-shadow: 1px 1px 2px black !important;
    }
    @media (min-width: 800px) {
        .sidebar-list > * > a {
            font-size: calc(9px + 0.380625vw);
            }
        }
.sidebar-list > * > a:hover {
    text-decoration: underline;
    }
.side-here {
    font-family: Gazette Bold;
    }
.sidebar-list {
    margin-left: -20px;
    list-style-type: square;
    }
.chapter-list {
    list-style-type: upper-roman !important;
    }
.lower-roman {
    list-style-type: lower-roman;
    margin-left: -30px;
    }
/* Deprecated: see child properties of sidebar-list > * > a */
a.side {
    color: #ffc486 !important;
    text-decoration: none;
    font-weight: normal !important; 
    text-shadow: 1px 1px 2px black !important;
    }
a.side:hover {
    text-decoration: underline;
    }


/* MAIN CONTENT */
.left-sidebar-grid > .main-content {
    grid-area:main-content;
    font-size: calc(17px + 0.380625vw); /* Basically applies to ul li only */
    }
.left-sidebar-grid > .main-content > ul {
    padding-top: 0;
    margin-top: 0;
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);
    }
.left-sidebar-grid > .main-content > p {
    margin-left: 10px;
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);
    }
.left-sidebar-grid > .main-content > p > i {
    font-family: Russell Square Oblique;
    font-style: none !important;
    }
.left-sidebar-grid > .main-content > h2 {
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);
    }
.left-sidebar-grid > .main-content > h3 {
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);
    }
.left-sidebar-grid > main-content > li > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.left-sidebar-grid > .main-content > p > i {
    font-family: Russell Square Oblique;
    font-style: normal;
    }
.left-sidebar-grid > .main-content > ul > li > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    /* Not !important because it would override FAQ links */
    }


/* GENERIC FOOTER */
.left-sidebar-grid > .footer {
    grid-area:footer;
    background-color: var(--whitebrick);
    background: url("/assets/images/(Albany)_Traditional-Brick-Red.webp"); 
    background-repeat: repeat;
    background-size: 600px;
    font-size: calc(18px + 0.380625vw);
    font-family: Bembo Bold;
    padding-top: 20px;
    padding-left: 35px;
    color: rgba(23, 0, 0, 0.87);
    text-shadow: 2px 2px 2px rgba(134, 105, 122, 0.63);
    /*text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75); */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    }


/* APPEARANCE */
body {
    background: url("/assets/images/%5BAlbany%5D_Miami-Tropical-Geo-Navy.webp"); 
    background-size: 100px;
    background-repeat:repeat;
    }
.site-title {
    font-family: Else NPL Bold;
    margin-top: 1.7rem;
    margin-bottom: 0.4rem;
    color: black; /* No effect- See back-to-home instead */
    text-shadow: 3px 3px 3px rgba(162, 135, 151, 0.53) !important;
    }
a.back-to-home {
    color: rgba(23, 0, 0, 0.67) !important;
    text-decoration: none;
    font-weight: normal !important;
    }


/* MOBILE VIEWPORT */
@media (max-width:799px) {
    .left-sidebar-grid > * {
        margin-right: 4px;
        padding:0.8rem;
        }
    .left-sidebar-grid > .header {
        padding-top: 4px;
        }
    .site-title {
        font-size: 42px;
        padding-bottom: 5px;
        }
    .left-sidebar-grid > .navbar {
        background-size: cover;
        text-align: center;
        margin-bottom: 15px;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
        padding-bottom: 6px;
        } 
    .left-sidebar-grid > .breadcrumbs {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding-bottom: 5px;
        }
    .left-sidebar-grid > .main-content {
        background-size: cover !important; /* Background image of main covers entirely */
        }
    .left-sidebar-grid > .main-content > ul {
        padding-left: 18px;
        }
    .sidebar-list {
        margin-left: 10px;}
    a.navbar-link {
        font-size: 30px;
        }
    a.side-here {
        font-size: 22px;
        }
    .lower-roman {
        list-style-type: lower-roman;
        margin-left: -10px;
        }
    }


/* TABLET AND SMALL DESKTOP VIEWPORT */
@media (min-width:800px) and (max-width:1499px) {
    .left-sidebar-grid {
        grid-template-columns: 170px repeat(4, 1fr);
        grid-template-areas:
            'header header header header header'
            'navbar navbar navbar navbar navbar'
            'breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs'
            'left-sidebar main-content main-content main-content main-content'
            'footer footer footer footer footer'
            'jumper jumper jumper jumper jumper'
            ;
        min-width: 640px;
        max-width: 800px;
        margin-top: 20px;
        margin-left: 40px;
        margin-bottom: 40px;
        filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(14, 22, 44, 0.81));
        }
    .left-sidebar-grid > .navbar {
        margin-bottom: 10px;
        font-size: calc(16px + 0.380625vw); /* 0.380625vw */
        background-color: var(--foliage);
        background: url("/assets/images/(Albany)_Cecilia-Navy.png"); 
        background-repeat: repeat;
        background-size: 300px;
        text-shadow: 1px 1px 2px rgba(88, 0, 38, 0.77) !important;
        color: white; /* Interpuncts only; See navbar-link for link colours */
        padding-top: 4px;
        padding-bottom: 2px;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
        }
    .left-sidebar-grid > .breadcrumbs {
        padding-left: 5px;
        padding-top: 9px;
        padding-bottom: 1px;
        text-align: right;
        background-color: var(--burgundy);
        background: url("/assets/images/(Background-Tiles.com)_1042.png"); 
        background-repeat: repeat;
        background-size: 100px;
        font-size: calc(12px + 0.380625vw);
        color: white;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
        }
    
    .left-sidebar-grid > .left-sidebar {
        min-width: 155px;
        max-width: 200px;
        font-size: 11px; /* AFFECTS UPPER ROMAN NUMERALS ONLY */
        }
    .left-sidebar-grid > .left-sidebar > ol > li > ol {
        font-size: 11px !important; /* AFFECTS UPPER ROMAN NUMERALS ONLY */
        }
    .side {
        font-size: 14px;
        }
    .side-here {
        font-size: 16px;
        }
    .left-sidebar-grid > .main-content {
        font-size: calc(15px + 0.380625vw);
        }
    .left-sidebar-grid > .footer {
        font-size: calc(14px + 0.380625vw);
        }
    .left-sidebar-grid > .left-sidebar > .sidebar-menu > h3 {
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 3px;
        padding-top: 2px;
        font-size: 20px;
        }
    .site-title {
        font-size: 60px;
        }
    }
    


/* WIDE DESKTOP VIEWPORT */
@media (min-width:1500px) {
    .left-sidebar-grid {
        grid-template-columns:repeat(5, 1fr);
        grid-template-areas:
            'header header header header header'
            'navbar navbar breadcrumbs breadcrumbs breadcrumbs'
            'left-sidebar main-content main-content main-content main-content'
            'footer footer footer footer footer';
        max-width: 800px;
        margin-top: 60px;
        margin-left: 70px;
        margin-bottom: 100vw;
        filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(14, 22, 44, 0.81));
        }
    .left-sidebar-grid > .navbar {
        width: 270px;
        font-size: calc(17px + 0.380625vw); /* 0.380625vw */
        background-color: var(--burgundy);
        background: url("/assets/images/(Albany)_Cecilia-Navy.png"); 
        background-repeat: repeat;
        text-shadow: 1px 1px 2px rgba(88, 0, 38, 0.77) !important;
        color: black;
        padding-bottom: 4px;
        }
    .left-sidebar-grid > .breadcrumbs {
        width: 444px;
        padding-left: 5px;
        margin-left: -37px;
        text-align: right;
        background-color: var(--burgundy);
        background: url("/assets/images/(Background-Tiles.com)_1042.png"); 
        background-repeat: repeat;
        font-size: calc(16px + 0.380625vw);
        }
    .left-sidebar-grid > .left-sidebar {
        width: 164px;
        font-size: calc(17px + 0.380625vw);
        text-shadow: 2px 2px 3px black !important;
        }
    .left-sidebar-grid > .main-content {
        width: 539px;
        font-size: calc(16px + 0.380625vw);
        }
    .left-sidebar-grid > .footer {
        font-size: calc(15px + 0.380625vw);
        }
    .left-sidebar-grid > .left-sidebar > h3 {
        padding: 0;
        margin: 0;
        font-size: calc(20px + 0.380625vw);
        }
    .site-title {
        font-size: calc(50px + 0.380625vw);
        }
    }




/* How the Questions look in the FAQs*/
.faq {
    font-family: Romic Light Italic;
    color: #0f004a;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.faq-list > li {
    margin-bottom: 8px;
    }
.faq-list > li > a {
    color: #0f004a !important;
    text-shadow: 1px 1px 1px rgba(0, 142, 197, 0.75) !important;
    text-decoration: none;
    }
.faq-list > li > a:hover {
    text-decoration: underline;
    }
.quote1 {
    color:#2c1fb7;
    font-family: Romic Medium;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.quote1 > i {
    color:re;
    font-family: Romic Light Italic;
    font-weight: bold;
    font-style: normal;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.quote2 {
    color:#a70073;
    font-family: Romic Medium;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.quote2 > i {
    color:#a70073;
    font-family: Romic Light Italic;
    font-weight: bold;
    font-style: normal;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.quote2 > i > u {
    color:#a70073;
    font-family: Romic Light Italic;
    font-weight: bold;
    font-style: normal;
    text-decoration: underline;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.quote3 {
    color:#007755;
    font-family: Romic Medium;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }


.header-divider {
    background-color: var(--whiterick);
    background: url("/assets/images/(Albany)_Traditional-Brick-Red.webp"); 
    background-repeat: repeat;
    text-shadow: 2px 1px 3px rgba(227, 248, 255, 0.87);
    padding-top: 3px;
    padding-bottom: 6px;
    padding-left: 12px;
    filter: drop-shadow(3px 2px 4px rgba(33, 17, 54, 0.9));
    }
a.header-divider-link:link {
    color: black;
    }
a.header-divider-link:visited {
    color: black;
    }
a.header-divider-link:active {
    color: black;
    }
a.header-divider-link:hover {
    color: black;
    }
    @media (max-width:799px) {
        .header-divider {
            padding-top: 6px;
            padding-bottom: 7px;
            font-size: 17px;
            }
        }
    @media (max-width:799px) {
        .pages_nav {
            font-size: calc(20px + 0.380625vw);
            letter-spacing: .25rem;
            }
        } 


    

blockquote {
    color: #0f004a;
    font-family: Romic Light Italic;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    /* text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43); */
    margin-right: 0;
    }

.excerpt {
    font-family: Russell Square Oblique;
    color: #0f004a;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75) !important;
    }


/* WIDE DIVIDER, WIDE BOX */
.wide-box {
    max-width: 600px;
    border: solid;
    border-width: 4px;
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 15px;
    }


/* REFERENCES AND FOOTNOTES */
.refs > li {
    margin-bottom: 8px;
    }
.refs > li > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    overflow-wrap: break-word;
    }
.refs > li > a:hover {
    text-decoration: underline;
    }
sup > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }



/* TABLE PROPERTIES */
table {
    border: outset 3px;
    margin-top: 8px;
    margin-bottom: 8px;
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
th {
    border: ridge 2px;
    background: url("/assets/images/(Mind_the_Gap)_Abeille-Decoratif-Indigo.webp"); 
    color: white;
    padding: 4px;
    text-shadow: 2px 2px 1px rgba(33, 17, 54, 0.43) !important;
    }
td {
    border: ridge 2px;
    padding: 4px;
    }
tr:hover {background-color: rgba(236, 124, 25, 0.5)}
.indent {
    margin-left: 8px;}


details {
    text-shadow: 1px 1px 1px rgba(33, 17, 54, 0.43);}



/* GENERIC RP APPEARANCE */
.user-container {
    float: right;
    min-width: 400px;
    max-width: 550px;
    padding-bottom: 0;
    margin-bottom: 15px;
    }
.user-line {
    float: right;
    min-width: 400px;
    max-width: 550px;
    }
.user-avatar {
    float: right;
    width: 110px;
    height: 110px;
    border: solid;
    margin-right: 1px;
    border-width: 3px;
    background-color: black;
    }
.user-avatar > a {
    color: black !important;}
.user-label {
    text-align: right;
    margin-top: 70px;
    margin-right: 100px;
    padding-right: 30px;
    padding-left: 5px;
    bottom: 0;
    font-size: calc(11px + 0.380625vw);
    }
.user-rp {
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 5px;
    margin-bottom: 0;
    border: solid;
    border-width: 4px;
    }
.user-rp > p {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: calc(13px + 0.380625vw); 
    }
.user-rp > p > b {
    font-family: Gazette Bold;
    font-weight: normal;
    }
.user-rp > p > em {
    font-family: Gazette Italic;
    font-style: normal;
    text-decoration: underline;
    }
.user-rp > p > i {
    font-family: Gazette Italic;
    font-style: normal;
    }
.user-rp > p > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.user-rp > p > i > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.user-rp > ul > li > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.user-rp > ul > li > i {
    font-family: Gazette Italic; 
    font-style: normal;
    }
.user-rp > ul > li > a > i {
    font-family: Gazette Italic; 
    font-style: normal;
    }
.user-dialogue {
    font-family: Gazette Bold;
    font-size: calc(14px + 0.380625vw) !important;
    }
.user-dialogue > em {
    font-family: Gazette Italic !important;
    font-weight: bold;
    text-decoration: underline;
    font-style: normal;
    }
.user-dialogue > i {
    font-family: Gazette Italic !important;
    font-style: normal;
    font-weight: bold;
    }
.user-dialogue > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }

.chatbot-container {
    min-width: 400px;
    max-width: 550px;
    padding-bottom: 0;
    margin-bottom: 15px;
    }
.chatbot-line {
    float: left;
    min-width: 400px;
    max-width: 550px;
    }
.chatbot-avatar {
    float: left;
    width: 110px;
    height: 110px;
    border: solid;
    margin-right: 1px;
    border-width: 3px;
    background-color: black;
    }
.chatbot-avatar > a {
    color: black !important;}
.chatbot-label {
    margin-top: 70px;
    margin-left: 100px;
    padding-left: 30px;
    bottom: 0;
    padding-right: 5px;
    font-size: calc(11px + 0.380625vw); /* 0.380625vw */
    }
.chatbot-rp {
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 5px;
    margin-bottom: 0;
    border: solid;
    border-width: 4px;
    }
.chatbot-rp > p {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: calc(13px + 0.380625vw); /* 0.380625vw */
    }
.chatbot-rp > p > em {
    font-family: Gazette Italic;
    font-style: normal;
    }
.chatbot-rp > p > i {
    font-family: Gazette Italic;
    font-style: normal;
    }
.chatbot-rp > p > b {
    font-family: Gazette Bold;
    font-weight: normal;
    }
.chatbot-dialogue {
    font-family: Gazette Bold;
    font-size: calc(14px + 0.380625vw) !important;
    }
.chatbot-dialogue > em {
    font-family: Gazette Italic !important;
    font-weight: bold;
    text-decoration: underline;
    font-style: normal;
    }
.chatbot-dialogue > i {
    font-family: Gazette Italic !important;
    font-style: normal;
    font-weight: bold;
    }



.npc1-dialogue {
    font-family: Gazette Bold;
    font-size: calc(14px + 0.380625vw) !important;
    }
.npc2-dialogue {
    font-family: Gazette Bold;
    font-size: calc(14px + 0.380625vw) !important;
    }





@media (max-width:799px) {
    .sidebar-menu {
        background-color: rgba(0, 25, 46, 0.55); }
    }
/* STICKY LEFT SIDEBAR MENU ON DESKTOP ONLY */
@media (min-width:800px) {
    .sidebar-menu {
        position: sticky;
        top: 0;
        margin-left: -8px;
        margin-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 4px;
        padding-right: 4px;
        border-radius: 12px;
        background-color: rgba(0, 25, 46, 0.55); 
        }
    }


/* GENERIC CONTAINER PROPERTIES */
.big-name { /*For use in .label divs (e.g. USER PROMPT: Sei) */
    font-size: 25px;
    font-family: Gazette Roman;
    }
.big-name > b {
    font-family: Gazette Bold;
    font-weight: normal;
    }
/* ENLARGE NAME IN DATELINES */
.name {
    font-size: calc(16px + 0.380625vw) !important; /* 0.380625vw */
    font-family: Gazette Bold;
    }
/* ITALICISE TIME IN DATELINES */
.time {
    font-family: Gazette Italic;
    }
.rp { /* Doesn't have a background or float; use in Character Notes */
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 0;
    /* border-color: black; */
    border: solid !important;
    border-width: 4px !important;
    }


/* CENTER CONTRAINERS */
.container {
    max-width: 550px;
    padding-bottom: 0;
    margin-bottom: 15px;
    }
.rp-center {
    max-width: fit-content;
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 15px;
    border: solid !important;
    border-width: 4px !important;
    }
@media only screen and (min-width: 800px) {
    .nudge-left {margin-left: 15px;}
    }


/* LEFT CONTAINERS & LABELS */
.container-left {
    float: left;
    min-width: 400px;
    max-width: 550px;
    padding-bottom: 0;
    margin-bottom: 15px;
    }
.line-left {
    float: left;
    min-width: 400px;
    max-width: 550px;
    }
.label-left {
    margin-top: 70px;
    margin-left: 100px;
    padding-left: 30px;
    padding-right: 5px;
    bottom: 0;
    font-size: calc(11px + 0.380625vw);
    }
@media only screen and (max-width: 799px) {
    .label-left {
        padding-top:5px;
        }
    }
.label-left > i {
    font-family: Russell Square;
    font-size: 14px;
    }
.rp-left {
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 5px;
    margin-bottom: 0;
    border: solid;
    border-width: 4px;
    }
.rp-left > p {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: calc(13px + 0.380625vw); 
    }
.rp-left > * > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.rp-left > * > * > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }


/* RIGHT CONTAINERS & LABELS */
.container-right {
    float: right;
    min-width: 400px;
    max-width: 550px;
    padding-bottom: 0;
    margin-bottom: 15px;
    }
.line-right {
    float: right;
    min-width: 400px;
    max-width: 550px;
    }
.label-right {
    text-align: right;
    margin-top: 70px;
    margin-right: 100px;
    padding-right: 30px;
    padding-left: 5px;
    bottom: 0;
    font-size: calc(11px + 0.380625vw);
    }
@media only screen and (max-width: 799px) {
    .label-right {
        padding-top:5px;
        }
    }
.label-right > i {
    font-family: Russell Square;
    font-size: 14px;
    }
.rp-right {
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 5px;
    margin-bottom: 0;
    border: solid;
    border-width: 4px;
    border-color: black;
    }
.rp-right > p {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: calc(13px + 0.380625vw); 
    }
.rp-right > p > b {
    font-family: Gazette Bold;
    font-weight: normal;
    }
.rp-right > p > em {
    font-family: Gazette Italic;
    font-style: normal;
    text-decoration: underline;
    }
.rp-right > p > i {
    font-family: Gazette Italic;
    font-style: normal;
    }
.rp-right > * > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.rp-right > * > * > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.rp-right > ul > li > i {
    font-family: Gazette Italic; 
    font-style: normal;
    }
.rp-right > ul > li > a > i {
    font-family: Gazette Italic; 
    font-style: normal;
    }
.dialogue {
    font-family: Gazette Bold;
    font-size: calc(14px + 0.380625vw) !important;
    }
.dialogue > em {
    font-family: Gazette Italic !important;
    font-weight: bold;
    text-decoration: underline;
    font-style: normal;
    }
.dialogue > i {
    font-family: Gazette Italic !important;
    font-style: normal;
    font-weight: bold;
    }
.dialogue > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }


/* WIDE CONTAINERS & LABELS */
.container-wide {
    float: left;
    min-width: 400px;
    max-width: 600px;
    padding-bottom: 0;
    margin-bottom: 15px;
    }
.rp-wide {
    padding: 0;
    margin-bottom: 0;
    }
.rp-wide > p {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: calc(13px + 0.380625vw); 
    }
.rp-wide > * > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }
.rp-wide > * > * > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }

.flex-container {
    display: flex;
    }
.item {
    min-height: 0;
    box-sizing: border-box;
    max-width: 50%;
    padding: 8px;
    }


/* POTTED PLANT */
.plant-div {
    width: 200px;
    height: 286px;
    position: sticky;
    left: 400px;
    bottom: 20px;
    background-image: url(/assets/images/Monstera-deliciosa-black-pot.png);
    background-repeat: no-repeat;
    background-size: contain;
    }
.potted-plant {
    max-width: 200px;
    }

.italics {
    font-family: Gazette Italic !important;
    }



/* GENERIC TEXTURES */
.sei-label {
    color: white;
    text-shadow: 2px 2px 1px rgba(136, 11, 64, 0.43) !important;
    background-color: rgba(186, 40, 102, 0.63);
    }
.sei-rp {
    background: url("/Stories/Luna_The_Vampire_Slayer/(Albany_Miami-Tropical-Geo-Grey.png");
    background-size: 270px; 
    background-repeat: repeat; 
    background-color: var(--whitebrick);
    text-shadow: 2px 2px 2px rgba(101, 56, 133, 0.43);
    }
.sei-rp > * > a {
    text-shadow: 1px 1px 1px rgba(227, 248, 255, 0.75);
    }


/* TAGS*/
#pasteto {
    margin: 0;
    padding: 0;
    }
.tag-links {
    word-spacing: 10px;
    }
.tag-links > * {
    line-height: 1.5em;
    }
.tag-margin {
    margin-bottom: -5px;
    }
@media only screen and (max-width: 799px) {
    .tag-links {
        text-align: center !important;
        }
    .tag-links > * {
        line-height: 1.65em;
        font-size: calc(21px + 0.380625vw) !important;
        }
    .tag-margin {
        margin-bottom: 0.5em;
        }
    }




/* JUMP TO TOP */
.left-sidebar-grid > .jumper {
    grid-area:jumper;
    float:right;
    padding-bottom: 0;
    }
    @media (min-width:800px){
    .left-sidebar-grid > .jumper { 
        padding-right: 0;
        }
    }
#jump-to-top {
    background: url("/assets/images/(Background-Tiles.com)_1049.png");
    background-size: 220px; 
    background-repeat: repeat; 
    background-color: #FFEB7A;
    border: 2px solid #c0951c;
    color: black;
    text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.73);
    padding: 4px;
    font-family: 'Romic Bold';
    font-size: larger;
    text-decoration: none;
	text-align: center;
    text-transform: uppercase;
    border-radius: 6px;
    min-width: 200px;
    margin-left: 50%;
    float: right;
    }
    @media (max-width:799px){
    #jump-to-top { 
        margin-top: 10px;
        padding-top: 8px;
        width: 100%;
        }
    }
#jump-to-top:hover {
    border: 2px solid white;
    }
#jump-container {
    background-color:darkturquoise;
    padding-right: 0;
    margin-left: 350px;
    margin-right: 0;
    }