/* Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* Variables */
:root {
    --background:#2f3e46;
    --accent:#32535a;
    --accent_blue:#193a50;
    --accent_gold:#fbcd75;
    --offwhite: #eceae2;
    --offblack: #2a353a;
    --transp_b:rgba(0,0,0,0.25);

    --font_main:"Outfit";
    /* --font_head: "Josefin Sans", Helvetica, Arial, sans-serif; */
}

/* Globals */
html {border-top:10px solid var(--accent);}
body {background:var(--background); background-image:url("/images/temp/starbg.png"); color:var(--offwhite); font-family:var(--font_main); font-size:12px;}
a {color:var(--accent_gold);}
.larger {font-size:1.1em; font-weight:500;}
.list-2 {columns:2;}

/* Header */
header {height:128px; width:45%; margin:auto;margin-top:2em; text-align:center; position:relative;}
    header a {display:inline-block; width:100%; height:125px; margin:auto; background:url("/images/temp/banner.png") no-repeat center center; background-size:contain;}
    header span {position:absolute; right:0; padding-right:130px; text-align:right; font-size:12px; font-style:italic; text-transform:uppercase; letter-spacing:1px; font-weight:500;}

/* Container */
#container {background:transparent; width:45%; padding: 5em 0.2em 1.5em 0.2em; position:relative; margin:auto; display:flex;}

    /* Sidebar */
    #sidebar {max-width:15%; min-width:10%; margin-right:5em;}

        .sidebar-widget {margin-bottom:3em; position:relative; }
        #sidebar h6 {color:var(--offwhite); font-size:1.2em; margin:0; padding:0.2em 0.5em;}
            .sidebar-widget.alt h6 {text-align:right;}
            .sidebar-widget h6::before {content:"\25B6"; margin-right:0.2em;}
            .sidebar-widget.alt h6::before {content:"";}
            .sidebar-widget.alt h6::after {content:"\25C0"; margin-left:0.2em;}
        .sidebar-widget-c {border:1px solid black; border-width:1px 3px 3px 1px; background:var(--offblack) url("/images/temp/contentbg.png");}
            .sidebar-widget-c ul {padding:0.2em 0.5em 0.2em 1.5em; list-style:none;}
        #sidebar li:hover {list-style-type:"\25B6 "; color:var(--accent_gold)}
        #sidebar .active {color:var(--offwhite);}
    
    /* Content */
    #content {width:80%;}
        #content h1 {border-bottom:1px dotted;}
        .content-box {position:relative; background:var(--offblack) url("/images/temp/contentbg.png"); border:1px solid black; border-width:1px 5px 5px 1px; padding:0.5em; margin-bottom:2em;}
            .content-box-header {background:var(--accent); padding:0.5em; font-size:1.2em; color:var(--offwhite); font-weight:700; margin:-0.5em -0.5em 0 -0.5em; border:1px solid black;}
        #content p.larger {line-height:1.5em;}
        #content li {margin-bottom:0.5em;}
        .content-flex {display:flex; flex-grow:1; gap:1em;}
        .content-flex .content-box, .content-flex .content-intro {width:50%;}

/* Footer */
footer {width:60%; display:flex; gap:1em; box-sizing:border-box; padding:1em 5em; margin:auto; border-top:1px dotted; border-bottom:1px dotted;}
footer div:first-child {border-right:1px dotted;}
footer div:last-child {width:15%; text-align:center; padding-left:5em;}


/* Specific widgets */
    /* Floater */
    .floater {position:absolute; bottom:-32px; right:-32px;  width:64px; height:64px; z-index:5; background-size:cover;}

    /* Currently Doing */
    .currently {list-style-type:none; padding:0.2em 8em 0.2em 1.5em; max-height:250px; overflow-y:auto;}
        .currently li {margin-bottom:0.5em;}
    /* External links to other sites */
    .extlink {height:16px; width:16px; display:inline-block; background-image:url("/images/socials.png")}

/* Specific fixes */
    /* Background fade */
    #content, .sidebar-widget h6, footer {background: linear-gradient(to right,  #2f3e4600 0%,#2f3e46 5%,#2f3e46 95%,#2f3e4600 100%);}

    /* Page splash images */
    #about header {width:90%;}
    #about header a {background:url("/images/temp/splash_about.png") no-repeat center center; height:125px; background-size:contain;}
    #about #sidebar {}
        #about #sidebar .sidebar-widget {}
    #about #container {padding-top:3em; width:55%;}
    #about #container .flexer {display:flex; gap:2em; flex-wrap:wrap;}
    #about .about-img {width:378px; height:537px; background-size:contain; margin:auto; margin-top:4em;}
        .about-img.human {background-image:url("/images/temp/about_human.png")}
        .about-img.dragon {background-image:url("/images/temp/about_dragon.png"); background-position:center; background-repeat:no-repeat;}
    #about button {width:49.5%; background:var(--offblack); color:var(--offwhite); border:0;}
    #about button.active {background:var(--accent)}

    /* About flex */
    #about .flexer #content, #about .flexer .about-img-box, #about .flexer .content-box {flex:1 1 160px;}






    /* MUSICBEE LAYOUT */
    #musicbee {background:black; margin:0;}
    #musicbee header {display:flex; z-index:5; box-sizing:border-box; height:320px; max-height:320px; position:fixed; top:0; left:0; gap:3em; justify-content:center; box-sizing:border-box; padding:2em 10em; margin-top:0; height:auto; width:100%; background:black;}
        #musicbee dd {padding:0; margin:0 0 0.2em 0;}
    #musicbee header .header-info {display:flex; flex-direction:column; max-width:200px;}
        .album_art {display:block; height:200px; width:200px; background-size:cover; margin:auto; margin-bottom:1em;}
        /* #musicbee header .header-info span {display:inline-block;} */
        #musicbee header span {text-align:initial; font-style:initial; position:relative; right:0; padding:0;}
        #musicbee .header-review {width:600px; padding:1em 1em; overflow-y:auto; height:254px;}
        #musicbee .header-review a  {display:inline-block;height:auto; width:auto;background:none;}
    #musicbee #carousel {display:flex; justify-content:center; margin-top:321px; gap:2em; flex-direction:row; clear:both; flex-wrap:wrap;}
        #musicbee #carousel .item {position:relative; color:var(--offwhite); text-align:center; max-width:200px;}
        #musicbee #carousel .item div {display:block; width:200px; height:200px; background-image:url("../fansites/ost_Devilish.png"); background-repeat:no-repeat; background-position:center center; background-size:cover; margin-bottom:0.5em}
    #musicbee footer {position:fixed; display:grid; bottom:0; left:0; z-index:5; width:100%; box-sizing:border-box; height:50px; text-align:center; border:0; background:black;}