/* ******************** */
/* PAGE & CONTENT SIZES */
body {
    position:relative;
    max-width:var(--page_width);
    margin-left: auto;
    margin-right:auto;
    font-family:sans-serif;
    font-size:1.6rem;
}
body > * {
    width:clamp(320px, 100%, var(--content_width));
    margin-inline:auto;
}
nav#nav {
    position: absolute;
    width:clamp(320px, 100%, var(--content_width));
    left: calc((clamp(320px,100%,var(--page_width)) - clamp(320px, 100%, var(--content_width))) / 2);
    z-index:9;
}
/* main {padding:2ch 0;} */
h1, .h1 {
    width:94%;
    font-size: var(--large);
    margin: 1rem;
    padding: 0.5rem 2rem;
    border-radius: 0.5rem;
}
/* h2, .h2 {
    margin:0.5rem;
    padding:0.5rem 1rem;
    font-size:var(--medium);
} */
.two-thirds {
    width:clamp(360px, 67%, 640px);
    flex-basis:unset;
    margin:2rem auto 1rem;
}
.two-thirds > h1 {margin-inline:auto;margin-block:1rem}


/* FONT FAMLIY & SIZE CLASSES */
.words {font-family:sans-serif}
.large {font-size:var(--large)}
.medium {font-size:var(--medium)}
.small {font-size:var(--small)}
.font-fit {font-size:clamp(var(--small), 5vw, var(--large));}
.one-line {font-size:clamp(var(--small), calc(100vw / var(--strlen)), var(--large));}
/* ******************** */


ol, ul, dl {list-style:none}
details summary > * {display:inline;}
a {text-decoration:none;color:inherit;}
p a {text-decoration:underline dashed var(--silver);color:inherit;}
/* text-underline-position:under; */
strong, .b {font-weight:bold}

table {margin-inline:auto;border-collapse:collapse}
caption {caption-side: bottom;}
/* CSS tables from (usually) lists */
.table {display:table;border-collapse:collapse}
.table > .thead {border-bottom:2px dashed var(--hued)}
.table > * {display:table-row;}
.table > * > * {display:table-cell;padding:0.5rem;vertical-align: middle;}
/* HIDE COLUMNS ON NARROW SCREENS */
@media screen and (max-width:640px) {
    .narrow-4 > * > :nth-child(n+5) {display: none;}
    .narrow-5 > * > :nth-child(n+6) {display: none;}
    .narrow-6 > * > :nth-child(n+7) {display: none;}
}

.pre {white-space:pre;}
.mono {font-family: monospace;}

/* Utility Styling */
.striped > :nth-child(odd) {background:var(--stripes)}
.lalign {text-align:left}
.calign {text-align:center}
.ralign {text-align:right}
.lfoat {float:left}
.rfloat {float:right}
.flex_stretch{flex:1}
h1, .flex_break {flex-basis:100%;grid-column:1 / -1}
hr.flex_stretch, /* flex spacer horizontal-rule */
hr.flex_break {visibility:hidden;margin:auto;} /* flex breaking horizontal-rule */
hr.spacer {visibility:hidden;flex-basis:100%;margin-block:1ch;}
.material-icons, .material-symbols-sharp {font-variant: normal !important;}

.columns {
    width: 100%;
    display: grid;
}
@media screen and (min-width:640px) {
    .columns {grid-template-columns: 50% 50%;}
}

/* BREADCRUMBS */
.breadcrumb {margin:0.5rem 1rem 1rem;}
.breadcrumb > li {
    display: inline-block;
}
.breadcrumb > li:nth-child(n+2):before {
    content:'\00A0> ';
}

/* DOWNLOAD OVERLAY */
.download {position:relative}
.download .download_link {
    position:absolute;
    top:0;
    right:0;
    padding:2px;
}
.download .download_link:hover {
    background:var(--hued);
    border-radius: 25%;
    filter: invert(1);
}


/* LOGIN BOX STYLING */
section.login {background:var(--background)}
section.login > form {
    max-width: min(240px, 90%);
    margin: 2rem auto;
    display: grid;
    grid-template-columns: none;
    row-gap: 1rem;
}
section.login > form > input {font-size:120%;padding:0.5rem;}


/* Data Card Default Styling */
.modal > * {
    width:100%;
    padding:0;
}
.data-card {
    width:100%;
    list-style: none;
    text-align: left;
    font-size: 1.4rem;
    color: var(--black);
    background: var(--silver);
    filter: brightness(1.5);
}
.data-card > :first-child {font-size:2rem;line-height: 200%;font-weight:bold}
.data-card > :nth-child(even) {background:var(--striped)}
.data-card > * > :nth-child(odd) {text-align: right;}
.data-card > * > * {
    min-width:11ch;
    padding:1rem 0.5rem;
    /* border-bottom: 1px dotted var(--black); */
}



/* SEARCH OPTIONS BOX */
.search_options {width:100%}
.search_options summary {margin: 1px 0 1rem;padding: 0.5rem 4rem;}
input[type=search] {padding: 0.5rem;}

/* ADMIN FORMS STYLING */
section.add_new {
    display: flex;
    flex-wrap:wrap;
}
.add_new > form{
    width: clamp(360px, 46%, 600px);
}
.bulk_add {display: unset;}
.bulk_add > * {width:94%;}


/* Button Links */
.button {
    font-size: var(--medium);
    margin: 2rem;
    padding: 1rem;
    display: inline-block;
    border: 2px solid var(--hued);
    box-shadow: 3px 3px 6px 0px var(--shadow);
    outline: 2px solid var(--shadow);
    border-radius: 2rem;
}

/* List Of Lists */
/* Currently ONLY Movie Lists */
.list_lists {display: flex;}
.list_lists ul {margin-left:1rem;list-style:none;}
.list_lists ul > li > a {display:inline;}


/* EDIT LINKS ON HOVER ONLY */
.edit_link {position:absolute;visibility:hidden;height: min-content;width:min-content}
h1 .edit_link {
    position: relative;
    top: 0.5rem;
    float: right;
}
*:hover > .edit_link {visibility:visible;display: block !important;}

/*** Error Handler and DeBug Output Styles ***/
.spoilt_log {
    margin-inline:auto;
    padding:1rem;
    font-family: monospace;
    font-size:14px;
    white-space:pre;
    overflow: auto;
    background:thistle;
    color:black;
}
.spoilt_debug {
    font-size:1.4rem;
    margin:1rem;
    padding:1rem;
    text-align:left;
    white-space:pre-wrap;
    background:thistle;
    color:black;
    border:3px double whitesmoke;
}
.spoilt_error{
    flex-basis:80%;
    font-size:1.4rem;
    margin:1rem;
    padding:1rem;
    text-align:left;
    white-space:pre-wrap;
    background:indianred;
    color:black;
    font-weight:bold;
    border:3px double black;
}
.spoilt_error > * {background:thistle !important;color:black !important;}
/* .backtrace > div:first-line {line-height: 2rem;} */



/* SIZING STYLES */
.novella > h1,
.infotext > h1,
.columns h1
 {
    max-width:600px;
    font-size:var(--medium);
}
.novella > p {
    max-width:520px;
    margin-inline: 3vw;
    font-size:var(--larger);
}
.human-duration {font-family:monospace;word-spacing: -0.5ch;}



/* 
====================================================================================================================================
======    ==  =====  =====  ======      ===        ========      ======  =====  ========  ========        ==       ===  ====  ======
=======  ===   ===   ====    ====   ==   ==  =============   ==   ====    ====  ========  ========  ========  ====  ==   ==   ======
=======  ===  =   =  ===  ==  ===  ====  ==  =============  ====  ===  ==  ===  ========  ========  ========  ====  ===  ==  =======
=======  ===  == ==  ==  ====  ==  ========  =============  ========  ====  ==  ========  ========  ========  ===   ===  ==  =======
=======  ===  =====  ==  ====  ==  ========      =========  ========  ====  ==  ========  ========      ====      ======    ========
=======  ===  =====  ==        ==  ===   ==  =============  ===   ==        ==  ========  ========  ========  ====  =====  =========
=======  ===  =====  ==  ====  ==  ====  ==  =============  ====  ==  ====  ==  ========  ========  ========  ====  =====  =========
=======  ===  =====  ==  ====  ==   ==   ==  =============   ==   ==  ====  ==  ========  ========  ========  ====  =====  =========
======    ==  =====  ==  ====  ===      ===        ========      ===  ====  ==        ==        ==        ==  ====  =====  =========
====================================================================================================================================
*/
[class^="gallery"] {
    width: clamp(360px, 80%, 720px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-block:2rem;
    margin-inline: auto;
}
[class^="gallery"] > figcaption {
    flex-basis: 100%;
    width: fit-content;
    max-width: unset;
    max-height: 1rem;
}
[class^="gallery"] > div:nth-of-type(1),
[class^="gallery"] > div:nth-of-type(2) {
    width:49%;
    max-width:49%;
    max-height:520px;
    aspect-ratio: unset;
}
[class^="gallery"] > * {
    margin: 1rem auto;
    max-width: 24%;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1;
}
[class^="gallery"] > * > img {
    aspect-ratio: 1;
    /* visibility:hidden; */
    opacity:0;
}
.gallery-4 > img {max-width:30%}


/* 
========================================================================================================
======  ========    ==  =======  ==        =========     ===  ====  =====  =====       ===        ======
======  =========  ===   ======  ==  ==============  ===  ==  ====  ====    ====  ====  =====  =========
======  =========  ===    =====  ==  =============  ========  ====  ===  ==  ===  ====  =====  =========
======  =========  ===  ==  ===  ==  =============  ========  ====  ==  ====  ==  ===   =====  =========
======  =========  ===  ===  ==  ==      =========  ========        ==  ====  ==      =======  =========
======  =========  ===  ====  =  ==  =============  ========  ====  ==        ==  ====  =====  =========
======  =========  ===  =====    ==  =============  ========  ====  ==  ====  ==  ====  =====  =========
======  =========  ===  ======   ==  ==============  ===  ==  ====  ==  ====  ==  ====  =====  =========
======        ==    ==  =======  ==        =========     ===  ====  ==  ====  ==  ====  =====  =========
========================================================================================================
 */
.line_chart {
    display:block;
    margin:4rem 1rem;
    position:relative;
    width:100%;
    height:100%;
    min-height:50vh;
    overflow:hidden;
    border-left: 1px solid var(--silver);
    border-bottom: 1px solid var(--silver);
}
.line_chart * {
    padding:unset;
    border:unset;
}
.line_chart thead {display:none;}
.line_chart caption {
    position:absolute;
    width:100%;
}

/* Turn a <td> into a data point */
.line_chart .data_point {
    position: absolute;
    left:var(--x);
    bottom:var(--y);
    outline: 3px solid var(--line_color);
    height: 4px;
    width: 4px;
    border-radius: 50%;
    color: transparent;
    background:var(--line_color);
    cursor:help;
}
/* pseudo elements for the lines between points */
.line_chart .data_point::before,
.line_chart .data_point::after {
    content:'-';
    display:block;
    height:3px;
    translate:3px 3px;
    width:var(--l);
    rotate:var(--a);
    transform-origin: left;
    background: var(--line_color);
}
/* :after elements are transparent but used to extend :hover boundary of points */
.line_chart .data_point::after {
    position:absolute;
    z-index:1;
    width:var(--m);
    rotate:var(--b);
    height:9px;
    background:transparent;
    translate:3px -18px;
}
.line_chart .data_point:hover {outline: 6px solid yellow;}
.line_chart .data_label {display:none;}
.line_chart .trans > .data_point::before {background: transparent;}

/* .point_label::before {
    content:attr(title);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    min-height:5rem;
    text-align:center;
    padding:1rem 3rem;
    white-space: pre;
}
.line_chart .data_point:hover .point_label::before {
    color:black;
    background:white;
    animation: fade 0.5s linear;
}

@keyframes fade {
  0% { opacity: 0 }
  100% { opacity: 1 }
} */



/* ==============================================================================================================
=  ====  ===================  ======================================        =====================================
=  ====  ===================  ======================================  ===========================================
=  ====  ===================  ==========================  ==========  =======================  ==================
=  ====  ===   ====   ======  ===   ===  =   ===========  ==========  =========   ====   ===    ===   ===  =   ==
=        ==  =  ==  =  ===    ==  =  ==    =  =======        =======      ====     ==     ===  ===  =  ==    =  =
=  ====  ==     =====  ==  =  ==     ==  ===============  ==========  ========  =  ==  =  ===  ===     ==  ======
=  ====  ==  ======    ==  =  ==  =====  ===============  ==========  ========  =  ==  =  ===  ===  =====  ======
=  ====  ==  =  ==  =  ==  =  ==  =  ==  ===========================  ========  =  ==  =  ===  ===  =  ==  ======
=  ====  ===   ====    ===    ===   ===  ===========================  =========   ====   ====   ===   ===  ======
============================================================================================================== */																		   
/*************************************/
/* Main HTML Header & Navigation Styles */
/* #header {
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
    align-items: center;
	padding:0.5ch 1rem 1vh;
    font-family:Comic Neue, cursive;
	font-size:clamp(var(--small), 5vw, var(--large))
} */
#header .title {padding-left:1rem;}
#header .subtitle {
    font-size: var(--small);
    font-family: sans-serif;
    text-indent: 1rem;
}
nav#nav {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap:1rem;
    padding:1rem 2rem;
}
nav#nav > a {
    width:300px;
    padding: 0rem 1rem 0.5rem;
    border-radius: 0.5rem;
}
#header .material-icons, #header .material-symbols-sharp{font-size:120%}
.nav .material-icons, .nav .material-symbols-sharp {translate:0 0.5rem;}

/* Footer & Credits Styling */
/* #footer {
    position:relative;
	grid-row:11;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-evenly;
	align-items:center;
	padding-top:2rem;
    border-top:1px solid var(--background);
}
#footer > * {width:46%; min-width:270px;}
#attribution {width:fit-content;max-width:480px;height:fit-content;padding:1rem;text-align:center;border:1px solid slategray;border-radius:9px;}
#attribution a:not(#nre_logo) {display:block;padding-bottom:1rem;opacity:0.64}
#attribution sub, #attribution sup {display:block;font-size:var(--small);}
#spoiltcat {width:fit-content;min-width:unset;margin: 9px 6px 17px;padding: 6px;border: 3px solid slategray;border-radius: 0px 9px;opacity:0.64;}
#retrogray {flex-grow:1;width:calc(100vw - 10ch);height:12px;margin: 0;min-width:270px;} */
/* @media (prefers-color-scheme: dark) {#retrogray {filter:invert(1)}} */
/* #spoiltdog {width: 34vw;max-width: 46vh;padding: 5vh 5vw;margin: 3vw auto 3vh;background: hsla(0, 0%, 94%, 0.9);border-radius: 2rem;box-shadow: 0 0 20px 4px black;} */
/* Main HTML Header & Footer Styles */
/***********************************/

.redalert {
    background:var(--red);
    color:var(--white);
    outline:1px solid var(--white);
    border-radius: 0.5rem;
    text-align:center;
}
.yellwarn {
    outline:1px solid var(--highlight);
    border-radius: 0.5rem;
}
/* Default Background & Text Colors are required definitions */
/* e.g. for position:absolute elements to not be transparent */
/* html {background:hsla(0,0%,50%,0.2);}
@media screen and (max-width:640px) {
    html {background:var(--background);}
} */
main, footer#footer {color:var(--text);background:var(--background);}
option, optgroup {background:var(--background);}
::placeholder{color:var(--color);opacity:0.4}

nav#nav {
    background:var(--background);
    border:3px solid var(--hued);
    box-shadow: 0px 14px 20px 0px var(--shadow);
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: var(--white);
        --background: var(--night);
    }
    nav#nav {
        background:var(--blackout);
        box-shadow: 0px 14px 20px 0px var(--black);
    }
    .gothmode,
	img.grayscale {filter:invert(1) hue-rotate(180deg);}
}
/* #header {background:var(--hued)} */

.nav > a {border:1px solid var(--shadow);}
.nav > a:hover {background:var(--stripes)}
/* .color_inherit{color:inherit;background:inherit;} */

/* .red {background:var(--red);color:var(--white);border:1px solid white;} */

#retrogray {mix-blend-mode: luminosity;}

/* Default Stripes for <table> AND .table classed elements */
tr:nth-child(odd),
.table > :nth-child(even) {background: var(--stripes)}
thead > tr > * {background:hsla(var(--color),0.2)}
th,td,
.table > * > * {display:table-cell;border:1px solid var(--stripes);padding:0.5rem;}


/* Layout / Colour Styles */
.hued {background:var(--hued)}
.boxed {
    border: 0.25rem solid var(--highlight);
    padding: 1rem;
}