/*******************************/
/* MY BODY IS READY */
/*******************************/

html, body{
    width:100%;
    height:100%;
    margin:0;

    font-family: 'Merriweather', serif;
    font-weight: 300;
    font-size: 18px;

    scroll-behavior: smooth;
}
body{
    background:#fff;
    color:#000;
    transition: background 0.5s ease-in-out,
                color 0.5s ease-in-out;
}
body[font_family=sans_serif]{
    font-family: 'Open Sans', sans-serif;
}
body[font_family=serif]{
}



/*******************************/
/* DARK MODE */
/*******************************/

body[dark_mode=yes]{
    background:#303035;
    color:#fff;
}
body[dark_mode=yes] hr{
    border-color: #fff;
}

body[dark_mode=yes] .article-summary{
    color:#fff;
}
body[dark_mode=yes] #reading_time > #clock_icon{
    background-image: url(assets/clock_dark.png);
}

body[dark_mode=yes] #sidebar{
    background: #505055;
    color:#fff;
}
body[dark_mode=yes] #sidebar_tabs > div{
    background: #505055;
    color:#fff;
}

body[dark_mode=yes] .littlefoot{
    --button-background-color: #606065;
    --button-active-background-color: #aaa;
    --button-text-color: #bbb;

    --popover-background-color: #111;
    --popover-scroll-indicator-color: #bbb;
    --popover-text-color: #eee;
}

body[dark_mode=yes] #content a:not(.nutshell-expandable){
    color: hsl(0, 100%, 70%);
}
body[dark_mode=yes] #content a:not(.nutshell-expandable):hover{
    color: hsl(0, 100%, 80%);
}

body[dark_mode=yes] .nutshell-bubble-overflow-close{
    color: #fff;
}
body[dark_mode=yes] .nutshell-ball-up, body[dark_mode=yes] .nutshell-ball-down{
    background-color: #fff !important;
}


/*******************************/
/* LITTLEFOOTNOTES */
/*******************************/


.littlefoot{
    /* A gray square moved up */
    top: -0.5em;
    left: -0.15em;
    --button-border-radius: 0px;
    --button-padding: 0px 0.4em;
    --button-margin: 0px;
    --button-background-color: #ddd;
    --button-active-background-color: #aaa;
    --button-text-color: #888;
}
.littlefoot__popover{
    text-align: justify;
}
/*
What the hell? Bug with Littlefoot: when resize window
before it's fully loaded, the LF wrapper gets all screwy.
Hack fix, I do not understand.
*/
.littlefoot__wrapper{
    max-width: none !important;
}
/*
Littlefoot Bug: wrap around to next line, it breaks off.
*/
@media not print {
    .littlefoot--print {
        opacity: 0;
        display: inline !important;
    }
}

/*******************************/
/* MISC TAG CRAP */
/*******************************/

b,strong{
    font-weight:900 !important;
}
hr{
    /*border: none;
    border-top: 3px dotted #b9b9b9;
    margin: 2.5em auto;*/
    border: none;
    border-top: 3px dashed #333;
    margin: 3.5em auto;
    position: relative;
    left: -500%;
    width: 1000%;
}
.footnotes-sep{
    display: none;
}
iframe{
    border: 1px solid #ddd;
}
a{
    color: hsla(0, 80%, 60%);
    transition: color 0.1s;
}
a:hover{
    color: hsla(0, 80%, 70%);
}
a.black-link{
    color: inherit;
    opacity: 1.0;
}
a.black-link:hover{
    opacity: 0.5;
}
p{
    margin: 1.8em 0;
}
#content > p{
    text-align: justify;
}
span.light{
    opacity:0.45;
}

ol,ul{
    padding-left: 1em;
}
p + ul{
    margin-top: -1em;
}
ul ul{
    margin-top: 0.5em;
}
li{
    margin-bottom: 0.5em;
}

blockquote{
    margin-right: 0;
}
blockquote, .nutshell-bubble blockquote{
    border-left: 5px solid rgba(128,128,128,0.4);
    margin-left: 0;
    /*padding-left: 2em;*/
    padding: 0px 1em 0px 1.5em;
    margin-top: 2em;
}
blockquote > p, .nutshell-bubble blockquote > p{
    margin: 1em 0;
}
img{
    text-align: center;
}
img + em{
    display: block;
    text-align: center;
}

img.mini{
    width: 300px;
    margin: 0 auto;
    display: block;
    border: none !important;
}
img.img-splash{
    width: 640px;
    display: block;
    border: none !important;
}
video{
    max-width: 100%;
}

span.decision-point{
    background: #2db537;
    padding: 0.15em 0.25em;
    border-radius: 0.3em;
    font-family: Arial;
    font-weight: bold;
    color: white;
}


.nutshell-bubble-overflow-section > div p{
    margin: 1em 0;
}
.nutshell-bubble blockquote{
    margin-top: 1em;
}
.nutshell-bubble{
    display: block; /* to not screw with text-justify */
}

s{
    text-decoration-thickness: 0.1em;
}

/*******************************/
/* HEADER */
/*******************************/

#header{
    position: relative;
    width:100%;
    font-weight: 900;
    font-size: 60px;
    color:#000;
    text-align: center;
    overflow: hidden;
    animation: header-background 8s linear infinite;
}
@keyframes header-background {
    0% {
        background-color: #41898D;
    }
    50% {
        background-color: #91237A;
    }
    100%{
        background-color: #41898D;
    }
}
#header #splash_image{
    position: absolute;
    width: 100%;
    height: 100%;
}
#header > #header_words{
    color: #fff;
    position: relative;
    top: 0;
    width: 100%;
    overflow: hidden;
}
#header > #header_words > #title{
    line-height: 1em;
}
#header > #header_words > #subtitle{
    font-weight: 600;
    font-size: 25px;
    margin-top: 10px;
}
#header a{
    color:#fff;
    position: relative;
    transition: top 0.1s;
    top:0px;
}
#header a:hover{
    color:#fff;
    top:-2px;
}

/* FOR FRONTPAGE ONLY */
#header.frontpage{
    height:500px;
}
#header #dancing{
    position: relative;
    top:20px;
}
#header #p1-cat, #header #p2-banner{
    position: relative;
    height:100%;
    opacity: 0.75;
}
#header #p3-banner{
    position: relative;
    height:100%;
    opacity: 0.5;
}
#header > #header_words{
    position: absolute;
    top: 355px;
    text-shadow: -3px 0px 0px rgba(255,0,0,0.35), 3px 0px 0px rgba(0,0,255,0.35);
}
#crt_lines, #nb--crt_lines{
    background: url(../media/splash/crt_lines.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-size: 100% 100%;
}
#static, #nb--static{
    background: url(../media/splash/static.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-size: 100% 100%;
    background-position: 0px 250px;
}

/* FOR ARTICLE */
#header.chapter{
    height:300px;
}
#header.chapter > #header_words, #nb--words{
    text-shadow: -4px 0px 0px rgba(255,0,0,0.35), 4px 0px 0px rgba(0,0,255,0.35);
}
#header.chapter > #header_words{
    position: absolute; top: 55px;
}
#header.chapter > #header_words > #title{
    font-size: 143px;
}
#header.chapter > #header_words > #subtitle{
    font-size: 40px;
    margin-top: -10px;
}





/*******************************/
/* NEXT BUTTON */
/*******************************/

#next_button{
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 640px;
    font-size: 90px;
    text-align: center;
    height: 150px;
    line-height: 150px;
    animation: header-background 8s linear infinite;

    position: relative;
    top:0;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.4);
    border-radius: 50px;
    transition: top 0.5s ease-in-out, box-shadow 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
#next_button:hover{
    top: -10px;
    box-shadow: 0px 20px 30px rgba(0,0,0,0.2);
    border-radius: 10px;
}
#nb--crt_lines{
    height: 100%;
    background-size: 100% 100%;
}
#nb--words{
    color:#fff;
    position: absolute;
    width: 100%;
}

.unfinished{
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(100%) opacity(50%);
}


/*******************************/
/* signup thing */
/*******************************/

@media (max-width: 770px) {
    .signup_iframe{
        width: 100%;
        height: 300px;
    }
}

/*******************************/
/* CHAPTER NAVIGATION */
/*******************************/

#chapter_nav{
    background: rgba(128,128,128,0.1337);
    overflow: hidden;
}
#chapter_nav #chapter_nav_centered{
    width:656px;
    margin:0 auto;
    overflow: hidden;
    text-align: center;
}
#chapter_nav a{
    cursor: not-allowed;
    text-decoration: none;
}
#chapter_nav a > div{
    float: left;
    width: 120px;
    padding: 11px 5px 13px 5px;
    font-size: 16px;
    color: rgba(128,128,128,0.8);
    border-left: 1px solid rgba(128,128,128,0.8);
    height: 40px;
    transition: background 0.2s;
    background: rgba(255,255,255,0);
}
#chapter_nav a.live:hover > div{
    cursor: pointer;
    background: rgba(255,255,255,0.7);
}
#chapter_nav a > div[selected]{
    font-weight: 900;
    background: #fff;
}

/*******************************/
/* THE ACTUAL CONTENT! ! ! ! ! */
/*******************************/

#content{

    position: relative;

    width: 640px;
    margin: 68px auto 68px auto;

    line-height: 1.8em;

    /*text-align: justify; / TOTO MAYBE ??? */

}

.scroll-anchor{
    position: relative;
    top: -1em;
}

#content p img{
    max-width: 100%;
    border: 2px inset rgba(128,128,128,0.1337);
}

.inline-icon{
    height: 2em;
    border: none !important;
    position: relative;
    top: 0.5em;
}

.nutshell-bubble-overflow-embed-button img{
    border: none !important;
}

/*******************************/
/* ARTICLE SUMMARY VIEW */
/*******************************/

.article-summary{
    color: #000;
    position: relative;
    width: 638px;
    min-height: 120px;
    border: 1px solid #ddd;
    overflow: hidden;
    top:0;
    margin-bottom:0.75em;

    transition: top 0.1s ease-in-out,
                color 0.5s ease-in-out;
}
.article-summary:hover{
    top:-5px;
}
.article-summary #article-thumb{
    float:left;
    width: 240px;
    height: 120px;
    background-size: auto 100%;
    background-position: 50% 50%;
}
.article-summary #article-desc{
    width: 370px;
    float: right;
    padding-top: 0.5em;
    padding-right: 10px;
    font-size: 0.9em;
    line-height: 1.5em;
}
.article-summary #article-title{
    text-decoration: underline;
}
.article-summary #article-metadata{
    opacity: 0.45;
}



/*******************************/
/* ARCHIVE */
/*******************************/

.archive-year{
    text-align: center;
    font-size: 30px;
    margin-top: 45px;
}

/*******************************/
/* READING TIME */
/*******************************/

#reading_time{
    position: fixed;
    right: 10px;
    bottom: 13px;
    text-align: center;
    z-index: 999;
}
#reading_time > #clock_icon{
    width:40px; height:40px;
    background-size: 480px;
    background-image: url(assets/clock.png);
    display: inline-block;
}
#reading_time > #clock_label{
    font-size:12px;
    text-align: center;
    width:100%;
    position: relative;
    top: -4px;
}

/*******************************/
/* SIDEBAR & ITS TABS */
/*******************************/

#return_to_content{
    position: fixed;
    width:100%; height:100%;
    /*background: linear-gradient(90deg, rgba(128,128,128,0) 0%, rgba(128,128,128,0.3) 100%);*/
    background: rgba(0,0,0,0);
    z-index: 101;
    display: none;
}

#everything_container{
    width:100%;
    /*transition: width 0.3s ease-in-out;*/
    overflow-x: hidden; /* those BIG <hr>s */
}
#sidebar{
    font-size: 0.8em;

    position: fixed;
    right: -200px;
    width: 200px;
    height: 100%;
    background: #e8e8e8;
    z-index: 103;

    transition: right 0.3s ease-in-out,
                background 0.5s ease-in-out,
                color 0.5s ease-in-out;
}
#sidebar > div{
    width:160px;
    margin:20px;
}

body[sidebar_state=open] #return_to_content{
    display: block;
}

/*body[sidebar_state=open] #everything_container{
    width: calc(100% - 200px);
}*/
body[sidebar_state=open] #sidebar{
    right: 0px;
}
body[sidebar_state=open] #sidebar_tabs{
    right: 55px;
}

#sidebar a{
    color:inherit;
}
#sidebar a:hover{
    opacity:0.5;
}

#sidebar_tabs{
    font-size: 16px;
    position: fixed;
    right:-145px;
    top: calc(50% - 100px);
    z-index: 102;

    transition: right 0.3s ease-in-out,
                background 0.5s ease-in-out,
                color 0.5s ease-in-out;
}
#sidebar_tabs > div{
    background: #e8e8e8;

    width:200px;
    height:45px;
    margin-bottom:5px;

    left: 0px;
    position: relative;

    cursor: pointer;
    line-height: 45px;

    transition: left 0.22s ease-in-out,
                background 0.5s ease-in-out,
                color 0.5s ease-in-out;
}
#sidebar_tabs > div:hover{
    left: -145px;
}
#sidebar_tabs > div > div{
    width:40px;
    height: 40px;
    float:left;
    margin: 2.5px 10px 2.5px 5px;
    background-size: 100%;
    transition: opacity 0.1s ease-in-out;
    opacity: 0.7;
}
#sidebar_tabs > div:hover > div{
    left: 0px;
    opacity: 1.0;
}
#tab_toc > div{ background-image: url(assets/icons/toc.png); }
#tab_style > div{ background-image: url(assets/icons/style.png); }
#tab_translations > div{ background-image: url(assets/icons/translations.png); }
#tab_share > div{ background-image: url(assets/icons/share.png); }
#tab_sub > div{ background-image: url(assets/icons/subscribe.png); }
#tab_support > div{ background-image: url(assets/icons/support.png); }

#sidebar > #panel_toc{
    width: 180px;
    margin-right: 0px;
    height: 100%;
    margin-top: 0px;
    overflow-y: scroll;
}
ul#toc_list{
    font-size: 0.9em;
    padding-left: 0;
    list-style-type: none;
    padding-right: 10px;
    padding-right: 1em;
}
ul#toc_list li{
    margin-bottom:0.33em;
}

input#submit{
    cursor: pointer;
    margin-top: 5px;
    background: #555;
    color: #fff;
    border: none;
    border-radius: 5px;
    transition:all 0.1s ease-in-out;
    position: relative;
    top:0;
}
input#submit:hover{
    top:-1px;
    background: #777;
}



/*******************************/
/* FOOTER */
/*******************************/

.NEXT_ARROW{
    height:1em;
    position:relative;
    display:inline-block;
}
.NEXT_ARROW img{
    position: absolute;
    height: 150px;
    border: none !important;
    max-width: none !important;
}

#footer{
    width: 100%;
    overflow: hidden;

    background: #222;
    color: #fff;

    padding: 2em 0 800px 0;
    /*height: 9em;*/
    text-align: justify;

    line-height: 1.5em;
    font-size: 18px;
}
#footer #footer_content{
    width: 640px;
    margin: 0 auto;
}
#footer p{
    margin: 1.3em 0;
}
#footer blockquote{
    margin-top: 1em;
    color: #888;
    font-size: 0.8em;
    text-align: left;
}
#footer a{
    color: hsl(0, 100%, 70%);
    transition: color 0.1s;
}
#footer a:hover{
    color: hsl(0, 100%, 80%);
}
#post_credits{
    width: 640px;
    margin: 0 auto;
    font-size: 1em;
    line-height: 1.7em;
    padding-bottom: 200px;
    padding-top: 20px;

    font-size: 0.8em;
}
#post_credits p{
    margin: 1.3em 0;
}

/*******************************/
/* ORPHEUS */
/*******************************/

.orpheus-flag {
    position: absolute;
    top: -118px;
    left: 20px;
    display: block;
    width: 140px;
    transform-origin: top left;
    z-index: 9999;
}
.orpheus-flag img {
    width:100%;
}
.orpheus-flag:hover {
    background:none;
    animation:orpheus-flag-wave .3s ease-in-out infinite
}
@keyframes orpheus-flag-wave {
    0% {
        transform:rotate(0)
    }
    50% {
        transform:rotate(-3deg)
    }
    100% {
        transform:rotate(0)
    }
}




/*******************************/
/* MOBILE "FRIENDLY" */
/*******************************/

/* Header should be taller + 50px; */
@media (max-width: 880px) {
    #header.frontpage{
        height: 550px;
    }
    #header.chapter{
        height: 430px;
    }
    #header.chapter > #header_words{}
    #header.chapter > #header_words > #title{
        line-height: 120px;
    }
    #header.chapter > #header_words > #subtitle{
        margin-top: 0px;
    }
}
@media (max-width: 500px) {
    #header.frontpage{
        height: 600px;
    }
}
.chapter-nav-phone{
    display: none;
}
#chapter_nav_centered > a:first-child > div, #chapter_nav_centered > a:last-child > div{
    line-height:41px;
}
@media (max-width: 660px) {

    /* Different chapter navigation, simpler */
    .chapter-nav-desktop{
        display: none;
    }
    .chapter-nav-phone{
        display: inline;
    }
    #chapter_nav #chapter_nav_centered {
        width: 360px;
    }
    #chapter_nav_centered > a > div{
        line-height:41px;
    }
    #chapter_nav a > div {
        width: 60px;
        padding: 5px;
    }

    /* SIdebar tabs don't pop out */
    #sidebar_tabs > div:hover{
        left: 0px;
    }
}

@media (max-width: 767.98px) {
    /* Squish littlefoots to the left a bit to accomodate the sidebar */
    .littlefoot__content {
        padding-right: 70px;
        font-size: 1.2em;
        text-align: left;
    }
}

@media (max-width: 770px) {
    #content{
        width: calc(100% - 80px);
    }
    #sidebar_tabs{
        top: auto;
        bottom: 80px;
    }
    #reading_time > #clock_label{
        background: #fff;
        border-radius: 20px;
    }
    body[dark_mode=yes] #reading_time > #clock_label{
        background: #303035;
    }
    #next_button{
        width: 100%;
        height: 160px;
        line-height: 80px;
        padding: 40px 0;
    }
    #footer #footer_content{
        width: calc(100% - 80px);
    }
    #post_credits {
        width: calc(100% - 80px);
    }
}