/* 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. 
 */

body {
    background-color: #000000;
    word-wrap: break-word;
    margin: 0;
    hyphens: auto;
    font-family: "IBM Plex Sans", sans-serif;
    font-variant-ligatures: common-ligatures;
    background-image: url(https://cdn.schlagma.de/img/dot-white.svg);
    display: grid;
    grid-template-rows: 1fr;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all .4s ease 0s;
    color: #f6f6f6;
    overflow: hidden;
}

.light {
    color: #000000 !important;
}

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

header .wrapper {
    margin: auto;
    width: calc(100% - 3rem);
    max-width: 80rem;
    font-size: 1.2rem;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 14rem;
}

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

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

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

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

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

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

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

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

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

header .wrapper img {
    width: 100%;
    border-radius: 50%;
    border: 3px solid;
}

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

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

#lebenslauf,
#email {
    padding: 1.5rem 2rem;
    color: #000000;
    position: absolute;
    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: #005eb8;
}

#email p a:hover {
    border-bottom: 1px dotted #005eb8;
}

#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 {
    width: 100%;
    height: 3rem;
    border-top: 1px solid rgba(255,255,255,.2);
    font-size: .9rem;
    transition: all .4s ease 0s;
    position: absolute;
    bottom: 0;
    background: #f6f6f6;
    color: #000000;
    box-shadow: rgba(0,0,0,.4) 0 0 .2rem;
    transform: translateY(100%);
    text-align: center;
}

footer .wrapper {
    margin: 0 auto;
    max-width: 80rem;
    padding: 0 1.5rem;
}

/*footer .left {
    width: calc(50% - 1.5rem);
    padding-top: .75rem;
    float: left;
    text-align: left;
}*/

footer .right {
    /*width: calc(50% - 3rem);
    float: right;*/
    width: calc(100% - 3rem);
    padding: .8rem 0 0 1.5rem;
}

footer a {
    color: #000000;
    text-decoration: none;
    transition: all .4s ease 0s;
}

footer a:hover,
footer a:focus,
footer a:active {
    border-bottom: 1px dotted #000000;
}

@media screen and (min-width: 621px) and (max-width: 1200px) {
    #lebenslauf,
    #email {
        width: 25rem;
    }
}

@media screen and (max-width: 620px) {
    header .wrapper h1 {
        font-size: 2.5rem;
    }

    #lebenslauf,
    #email {
        width: 15rem;
    }

    .lebenslaufGrid {
        grid-template-columns: 3rem 1fr;
    }
}

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

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