/* DIN1451 font credit: (c) 2017, Peter Wiegel, www.peter-wiegel.de */
@font-face {
    font-family: 'din1451alt';
    src: url('din1451alt-webfont.woff2') format('woff2');
    local ('sans-serif');
    font-weight: normal;
    font-style: normal;
}

:root {
    color-scheme: light dark;
}



.sidebar {
    width: 3em;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color:#333;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 2.75rem;
}

.sidebar a {
    display: block;
    color: #333;
    padding: 0px;
    text-decoration: none;
}

.sidebar a:hover {
    background-color: #ddd;
    transition: background-color 250ms;
}

.sidebar img {
    max-width: 3rem;
    height: auto;
}

.sidebar img:hover {
    filter: invert(100%);
    transition: filter 250ms;
}

.sidebar ul {
    list-style-type:none;
    margin:0;
    padding:0;
    background-color:#333;
}

.sidebar .back_btn {
    position:absolute;
    bottom:3rem;
}

.main {
    color:light-dark(#5481bc, #fff);
    margin-left:4rem;
    font-family:'din1451alt';
}

.main h1 {
    color:light-dark(#000000, #fff);
    margin-left:-0.25rem;
    padding-left:0.1rem;
    font-size:2.75rem;
    border-bottom: solid 3px light-dark(#000, #fff);
}

.main h2 {
    margin-left:-0.5rem;
    padding-left:0.5rem;
    margin-block:0.5rem;
    font-size:2.25rem;
    display:box;
    width:20rem;
    color:light-dark(#f2f2f2, #23242b);
    background-color:light-dark(#23242b, #f2f2f2);
}

.main ul>ul {
    margin-left:-1.25rem;/* indentation */
}

.main ul li {
    position:relative;
    border-bottom: 1px solid light-dark(#000, #fff);
    background-size:200%;
    background-image:linear-gradient(to right, light-dark(#000, #fff) 50%, light-dark(#fff, #000) 0%);
    background-position:right;
    transition:background-position 250ms ease-out, color 250ms;
    margin-left:-2.5rem;
    list-style:none;
    font-size:1.25rem;
}

.main ul li a {
    display:inline-block;
    width: 100%;
    text-decoration:none;
    color:inherit;
    font-size:1.25rem;
}

.main ul li::first-line, .main ul li a::first-line{
    font-size: 1.75rem;
}

.main ul li::before{
    content:"";
    position: absolute;
    top:0.25rem;
    left:-0.4rem;
    height:1.5rem;
    width:0.25rem;
    background-color:light-dark(#f4df4b, #ff0);
}

.main ul li:hover {
    /*box-shadow: 0 0 2px 5px;*/
    background-position:left;
    color: light-dark(#f2f2f2, #23242b);
}

body {
    background-color: light-dark(#ddd, #23242b);
}
