/* WPX Project Website v4.1 CSS3 */

/* ---GLOBAL FORMATTING--- */

html {
    height: 100%;
    max-width: 2560px;
    margin: 0 auto;
    scroll-padding-top: 22vh;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion) {
    /* styles to apply if a user's device settings are set to reduced motion */
    html {
        scroll-behavior: unset;
    }
  }

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #333333;
    font-family: Base, Verdana, Tahoma, sans-serif;
    color: #eeeeee;
    text-shadow: #000000 3px 3px 2px;
    box-shadow: 0px 1rem 50px 3rem #000000;
}

a:link { 
    color: #ffffff;
    text-underline-offset: 0.3rem;
}
    
a:visited { 
    color: #b0b5ff;
}

/* END SECTION */

/* ---GLOBAL EFFECTS--- */

    /* Animations */
    @keyframes fadeIn {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    @keyframes fadeOut {
        from {opacity: 1;}
        to {opacity: 0;}
    }

    @keyframes colorMorph {
        0%  {color: #ffffff;}
        50% {color: #0000FF;}
        100% {color: #00ff00;}
    }

/* END SECTION */

/* ---GENERAL FORMATTING CLASSES [.]--- */

/* Element Display Modes */

.flex {
    display: flex;
}

.flex div {
    flex-basis: 100%;
}

.contain {
    overflow: auto;
}

/* Element Positioning */

.float-container {
    /* Allows parent container to resize and
    /  accommodate floating elements within */
    display: flow-root;
}

div.left, img.left {
    display: block; 
    float: left;
    padding: 0 1rem 0 0;
}

div.right, img.right {
    float: right; 
    padding: 0 0 0 1rem;
}

div.center, img.center {
    display: block;
    margin: 0 auto;
}

/* Text Positioning */

p.center, a.center, h1.center, h2.center, h3.center, h4.center, li.center {
    text-align: center;
    text-indent: 0;
    display: block;
}

p.left, a.left, h1.left, h2.left, h3.left, h4.left {
    text-align: left;
    text-indent: 0;
    display: block;
}

p.right, a.right, h1.right, h2.right, h3.right, h4.right {
    text-align: right;
    text-indent: 0;
    display: block;
}

.justify {
    text-align: justify;
}

.indent {
    text-indent: 1rem;
}

/* Inactive elements */

.inactive {
    filter: opacity(0.5);
}

.hidden {
    visibility: hidden;
}

/* Alternative link styling */

.no-underline {
    text-decoration: none;
}

/* Glass UI Tinting */

.dark33 {
    background: #00000033;
}

.dark55 {
    background: #00000055;    
}

.dark77 {
    background: #00001177;
}

/* Specialized Content Area Styling */

.raised {
    border: 4px outset #0b101155;
    padding: 1rem;
    margin: 0;
}

.inset {
    border: 4px inset #1a1e1f55;
    padding: 1rem;
    margin: 0;
}

.inset-rounded {
    border: 4px inset #1a1e1f55;
    border-radius: 10px;
    padding: 1rem; 
}

/* Themed Separators */

hr.glass {
    border-top: 5px groove #1a1e1f55;
}

/* END SECTION */

/* ---GLASS WINDOW INTERFACE--- */

.window {
    /* Wrapper DIV */
    margin: 0 auto;
    padding-top: 3.5rem;
    padding-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.wintitle {
    /* Window Header DIV */
    width: 100%;
    height: 2.5rem;
    padding-bottom: 1.5rem;
    border-top: 4px outset #1e2d3055;
    border-right: 4px outset #1e2d3055;
    border-left: 4px outset #1e2d3055;
    border-radius: 0.5rem 0.5rem 0 0;
    background: url('../ui/ui_glass2.png') repeat, #000000BB;
    background-attachment: fixed;
    backdrop-filter: blur(1px);
    font-family: Heading, Verdana, sans-serif;
    font-variant: small-caps;
    color: #999999;
    text-align: center;
}

.winbody {
    /* Window Body DIV */
    width: 100%;
    border-top: 4px groove #ff7700;
    border-right: 4px outset #1e2d3055;
    border-bottom: 4px groove #333377;
    border-left: 4px outset #1e2d3055;
    background: url(../ui/ui_glass.png) repeat;
    background-attachment: fixed;
    backdrop-filter: blur(2px);
    color: #ffffff;
}

.winbody_clear {
    /* Window Body DIV (no background) */
    width: 100%;
    border-top: 4px groove #ff7700;
    border-right: 4px outset #1e2d3055;
    border-bottom: 4px groove #333377;
    border-left: 4px outset #1e2d3055;
    background-attachment: fixed;
    backdrop-filter: blur(2px);
    color: #ffffff;
}

.wincontent {
    /* Window Inner Content Wrapper (general) DIV */
    width: 95%;
    margin: 1rem auto;
    font-family: Modern, Verdana, Geneva, Tahoma, sans-serif;
    color: #ffffff;
    text-shadow: #000000 3px 3px 2px;
}

.wincontent p {
    font-size: 1.1rem;
    text-align: justify;
    text-indent: 2rem;
}

.wincontent a {
    transition: 0.5s;
}

.wincontent a:hover {
    color: #ffffff;
    text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 5px #1122ff, 0 0 7px #1122ff, 0 0 9px #1122ff;
    transition: 0.5s;
}

.wintxt {
    /* Window Inner Content Wrapper (alternate) DIV */
    width: 80%;
    max-height: 60rem;
    margin: 1rem auto;
    font-family: Code, "lucida Console", Courier, monospace;
    font-size: 1rem;
    color: #ffffff;
    text-shadow:3px 3px 2px #000000, 0 0 5px #ffffff, 0 0 5px #0000ff, 0 0 10px #7da8f4;
    text-indent: 2rem;
    overflow-y: auto;
}

.wintxt h3 {
    color: #ffffff;
    text-shadow:3px 3px 2px #000000, 0 0 5px #ffffff, 0 0 5px #0000ff, 0 0 10px #7da8f4, 0 0 15px #aac5f4;
}

.wintxt ul {
    text-align: left;
    text-indent: 0rem;
}

.wintxt li, .wintxt p {
    padding: 0.2rem 1rem;
}

.winfooter {
    /* Window Footer DIV */
    width: 100%;
    height: 1.5rem;
    padding-top: 0.5rem;
    border-right: 4px outset #1e2d3055;
    border-bottom: 4px outset #1e2d3055;
    border-left: 4px outset #1e2d3055;
    border-radius: 0 0 0.5rem 0.5rem;
    background: url('../ui/ui_glass2.png') repeat,#000000BB;
    background-attachment: fixed;
    backdrop-filter: blur(1px);
    font-family: Base, Verdana, Geneva, sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
    color: #999999;
    text-align: center;
}

/* END SECTION */

/* ---PAGE HEADER--- */

#header {
    min-height: 100vh;
    background: #000000;
}

#header div {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#header div:before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30rem;
    background: linear-gradient(to top, #000000, transparent);
    z-index: 2;
}

#header div img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

#HeaderText, #HeaderText a {
    position: relative;
    color: #000000;
    text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 5px #1122ff, 0 0 7px #1122ff, 0 0 9px #1122ff;
    font-family: Heading, Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    z-index: 1;
    text-decoration: none;
    transition: 1s;
    transition-property: color, text-shadow;
}

#HeaderText a:hover, #HeaderText a:focus {
    text-shadow:0 0 2px #fff, 0 0 3px #fff, 0 0 10px #fff, 0 0 14px #49ff18, 0 0 6px #1122ff, 0 0 10px #1122ff, 0 0 14px #1122ff, 0 0 18px #1122ff;
    color: #ffffff;
    transition: 0.5s;
}

#layer3, #layer3a {
    z-index: 2;
}

#layer2, #layer1 {
    z-index: 3;
}

.delay_anim {
    opacity: 0;
    animation: fadeIn 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

.delay_anim_2 {
    opacity: 0;
    animation: fadeIn 1.5s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}

/* END SECTION */

/* ---PRIMARY NAVIGATION--- */

#navigation {
    max-width: 2560px;
    overflow: hidden;
    box-shadow: 0px 1rem 50px 3rem #000000DD;
    z-index: 100;
    font-size: 1.2em;
    font-weight: bold;
    position: sticky;
    top: 0;
    transition: 1s;
}

#navigation.invisible {
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
}

#navigation.invisible .navtitle {
    opacity: 0;
}

#navigation a:hover {
    color: #000000;
    text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 5px #1122ff, 0 0 7px #1122ff, 0 0 9px #1122ff;
    transition: 0.4s ease;
}

#navigation .navtitle a:hover {
    color: #ffffff;
    transition: 0.4s ease;
}

.navtitle a {
    text-decoration: none;
    color: #000000;
    transition: 0.3s ease-out;
}

.navtitle a:visited {
    text-decoration: none;
    color: #000000;
}

.navtitle {
    /* NOTE: Reusable for other sections */
    display: block;
    padding: 0.9rem 2rem;
    background: linear-gradient(0deg, #00000055 0%, #00000066 10%, #40595C77 65%, #00000077 80%, #00000066 90%, #00000055 100%);
    color: #000000;
    text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 5px #1122ff, 0 0 7px #1122ff, 0 0 9px #1122ff;
    font-size: 1.1rem;
    font-family: Heading, Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 700;
    transition: 1s;
}

#navitems a {
    transition: 0.3s ease-out;
    transition-property: color, text-shadow;
}

#navitems ul {
    margin: 0 1rem 0 0;
    list-style-type: none;
}

#navitems a {
    display: block;
    padding: 1rem 1rem;
    font-family: Heading, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 0.9em;
    font-weight: bold;
    color: #eeeeee;
    text-align: center;
    text-decoration: none;
}

/* END SECTION */

/* ---MAIN CONTENT AREA--- */

#main {
    padding: 0 0 0 0;
    display: flex;
    flex-direction: column;
    perspective: 100px;
    perspective-origin: 0 0;
}

#top-transition {
    padding: 1rem;
    height: 5vh;
    background: linear-gradient(0deg, #222222 0%, #111111 40%, #000000 70%, #000000 100%);   
}

/* #Story (Main Content) Section */

    #story-transition {
        margin: 0;
        width: 100%;
        background: url('../ui/ui_transition_bottom.svg'), url('../ui/ui_matrix_b.jpg');
        background-attachment: scroll, fixed;
        background-position: top center, center;
        background-repeat: no-repeat, repeat;
        background-size: auto, auto;
    }

    #story {
        padding-bottom: 10rem;
        background: url('../ui/ui_transition_top.svg'), url('../ui/ui_matrix_b.jpg');
        background-attachment: scroll, fixed;
        background-position: bottom center, center;
        background-repeat: no-repeat,repeat;
        background-size: auto, auto;
    }

    /* Tabbed #story content area */
        .storynav {
            /* Hide the radio buttons - Accessibility fix*/
            opacity: 0;
            position: absolute;
        }

        .storynav:focus ~ #story_tabs .tab {
            background: #77777777;
        }

        #story_tabs {
            display: flex;
        }

        #story_tabs .tab {
            font-family: Base, Verdana, Geneva, Tahoma, sans-serif;
            color: #eeeeee;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
        }

        #story_content {
            transform: scaleX(-1);
        }

        .tabcont { 
            /* #story_1_content, #story_2_content, etc. */
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: relative;
            display: none;
        }

        #intro0:checked ~ #story_content #intro_content, #story1:checked ~ #story_content #story_1_content, #story2:checked ~ #story_content #story_2_content, #story3:checked ~ #story_content #story_3_content {
            display: block;
        }

        #intro0:checked ~ #story_tabs #intro_0, #story1:checked ~ #story_tabs #story_1, #story2:checked ~ #story_tabs #story_2, #story3:checked ~ #story_tabs #story_3 {
            background: #00001177;
            border-top: 4px outset #0b101155;
            border-right: 4px outset #0b101155;
            border-left: 4px outset #0b101155;
            border-bottom: 0px outset transparent;
            border-radius: 0.5rem 0.5rem 0 0;
            color: #000000;
            text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 5px #1122ff, 0 0 7px #1122ff, 0 0 9px #1122ff;
        }

        #story_tabs .tab:not(:checked):hover {
            border: 0px solid transparent;
            background: linear-gradient(0deg, #00001177 0%, #00001155 50%, #00001100 100%);
            text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 5px #1122ff, 0 0 7px #1122ff, 0 0 9px #1122ff;
            color: #000000;
            transition: 0.75s ease;
            transition-property: color, text-shadow;
        }

        #story_tabs .tab {
            margin-top: 0.3rem;
        }

        .tabcont p, .tabcont img {
            animation: fadeIn 1s;
        }

        .contlist {
            height: 50vh;
            padding: 0.75rem;
            vertical-align: top;
            overflow-y: auto;
            overflow-x: hidden;
            font-family: Base, Verdana, Geneva, Tahoma, sans-serif;
        }

        .contlist details {
            margin-left: auto;
            margin-right: auto;
            display: block;
            width: 90%;
            margin: 0.5rem;
            padding: 0 0 0 0;
            border: 2px outset #00000055;
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
            background: #00000033;
            text-align: justify;
            text-decoration: none;
            transition: 1.5s;
            animation: fadeIn 1s;
            transform: scaleX(-1);
        }

        .contlist details p:not(:first-of-type) {
            text-indent: 2rem;
        }

        .contlist h3 {
            text-align: center;
            transform: scaleX(-1);
        }

        .contlist summary ~ h4 {
            text-align: center;
        }

        .contlist summary ~ p {
            text-align: justify;
            padding: 0 2rem 0 2rem;
        }

        .contlist details summary {
            background: #00000033;
            border: 4px outset #0b101155;
            padding: 0.3rem;
        }

        .contlist details summary h3 {
            display: inline;
            line-height: 3rem;
            margin-left: 1rem;
        }
        
        .contlist ul {
            margin-left: 0;
            margin-right: 0;
            width: 90%;
            line-height: 4rem;
            animation: fadeIn 1s;
            list-style-type: none;
            transform: scaleX(-1);
        }

        .contlist ul li:hover {
            color: #b0b5ff;
            list-style-type: none;
        }

        .contlist ul li a, .contlist ul li p {
            display: block;
            width: 90%;
            margin: 0.5rem;
            padding: 1rem 0;
            border: 2px outset #00000055;
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
            background: #00000033;
            text-align: center;
            text-decoration: none;
            transition: 1.5s;
        }

        .contlist ul li a:hover, .contlist ul li p:hover {
            color: #ffffff;
            border: 2px outset #00000055;
            background: #3c6fd533;
            text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 5px #1122ff, 0 0 7px #1122ff, 0 0 9px #1122ff;
            transition: 0.5s;
        }

        .contlist ul li a:visited {
            color: #ffffff;
        }

        .storyprev {
            margin: 0;
            min-height: 30vh;
            padding: 0 2rem;
            overflow: hidden;
            transform: scaleX(-1);
        }

        .storyprev p {
            font-family: Modern, Verdana, Geneva, Tahoma, sans-serif;
            font-size: 1rem;
            color: #ffffff;
            text-shadow: #000000 3px 3px 2px;
            text-align: justify;
        }

        .storyprev p:not(:first-of-type) {
            text-indent: 2rem;
        }

        .storyprev h3 {
            text-indent: 2rem;
            transform: scaleX(-1);
            animation: fadeIn 1.5s;
        }

        .contprev {
            height: 50vh;
            padding: 1rem;
            vertical-align: top;
            overflow-y: auto;
            transform: scaleX(-1);
        }

        #intro_logo {
            height: 100%;
            background: url('../ui/cover_default.png') no-repeat;
            background-size: contain;
            background-position: center;
            animation: fadeIn 1.5s;
        }

        #soulless_logo {
            height: 100%;
            background: url('../ui/cover_soulless.png') no-repeat;
            background-size: contain;
            background-position: center;
            animation: fadeIn 1.5s;
        }

        #aberrant_logo {
            height: 100%;
            background: url('../ui/cover_aberrant.png') no-repeat;
            background-size: contain;
            background-position: center;
            animation: fadeIn 1.5s;
        }
    /* ---- */

/* END #Story Section */        

/* #World (Gallery) Section */

    #world-transition {
        margin: 0;
        width: 100%;
    }

    /* Tabbed #map content area */
        .mapnav {
            /* hide the radio buttons - Accessibility fix*/
            opacity: 0;
            position: absolute;
        }

        #map_tabs {
            height: 4rem;
            display: flex;
        }

        #map_tabs .tab {
            padding: 0.85rem 2rem;
            font-family: Base, Verdana, Geneva, Tahoma, sans-serif;
            color: #eeeeee;
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
        }

        #map_tabs .tab:not(:checked) {
            border-top: 4px solid transparent;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            border-bottom: 4px solid transparent;
        }

        #map_tabs .tab:not(:checked):hover {
            background: #00001133;
            text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 5px #1122ff, 0 0 7px #1122ff, 0 0 9px #1122ff;
            color: #000000;
            transition: 0.75s ease;
            transition-property: color, text-shadow;
        }

        #world_select:checked ~ #map_content #world_map_content, #system_select:checked ~ #map_content #planetary_map_content {
            display: block;
        }

        #world_select:checked ~ #map_tabs #world_map, #system_select:checked ~ #map_tabs #system_map {
            padding-top: 1rem;
            background: #00001177;
            border-top: 4px inset #0b101155;
            border-right: 4px inset #0b101155;
            border-left: 4px inset #0b101155;
            border-bottom: 4px inset  #0b101155;
            color: #000000;
            text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 5px #1122ff, 0 0 7px #1122ff, 0 0 9px #1122ff;
        }

        .mapcont {
            /* Will have an ID of #world_map or #system_map */
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: relative;
            display: none;
        }

        .mapcont img {
            width: 100%;
            object-fit: contain;
        }

    /* ---- */

    /* Thumbnail container styling */    
        #image_gallery h2 {
            padding: 2rem 0;
        }

        .thumbcont-outer {
            display: flex;
            justify-content: center;
            margin: auto;
        }

        .thumbcont-inner {
            display: flex;
            flex-wrap: wrap;
        }

        .thumbbox {
            margin: 0.5rem;
            padding: 0.7rem;
            max-width: 45%;
            border: 2px outset #55555555;
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
            background: #33333333;
            backdrop-filter: blur(3px);
            text-align: center;
            transition: 1s;
        }

        .thumbbox img {
            width: 90%;
            max-width: 200px;
            object-fit: cover;
            filter: grayscale(100%);
            transition: 1s;
        }

        .thumbbox p {
            margin: 0;
            padding: 1rem;
            color: #ffffff;
            font-family: Base, Verdana, Geneva, Tahoma, sans-serif;
            text-shadow: #000000 3px 3px 2px;
            text-align: center;
            text-indent: 0;
        }

        .thumbbox:hover {
            background: #3c6fd577;
            border: 2px outset #3c6fd599;
            transition: 1s;
        }

        .thumbbox img:hover {
            filter: grayscale(0%);
            transition: 1s;
        }

    /* ---- */

/* END #World Section */

/* ---PAGE FOOTER--- */
#footer {
    min-height: 20vh;
    background: linear-gradient(0deg, #000000 0%, #000000 40%, #111111 70%, #222222 100%); 
}

#footerContent {
    display: flex;
    flex-direction: row;
}

#footerLeft {
    padding: 1rem;
    flex-basis: 25%;
    display: block;
}

#footerLeft span {
    margin: 0 auto;
    padding: 0.1rem;
    font-family: Base, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 0.85rem;
    display: block;
    text-align: center;
}

#footerLeft a {
    color: #000000;
    text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 5px #1122ff, 0 0 7px #1122ff, 0 0 9px #1122ff;
    font-family: Heading, Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    opacity: 0.8;
    filter: grayscale(100%);
    transition: 1.5s ease-out;
}

#footerLeft a:hover {
    filter: grayscale(0%);
    transition: 0.5s ease-in;
}

#footerCenter ul, #footerRight ul {
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: space-evenly;
    font-family: Heading, Verdana, Geneva, Tahoma, sans-serif;
    text-shadow: #000000 3px 3px 2px;
}

#footerCenter a:visited {
    color: #ffffff;
}

#footerRight {
    padding: 1rem;
    flex-basis: 25%;
    display: block;
    text-align: center;
}

#footerRight ul li a {
    transition: 1.5s;
}

#footerRight ul li a:hover {
    color: #ffffff;
    text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 5px #1122ff, 0 0 7px #1122ff, 0 0 9px #1122ff;
    transition: 0.5s;
}

#footerRight li {
    padding: 1rem 0.5rem;
}

#footerRight a {
    text-decoration: none;
}

a i.fa-deviantart {
    transition: 1s ease-out;
}

a i.fa-deviantart:hover {
    color: #000000;
    text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #1122ff, 0 0 3px #49ff18, 0 0 5px #49ff18, 0 0 7px #49ff18, 0 0 9px #49ff18;
    transition: 0.5s ease-in;
}

a i.fa-pixiv {
    transition: 1s ease-out;
}

a i.fa-pixiv:hover {
    color: #000000;
    text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #1122ff, 0 0 3px #0096FA, 0 0 5px #0096FA, 0 0 7px #0096FA, 0 0 9px #0096FA;
    transition: 0.5s ease-in;
}

#copyright {
    height: 1.8vh;
    margin: 0;
    padding: 1rem;
    background: #000000;
    font-size: 0.8rem;
    text-align: center;
    clear: both;
}

#copyright span {
    padding-bottom: 1.5rem;
}

/* END SECTION */

/* ---RESPONSIVE MEDIA QUERIES--- */
@media screen and (max-width: 400px) {
    /* Phone/Tiny display */

    h2 {
        font-size: 1.2em;
    }

    div.spaced {
        /* Adds extra space below a .window DIV
        /  to accommodate transition zone */
        padding-bottom: 1rem;
    }

    #loading_overlay {
        display: none;
    }

    #header {
        display: none;
    }

    #navigation {
        position: fixed;
        width: 100%;
    }

    #navigation.invisible #menuicon {
        opacity: 0;
    }

    .navtitle {
        border-bottom: 2px outset #9ce5ff45;
        box-shadow: 1px 0px 10px 5px #9ce5ffcc;
        background: linear-gradient(0deg, #00000099 0%, #000000AA 10%, #40595CBB 65%, #000000BB 80%, #000000AA 90%, #00000099 100%);
        backdrop-filter: blur(3px);
    }

    /* Make the menu icon appear */
    #menuicon {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        padding: 1rem 1rem;
        transition: 0.5s;
    }

    #menuicon a:hover, #menuicon a:focus {
        text-shadow:2px 5px 5px #000000, 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 7px #1122ff;
        transition: 0.3s;
    }

    /* Temporarily hide the #navigation links until toggled by the menu icon */
    #navitems {
        /* default: display: none; swithces to display: block when toggled by menuToggle() */
        display: none;
        background: url('../ui/ui_glass2.png') repeat, #00000000;
        backdrop-filter: blur(4px);
        border-bottom: 4px outset #0b101155;
        position: relative;
        animation: fadeIn 0.5s;
    }

    #navitems:target {
        display: block;
    }


    /* Make the #navigation menu items list vertically instead of horizontally */
    #navitems ul {
        padding: 0;
        display: flex;
        flex-direction: column;
        text-shadow: #000000 2px 5px 5px;
        animation: fadeIn 1s;
    }

    #navitems a:hover {
        background: #00001177;
        color: #000000;
        text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 5px #1122ff, 0 0 7px #1122ff, 0 0 9px #1122ff;    
    }

    #main {
        padding-top: 0;
    }

    #top-transition {
        display: none;
    }

    .window {
        width: 95%;
        padding-right: 0.5rem;
    }

    #story-transition, #world-transition {
        min-height: 5rem;
        padding-bottom: 25rem;
    }

    #story, #world {
        padding-top: 1rem;
    }

    #story_tabs .tab:first-of-type {
        margin-left: 0rem;
    }

    #story_tabs .tab {
        padding: 1rem;
        margin: 0;
    }

    #story_content {
        display: inline;
    }

    .storyprev p, .storyprev h3 {
        transform: scaleX(-1);
    }

    /* .storyprev p {
        display: none;
    } */

    .contlist {
        flex-basis: 100%;
    }

    .chlist {
        display: block;
        transform: scaleX(-1);
    }

    .chlist h3 {
        text-align: center;
        transform: scaleX(-1);
    }

    .contprev {
        display: none;
        flex-basis: 0%;
    }

    #world-transition {
        background: url('../ui/ui_transition_bottom.svg'), url('../ui/ui_space_s.png');
        background-attachment: scroll, fixed;
        background-position: top center, center;
        background-repeat: no-repeat, no-repeat;
        background-size: auto, cover;
    }

    #world {
        background: url('../ui/ui_transition_top.svg'), url('../ui/ui_space_s.png');
        background-attachment: scroll, fixed;
        background-position: bottom center, center;
        background-repeat: no-repeat, no-repeat;
        background-size: auto, cover;
        padding-bottom: 8rem;
    }

    #map_tabs {
        display: flex;
    }

    #map_tabs .tab {
        font-size: 0.8rem;
    }

    #map_tabs .tab:first-of-type {
        margin: 0 auto;
    }

    #world_map {
        flex-basis: 50%;
    }

    #system_map {
        flex-basis: 50%;
    }

    #mapfooter {
        padding: 0.1rem;
        height: auto;
        text-align: center;
    }

    /* Make image gallery thumbs arrange vertical on mobile */
    .thumbcont-outer {
        width: 95%;
        flex-wrap: wrap;
    }

    .thumbcont-inner {
    flex: auto;
    justify-content: center;
    }

    .thumbbox {
        flex: auto;
    }

    #footerContent {
        flex-direction: column;
    }

    #footerCenter {
        padding: 1rem;
        flex-basis: 100%;
    }

    #footerCenter li {
        padding: 1rem;
    }

    #copyright span {
        padding-bottom: 0.5rem;
    }
}

@media screen and (min-width: 401px) {
    /* Tablet/low-res display */

    h2 {
        font-size: 1.4em;
    }

    div.spaced {
        /* Adds extra space below a .window DIV
        /  to accommodate transition zone */
        padding-bottom: 5rem;
    }

    div.transition {
        padding: 1rem;
        height: 15vh;
        background: #222222;
    }

    #HeaderText {
        font-size: 2.2rem;
        margin-top: 12rem;
    }

    #navigation {
        position: fixed;
        width: 100%;
    }

    #navigation.invisible #menuicon {
        opacity: 0;
    }

    .navtitle {
        border-bottom: 2px outset #9ce5ff45;
        box-shadow: 1px 0px 10px 5px #9ce5ffcc;
        background: linear-gradient(0deg, #00000099 0%, #000000AA 10%, #40595CBB 65%, #000000BB 80%, #000000AA 90%, #00000099 100%);
        backdrop-filter: blur(3px);
    }

    /* Make the menu icon appear */
    #menuicon {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        padding: 1rem 1rem;
        transition: 0.5s;
    }

    #menuicon a:hover {
        text-shadow:2px 5px 5px #000000, 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 7px #1122ff;
        transition: 0.3s;
    }

    /* Temporarily hide the #navigation links until toggled by the menu icon */
    #navitems {
        /* default: display: none; swithces to display: block when toggled by menuToggle() */
        display: none;
        background: url('../ui/ui_glass2.png') repeat, #00000000;
        backdrop-filter: blur(4px);
        border-bottom: 4px outset #0b101155;
        position: relative;
        animation: fadeIn 0.5s;
    }

    #navitems:target {
        display: block;
    }

    /* Make the #navigation menu items list vertically instead of horizontally */
    #navitems ul {
        padding: 0;
        display: flex;
        flex-direction: column;
        text-shadow: #000000 2px 5px 5px;
        animation: fadeIn 1s;
    }

    #navitems a:hover {
        background: #00001177;
        color: #000000;
        text-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #49ff18, 0 0 3px #1122ff, 0 0 5px #1122ff, 0 0 7px #1122ff, 0 0 9px #1122ff;    
    }

    #main {
        padding-top: 0;
    }

    .window {
        width: 95%;
        padding-right: 0.5rem;
    }

    #story-transition, #world-transition {
        min-height: 5rem;
        padding-bottom: 25rem;
    }

    #story, #world {
        padding-top: 1rem;
    }

    #story_tabs .tab {
        padding: 1rem 1rem;
        min-width: 11vw;
        max-width: 15vw;
    }

    #story_tabs > .tab {
        font-size: 0.8rem;
    }

    #story_tabs .tab:first-of-type {
        margin-left: 1rem;
    }

    #story_content {
        display: inline;
    }

    .storyprev p, .storyprev h4 {
        transform: scaleX(-1);
    }

    .chlist {
        display: block;
        transform: scaleX(-1);
    }

    .contlist {
        flex-basis: 100%;
    }

    .contprev {
        display: none;
        flex-basis: 0%;
    }

    #world-transition {
        background: url('../ui/ui_transition_bottom.svg'), url('../ui/ui_space_s.png');
        background-attachment: scroll, fixed;
        background-position: top center, center;
        background-repeat: no-repeat, no-repeat;
        background-size: auto, cover;
    }

    #world {
        background: url('../ui/ui_transition_top.svg'), url('../ui/ui_space_s.png');
        background-attachment: scroll, fixed;
        background-position: bottom center, center;
        background-repeat: no-repeat, no-repeat;
        background-size: auto, cover;
        padding-bottom: 15rem;
    }

    #map_tabs {
        display: flex;
    }

    #map_tabs .tab {
        font-size: 1.1rem;
    }

    #map_tabs .tab:first-of-type {
        margin: 0 auto;
    }

    #world_map {
        flex-basis: 50%;
    }

    #system_map {
        flex-basis: 50%;
    }

    #mapfooter {
        padding: 0.1rem;
        height: auto;
        text-align: center;
    }

    /* Make image gallery thumbs arrange vertical on mobile */
    .thumbcont-outer {
        width: 95%;
        flex-wrap: wrap;
    }

    .thumbcont-inner {
    flex: auto;
    justify-content: center;
    }

    .thumbbox {
        flex: auto;
    }

    #footerContent {
        flex-direction: column;
    }

    #footerCenter {
        padding: 1rem;
        flex-basis: 100%;
    }

    #footerCenter li {
        padding: 1rem;
    }

    #copyright {
        padding-bottom: 0.7rem;
    }
}

@media screen and (min-width: 920px) {
    /* Standard full page display */

    div.spaced {
        /* Adds extra space below a .window DIV
        /  to accommodate transition zone */
        padding-bottom: 10rem;
    }

    div.transition {
        padding: 1rem;
        height: 15vh;
        background: #222222;
    }

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.2rem;
    }

    .navtitle {
        font-size: 1.5rem;
        margin-right: 1rem;
    }

    #navitems li a {
        font-size: 1.5rem;
    }

    .wintitle {
        height: 3.5rem;
    }

    .wincontent p {
        font-size: 1.1rem;
    }

    .wintxt {
        font-size: 1.0rem;
    }

    #header {
        height: 24vh;
    }

    #HeaderText {
        font-size: 5rem;
        margin-bottom: 35rem;
    }
    
    #navigation {
        display: flex;
        flex-direction: row;
        background: linear-gradient(0deg, #333333AA 0%, #333333BB 10%, #738c8fCC 65%, #333333CC 80%, #333333BB 90%, #333333AA 100%);
        backdrop-filter: blur(1px);
    }

    #menuicon {
        display: none;
    }

    .navtitle {
        border-right: 1px solid #9cffa4af;
        border-bottom: 0;
        box-shadow: 1px 0px 10px 3px #9cffa4af;
    }

    #navitems {
        display: block;
        background: unset;
        backdrop-filter: unset;
        border-bottom: 0;
        animation: fadeIn 3s;
    }

    #navitems ul {
        display: flex;
        flex-direction: row;
        text-shadow: #000000 3px 3px 2px;
    }

    #navitems a:hover {
        background: linear-gradient(90deg, #00001100 0%, #00001155 20%, #00001177 30%, #00001177 70%, #00001155 80%, #00001100 100%);
    }

    .window {
        width: 75%;
    }

    #story-transition, #world-transition {
        min-height: 20rem;
        padding-bottom: 10rem;
    }

    #story, #world {
        padding-top: 3rem;
        min-height: 70vh;
    }

    #story_tabs {
        flex-direction: row;
        float: none;
    }

    #story_tabs .tab {
        padding: 1rem 1rem;
        min-width: 11vw;
        max-width: 15vw;
    }

    #story_tabs .tab:first-of-type {
        margin-left: 1rem;
    }

    #story_tabs > .tab {
        font-size: 1.2rem;
    }

    .chlist {
        display: flex;
        flex-direction: row-reverse;
    }

    .contlist {
        flex-basis: 60%;
    }

    .contlist ul li a {
        font-size: 1.5rem;
    }

    .storyprev {
        font-size: 1.1rem;
    }

    .storyprev h4 {
        font-size: 1.5rem;
    }

    .contprev {
        flex-basis: 40%;
        display: block;
    }

    #world-transition {
        background: url('../ui/ui_transition_bottom.svg'), url('../ui/ui_space_m.png');
        background-attachment: scroll, fixed;
        background-position: top center, center;
        background-repeat: no-repeat, no-repeat;
        background-size: auto, cover;
    }

    #world {
        background: url('../ui/ui_transition_top.svg'), url('../ui/ui_space_m.png');
        background-attachment: scroll, fixed;
        background-position: bottom center, center;
        background-repeat: no-repeat, no-repeat;
        background-size: auto, cover;
        padding-bottom: 20rem;
    }

    #map_tabs > .tab {
        font-size: 1.2rem;
    }

    #mapfooter p {
        display: none;
    }

    #mapfooter {
        height: 1.5rem;
    }

    .thumbcont-outer {
        width: 76%;
        flex-direction: row;
    }

    .thumbcont-inner {
        flex: auto;
        flex-wrap: wrap;
    }

    .thumbbox {
        flex: auto;
    }

    .thumbbox p {
        font-size: 1.2rem;
    }

    #footerContent {
        flex-direction: row;
    }

    #footerLeft span a {
        font-size: 1.5rem;
    }

    #footerLeft span {
        font-size: 1.2rem;
    }

    #footerCenter {
        padding: 1rem;
        flex-basis: 50%;
    }

    #footerCenter li {
        padding: 2rem;
        font-size: 1.3rem;
    }

    #footerRight {
        font-size: 1.0rem;
    }

    #copyright {
        font-size: 1.0rem;
    }

}

@media screen and (min-width: 2048px) {
    /* Massive 2K+ Widescreens */

    div.spaced {
        /* Adds extra space below a .window DIV
        /  to accommodate transition zone */
        padding-bottom: 12rem;
    }

    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 2.2rem;
    }

    h3 {
        font-size: 1.8rem;
    }

    h4 {
        font-size: 1.5rem;
    }

    .navtitle {
        font-size: 1.8rem;
        margin-right: 1rem;
    }

    #navitems li a {
        font-size: 1.8rem;
    }

    .wintitle {
        height: 4.5rem;
    }

    .wincontent p {
        font-size: 1.5rem;
    }

    .wintxt {
        font-size: 1.2rem;
    }

    #HeaderText {
        font-size: 8rem;
        margin-bottom: 40rem;
    }

    #story-transition, #world-transition {
        min-height: 25rem;
    }

    #story_tabs > .tab {
        font-size: 1.5rem;
    }

    .contlist ul li a {
        font-size: 1.8rem;
    }

    .storyprev {
        font-size: 1.5rem;
    }

    .storyprev h4 {
        font-size: 1.8rem;
    }

    #world-transition {
        background: url('../ui/ui_transition_bottom.svg'), url('../ui/ui_space_l.png');
        background-attachment: scroll, fixed;
        background-position: top center, center;
        background-repeat: no-repeat, no-repeat;
        background-size: auto, cover;
    }

    #world {
        background: url('../ui/ui_transition_top.svg'), url('../ui/ui_space_l.png');
        background-attachment: scroll, fixed;
        background-position: bottom center, center;
        background-repeat: no-repeat, no-repeat;
        background-size: auto, cover;
        padding-bottom: 22rem;
    }

    #map_tabs > .tab {
        font-size: 1.5rem;
    }

    .thumbbox p {
        font-size: 1.5rem;
    }

    #footerLeft span a {
        font-size: 2rem;
    }

    #footerLeft span {
        font-size: 1.2rem;
    }

    #footerCenter li {
        padding: 3rem;
        font-size: 1.5rem;
    }

    #footerRight {
        font-size: 1.5rem;
    }

    #copyright {
        font-size: 1.2rem;
    }

}

/* END SECTION */