/* MIT License
 * 
 * Copyright (c) 2019 Marc Schlagenhauf
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE. 
 */

:root {
    --theme-color: #cc1122;
    --link-color: #005EB8;
    --link-color-dark: #004b93;
    /*--theme-color: #1E7832;
    --link-color: #1E7832;*/
}

body {
    font-family: "IBM Plex Sans", sans-serif;
    hyphens: auto;
    word-wrap: break-word;
}

.container {
    padding-right: var(--bs-gutter-x,2rem);
    padding-left: var(--bs-gutter-x,2rem);
}

* {
    scrollbar-color: var(--theme-color) #dfdfdf;
}

code, pre {
    font-family: "IBM Plex Mono", monospace;
    font-size: .95rem;
}

p {
    margin: 0 0 1rem 0;
}

header nav {
    padding: 0 !important;
    background-color: #000000;
    color: #f6f6f6;
    border-bottom: 1px solid var(--theme-color);
}

header nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
}

header nav ul li {
    padding: 0;
    margin: 0;
}

header nav ul li a {
    color: #f6f6f6 !important;
    display: inline-block !important;
    padding: .75rem 1rem !important;
    cursor: pointer;
    border-right: 1px solid #333333;
    transition: all .4s ease 0s;
    text-decoration: none;
}

header nav ul li:first-of-type a {
    border-left: 1px solid #333333;
}

header nav ul li a:hover,
header nav ul li a.active {
   background-color: var(--theme-color);
}

#breadcrumbs {
    margin-top: 3rem;
    background-color: #f8f8f8;
    border-bottom: 1px solid #dfdfdf;
}

#breadcrumbs div {
    padding: .5rem 1.5rem;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
}

#breadcrumbs div a {
    color: #808080;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}

#breadcrumbs div a:hover {
    border-color: #808080;
}

#breadcrumbs svg path {
    fill: #808080;
}

#background {
    background-color: #000000;
    word-wrap: break-word;
    margin: 0;
    padding-top: 3rem;
    background-image: url(https://cdn.schlagma.de/img/dot-white.svg);
    display: grid;
    grid-template-rows: 1fr;
    transition: all .4s ease 0s;
    color: #f6f6f6;
    position: absolute;
    width: 100%;
    height: 100%;
    hyphens: none;
}

.light {
    color: #000000 !important;
}

#name {
    display: block;
    width: 100%;
    height: 100%;
    display: grid;
    text-shadow: rgba(0,0,0, .4) 1px 1px .2rem;
}

#name .wrapper {
    margin: auto;
    width: calc(100% - 3rem);
    max-width: 80rem;
    font-size: 1.2rem;
    padding: 1.5rem;
}

#name .wrapper h1 {
    font-size: 3.5rem;
    font-weight: bold !important;
    letter-spacing: 3px;
    margin-top: 0;
    margin-bottom: 1rem;
    transition: all .4s ease 0s;
}

#name .wrapper p {
    margin-bottom: 2.5rem;
    transition: all .4s ease 0s;
}

#name .wrapper p:last-of-type {
    margin-bottom: 1.5rem;
}

#name .wrapper a {
    display: inline-block;
    border: 2px solid #f6f6f6;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    margin-right: .75rem;
    margin-left: .15rem;
    padding: .75rem;
    transition: all .4s ease 0s;
    box-shadow: rgba(0,0,0,.4) 1px 1px .2rem;
    background-color: #000000;
    cursor: pointer;
}

.light #name .wrapper a {
    border-color: #000000;
}

#name .wrapper a:last-of-type {
    margin-right: 0;
}

#name .wrapper a:hover,
#name .wrapper a:focus,
#name .wrapper a:active,
#name .wrapper a.active {
    text-decoration: none;
    outline: none;
    background-color: #f6f6f6;
}

#name .wrapper svg {
    height: 1.5rem;
    position: relative;
    top: -.15rem;
    left: -.15rem;
}

#name .wrapper svg path {
    fill: #f6f6f6;
    transition: all 0.4s ease 0s;
}

#name .wrapper a:hover svg path,
#name .wrapper a:focus svg path,
#name .wrapper a:active svg path,
#name .wrapper a.active svg path {
    fill: #000000;
}

.small {
    font-size: .8rem;
    margin-bottom: .8rem !important;
}

hr {
    clear: both;
    margin: 0 0 1rem 0;
    border: none;
    border-top: 1px solid #d0d0d0;
}

#lebenslauf,
#email {
    padding: 1.5rem 2rem;
    color: #000000;
    position: absolute;
    top: 2.8rem;
    right: 0;
    width: 29rem;
    height: calc(100% - 3rem);
    background: #f6f6f6;
    box-shadow: rgba(0,0,0,.4) 0 0 .2rem;
    transform: translateX(100%);
    transition: all .4s ease 0s;
    overflow-y: auto;
    z-index: 100;
}

#lebenslauf h1,
#email h1 {
    margin: 0 0 1rem 0;
    font-size: 1.75rem;
}

#lebenslauf p,
#email p {
    margin: 0 0 1rem 0;
}

#email p a {
    text-decoration: none;
    color: var(--link-color);
}

#email p a:hover {
    border-bottom: 1px dotted var(--link-color);
}

#lebenslauf .born {
    margin-bottom: 1.5rem;
}

.lebenslaufGrid {
    display: grid;
    grid-template-columns: 6rem 1fr;
    grid-gap: 1rem;
    margin-bottom: 1rem;
}

.lebenslaufGrid hr {
    margin: .3rem 0;
}

.sidebarTitle {
    display: grid;
    grid-template-columns: 1fr auto;
}

.sidebarTitle button {
    display: inline-block;
    border: 2px solid #000000;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    padding: .3rem;
    transition: all .4s ease 0s;
    background-color: #f6f6f6;
    cursor: pointer;
    position: relative;
    top: -.75rem;
    right: -1.25rem;
}

.sidebarTitle button:hover,
.sidebarTitle button:focus,
.sidebarTitle button:active {
    text-decoration: none;
    outline: none;
    background-color: #000000;
}

.sidebarTitle button svg {
    height: 1.2rem;
}

.sidebarTitle button svg path {
    fill: #000000;
    transition: all 0.4s ease 0s;
}

.sidebarTitle button:hover svg path,
.sidebarTitle button:focus svg path,
.sidebarTitle button:active svg path {
    fill: #f6f6f6;
}

#i {
    position: absolute;
    height: 1.2rem;
    width: 1.2rem;
    padding: .75rem;
    bottom: 0;
    right: 0;
    transition: all .4s ease 0s;
    background: #f6f6f6;
    border-top-left-radius: .2rem;
    text-align: center;
    cursor: pointer;
    box-shadow: rgba(0,0,0,.4) 0 0 .2rem;
}

#i svg {
    height: 1.5rem;
    position: relative;
    top: -.15rem;
    left: -.15rem;
}

#i svg path {
    fill: #000000;
}

footer {
    border-top: 2px solid var(--theme-color);
    background: #f8f8f8;
    font-size: .9rem;
}

footer p:last-of-type {
    margin-bottom: 0;
}

footer hr {
    margin: 0;
}

footer a {
    color: #808080;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}

footer a:hover {
    border-color: #808080;
}

footer a svg {
    height: 1.2rem;
    position: relative;
    top: .2rem;
}

main {
    background-color: #ffffff;
    color: #222222;
    margin: 3rem 0;
}

article {
    line-height: 1.5rem;
    text-align: justify;
}

article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
aside h1 {
    clear: both;
    margin: -2rem 0 1.5rem 0;
    padding-top: 3rem;
    font-weight: bold;
}

article h1,
aside h1 {
    font-size: 2rem;
    padding-top: 3rem;
    margin-top: 0;
    margin-bottom: 2rem;
}

article a {
    text-decoration: none;
    color: var(--link-color);
    border-bottom: 1px dotted transparent;
}

article a:hover {
    border-bottom-color: var(--link-color);
}

aside {
    margin-top: 3rem !important;
    line-height: 1.5rem;
}

aside h1 {
    padding-top: 0;
}

aside ul {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    line-height: 1.5rem;
    clear: both;
}

aside ul li a {
    color: #222222;
    text-decoration: none;
    background-color: #f8f8f8;
    display: block;
    padding: .4rem .8rem;
    border: 1px solid #dfdfdf;
    border-top: none;
    font-size: .9rem;
}

aside ul li a:hover {
    background-color: #f0f0f0;
}

aside ul li:first-of-type a {
    border-top: 1px solid #dfdfdf !important;
    border-radius: .25rem .25rem 0 0;
}

aside ul li:last-of-type a {
    border-radius: 0 0 .25rem .25rem;
}

aside ul ul {
    display: none;
}

.hljs {
    padding: .75rem 1.25rem !important;
    border-radius: .4rem;
}

#beitraege .item::before,
#beitraege .item::after {
    clear: both;
    display: block;
    content: "";
}

.item-tag {
    font-size: .9rem;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    background-color: var(--theme-color);
    margin-right: .3rem;
    margin-bottom: .5rem;
    border-radius: .25rem;
    padding: .3rem .4rem;
    line-height: 1rem;
    border: none;
}

.item-tag:hover {
    transition: all .4s ease 0s;
    background-color: var(--link-color-dark);
}


.shariff li,
.shariff li a {
    border-radius: .25rem;
}

img {
    max-width: 100%;
}

figure {
    border: 1px solid #dfdfdf;
    border-radius: .25rem;
    background-color: #f8f8f8;
    margin: 0 1rem 1rem 0;
    display: inline-block;
}

figure img {
    width: 18rem;
    margin: 0;
}

figcaption {
    border-top: 1px solid var(--theme-color);
    padding: .75rem;
}

@media screen and (min-height: 921px) and (max-height: 1000px) {
    #background img {
        max-height: 25rem;
    }
}

@media screen and (min-height: 651px) and (max-height: 920px) {
    #background img {
        max-height: 20rem;
    }
}

@media screen and (min-height: 551px) and (max-height: 650px) {
    #background img {
        max-height: 15rem;
    }
}

@media screen and (max-height: 550px) {
    #background img {
        max-height: 10rem;
    }
}

@media screen and (max-width: 991px) {
    .nav-link {
        display: block;
        width: 100%;
        border: 1px solid #333333;
        margin-top: .5rem;
        border-radius: .25rem;
    }

    ul li:last-of-type .nav-link {
        border-bottom: 1px solid #333333;
    }

    article {
        text-align: left;
    }

    aside {
        display: none;
    }
    
    aside.tags {
        display: inline;
        width: 100% !important;
        padding: 1.5rem 0;
        border-top: 1px solid #dfdfdf;
    }

    #TableOfContents {
        display: none;
    }

    footer .row div {
        margin-top: 1rem;
    }

    footer .row div:first-of-type {
        margin-top: 0;
    }

    #name .wrapper h1 {
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 500px) {
    #name .wrapper h1 {
        font-size: 2rem;
    }
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/ibm-plex-sans/IBMPlexSans-Regular.woff2') format('woff2');
}
  
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/ibm-plex-sans/IBMPlexSans-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/ibm-plex-sans/IBMPlexSans-SemiBold.woff2') format('woff2');
}
  
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: italic;
    font-weight: 700;
    src: url('/fonts/ibm-plex-sans/IBMPlexSans-SemiBoldItalic.woff2') format('woff2');
}