html, html *{
    scroll-behavior: smooth;
}

html{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #18181A ;
}

body{
    /*width: 100%;*/
    max-width: 950px;
    min-width: 770px;
    height: 100%;
    font-family: Courier !important;
    background: #18181A ;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*background-image: url("../images/digital-flowing-particles-technology-background_1017-23617.jpg");*/
    /*background-size: cover;*/
}

#main_header{
    width: 100%;
    /*height: 55px;*/
    padding: 0px 15px;
    background-image: url("../images/abstract-technology-ai-concept-technological-cooperation-human_36402-507.jpg");
    background-size: cover;
    background-position: top;
    flex-grow: 0;
    flex-shrink: 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    font-size: 2.2em;
    color: white ;
}

#main_wrapper{
    /*width: 950px;*/
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #18181A ;
}

.content_header{
    font-size: 1.8em ;
    padding: 0 10px ;
    /*background-image: url("../images/abstract-particle-blue-lines-technology-background_1017-23554.jpg");*/
    /*background-size: cover;*/
    /*color: black;*/
    color: black;
    /*padding: 10px;*/
}

.content_wrapper{
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 0 10px ;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

#sidebar{
    width: 180px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-size: 1em;
    overflow: auto;
}
#sidebar header{
    font-size: 1.5em;
}
#sidebar li {
    margin-top: 10px;
}
#sidebar li li {
    margin-top: 0px;
    margin-left: 10px;
}
#sidebar a{
    color: black;
    text-decoration: none;
}
#sidebar a:hover{
    text-decoration: underline;
}
#sidebar .active{
    background: #18181A;
    color: white !important;
}

.content{
    height: 100%;
    margin-top: -5px;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
}

h1, h2, h3, h4 {
    font-weight: bold;
}

.course_section{
    padding-top: 0px
}
.course_section h2{
    font-size: 16px;
}

section{
    /*margin-top: 2em;*/
}
section > header > h1{
    border-top: 1px solid black ;
    font-size: 2.5em;
    /*margin-top: 10px ;*/
}
section > header > h1 + p{
    margin-top: 2em;
}

article {
    margin-bottom: 40px;
}
article > h1{
    font-size: 1.7em;
    padding-top: 5px;
    margin-bottom: 0.5em;
}
article > h1 ~ h1 {
    margin-top: 2em;
}
article h2 {
    margin-top: 1.5em;
    font-size: 1.2em;
}
article h3 {
    font-weight: normal;
    margin-top: 1.5em;
    font-size: 1.1em;
}

code{
    /*font-size: 1.2em ;*/
    font-weight: bold;
    color: inherit;
}

pre code{
    font-size: 0.9em !important;
    font-weight: inherit;
}

p{
    margin-top: 0px;
}

.file_name{
    position: relative;
    top: 0.65em;
    display: block;
    background: antiquewhite;
    font-weight: bold;
    padding: 0 3px ;
}

.tip{
    padding: 10px ;
    background: #F5F5F5;
    font-size: 0.95em;
    font-style: italic;
}
.tip::before{
    /*html: 'Tip: '*/
}

.hilighted{
    /*background: oldlace;*/
    padding: 5px;
    /*background: floralwhite;*/
    background: whitesmoke;
    /*background: linen;*/
}

.shiny{
    /*background: oldlace;*/
    padding: 5px;
    background: floralwhite;
    border: 1px solid black;
    /*background: whitesmoke;*/
    /*background: linen;*/
}

.important{
    padding: 10px ;
    border: 1px solid lightgray;
    background: antiquewhite;
    margin-bottom: 10px ;
    /*font-style: italic;*/
    line-height: 24px ;
}

.danger{
    background: lightpink;
}

.console_output{
    color: greenyellow;
    background: black;
    padding: 0.5em;
}
.console_output + .console_output{
    padding-top: 0em ;
}

.html_test{
    border: 1px solid darkgray;
    border-radius: 3px;
}

.nav-exo{
    color: darkgray;
}

.nav-tp{
    color: darkgray;
    text-decoration: underline;
}

.overlay{
    position: absolute;
    z-index: 500;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    opacity: 0.8;

    display: flex;
    justify-content: center;
    align-items: center;

    background: lightgray;
    color: black;
    font-size: 1.5em;
}

.parameter{
    color: darkgrey;
}