* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: left;
}

:root {

    /*
    --NavBarColor: #053225;
    --CenterColor: none;
    --BackgroundEven: #D7F2BA;
    --BackgroundOdd: #BDE4A8;
    --HighColor: #bde4a8c2;
    --HoverColor: #BDE4A8;

    --TimelineColor: #BDE4A8;
        background-color: whitesmoke;

*/

    /*
    --NavBarColor: gray;
    --CenterColor: #7ad2b9;
    --BackgroundEven: nonw;
    --BackgroundOdd: nonw;
    --HoverColor: #7ad2b9;
    --HighColor: none;
    */

    --NavBarColor: rgb(113, 113, 113);
    --NavFontColor: rgb(36, 36, 36);
    --CenterColor: black;
    --BackgroundEven: none;
    --BackgroundOdd: none;
    --TimelineColor: rgb(136, 206, 244);

    --HoverColor: rgb(24, 156, 227);
    --WrapperColor: rgb(127, 125, 125);
    --HighColor: none;
    --BackgroundColor: rgb(26, 27, 28);
    background-color: var(--BackgroundColor);

    --barheight: 1rem;
    --barbackground: rgb(65, 65, 65);





    /*Timeline*/
    --fak: 0.5;
    --fac: 0.5;


    --vmax_px: 1400px;

    --Navbarheight: 10vh;
    scroll-padding-top: var(--Navbarheight);

    /*old*/
    --TitleColor: #d7f2ba5d;
    /*#041B15;*/
    /*rgb(2, 135, 244);*/
    /* rgba(146, 200, 247, 0.266);*/
    --darkFontColor: black;
    --lightFontColor: rgba(129, 129, 129, 0.958);




}



@font-face {
    font-family: hfont;
    src: url("./fonts/RobotoSlab-VariableFont_wght.ttf");
    font-weight: bold;
}


@font-face {
    font-family: pfont;
    /*src: url("./fonts/Roboto-Thin.ttf");*/
    src: url('./fonts/Roboto-Thin.ttf');
}

html,
body {
    font-size: calc(7px + 0.75vw);
    /*background: url(./images/Herrmann.jpg);*/
    color: white;
    background-color: none;
    background-position: 0, 1000px;
    /*font-family: 'Roboto', sans-serif;*/
    font-family: Arial, Helvetica, sans-serif;
    hyphens: auto;
}


.h1,
.h2,
.h3,
h1,
h2,
h3 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    color: white;
}

.h1,
h1 {
    font-size: 1.5rem;
    font-family: hfont;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    max-width: min(100vw, calc(var(--vmax_px)));
    width: 100%;
    text-align: center;
    background: none;
    color: var(--HoverColor);
    text-align: center;

}




.h2,
h2 {
    font-size: 1.25rem;
    font-family: hfont;
}


.h3,
h3 {
    font-size: 1rem;
    font-family: hfont;
    color: white;
}


p {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    padding: 0rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: white;
    font-size: 1rem;
    font-family: pfont;
    background-color: none;
}

a {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    padding: 0rem;
    text-decoration: none;
    font-family: hfont;
    color: var(--TimelineColor);
}


a:hover,
a:active {
    text-emphasis-color: var(--HoverColor);
    text-decoration: underline;
    /*background: var(--HoverColor);*/
    color: var(--HoverColor);
    text-underline-offset: 0.2rem;
    transition: .25s;
}

ul {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    padding: 0rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: white;
    font-family: pfont;
}

li {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    padding: 0rem;
    padding-left: 0.75rem;
    padding-right: 0.5rem;
    color: white;
    font-family: pfont;
}


/*NAVBAR*/
.navbar {
    background-color: var(--lightFontColor);
    margin: auto;
    position: sticky;
    top: 0;

    z-index: 2;
    width: 100%;
    /*max-width: 100vw;*/
    /*-----------------------------------------*/
    min-height: 10vh;
    max-height: 20vh;
    /*height: var(--Navbarheight);*/

}



.navbar .navbox {
    width: 100%;
    height: 100%;
    max-height: 20vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: none;
}


.navbar .navbox label {
    height: 100%;
    max-height: 10vh;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: none;

}

.navbar .navbox label a {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: none;
}


.navbar .navbox label a img {
    height: 90%;
    max-height: 9vh;
    object-fit: cover;
    background-color: none;
}

.navbar .navbox label a img:hover,
.navbar .navbox label a img:active {
    height: 70%;
    max-height: 7vh;
    /*background: var(--HoverColor);*/
    color: var(--HoverColor);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
    transition: .25s;
}


.navbar .navbox ul {
    height: 80%;
    max-height: 8vh;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-top: 0rem;
    max-width: 100vw;

}

.navbar .navbox ul li {
    display: inline-block;
    line-height: 0vh;
    padding: 0.5rem;
    margin: auto;
}

.navbar .navbox ul li a {
    color: var(--NavFontColor);
    font-size: 2rem;
    /*padding: 700px 13px;*/
    /*font-family: Arial, Helvetica, sans-serif;*/
    /*text-transform: uppercase;*/
}

/*.navbar .navbox ul li a.active,*/
.navbar .navbox ul li a:hover {
    text-emphasis-color: var(--HoverColor);
    text-decoration: underline;
    text-decoration-color: var(--HoverColor);
    /*background: var(--HoverColor);*/
    color: var(--HoverColor);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
    transition: .25s;
}


.container {
    /*max-width: 100vw;*/
    /*-----------------------------------------*/
    width: 100%;
    max-width: min(80vw, var(--vmax_px));
    min-height: 10vh;
    /*background: var(--BackgroundColor);*/
    background: none;
    padding-top: 5vh;
    padding-bottom: 5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: auto;
}

.container#Title {
    width: 100%;
    height: 10vh;
    max-width: none;
    background-color: var(--lightFontColor);
    /*background-image: url("./images/Titlepic3.png");
    background-size: contain;*/
    padding-top: 0vh;
    padding-bottom: 0vh;
    overflow: hidden;
}

.container#Title img {
    max-width: min(100%, var(--vmax_px));
    height: 10vh;
    object-fit: cover;
}



.container:nth-child(odd) {
    background-color: none;
}

.container:nth-child(even) {
    background-color: none;
}

.container#skills {
    /*max-width: 100vw;*/
    /*-----------------------------------------*/
    max-width: min(80vw, var(--vmax_px));
    /*background: var(--BackgroundColor);*/
    background: none;
    padding-top: 5vh;
    padding-bottom: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: auto;
}

/*.container#Title {
    background-color: var(--BackgroundEven);
}*/

.container#navbar {
    flex-direction: column;
}

/*Intro_content*/
.flex_content {
    max-width: min(100vw, var(--vmax_px));
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    background-color: none;
    flex-direction: row;
}

.flex_content:nth-child(odd) {
    background-color: none;
    flex-direction: row;

}

.flex_content:nth-child(even) {
    background-color: none;
    flex-direction: row-reverse;
}





.flex_content .imgbox {
    /*max-width: min(40vw, 400px);*/
    /*max-width: min(40vw, calc(0.4*var(--vmax_px)));*/
    width: 40%;
    height: 100%;
    background-color: none;
    display: flex;
    justify-content: center;
}

.imgbox .cf {
    /*max-width: min(40vw, 400px);*/
    /*max-width: min(40vw, calc(0.4*var(--vmax_px)));*/
    height: 30vw;
    width: 30vw;
    max-width: min(40vw, calc(0.4*var(--vmax_px)));
    max-height: 60vh;
    object-position: 50% 50%;
    background-image: url("./images/projects/espresso.jpg");
    background-size: cover;
    display: flex;
    justify-content: center;
    overflow: hidden;
}


.flex_content .imgbox#about img {
    object-fit: cover;
    object-position: 50% 25%;
    /* even if we dont declare this the image will still be centered */
    height: 80%;
    width: 80%;
    max-width: min(40vw, calc(0.4*var(--vmax_px)));
    max-height: 60vh;
}

.imgbox img {
    object-fit: contain;
    object-position: 50% 50%;
    /* even if we dont declare this the image will still be centered */
    height: 30vw;
    width: 30vw;
    max-width: min(40vw, calc(0.4*var(--vmax_px)));
    max-height: 60vh;

    /*filter: gray;*/
    /* IE6-9 */
    /*-webkit-filter: grayscale(1);*/
    /* Google Chrome, Safari 6+ & Opera 15+ */
    /*filter: grayscale(1);*/
    /* Microsoft Edge and Firefox 35+ */
}

.imgbox video {
    object-fit: contain;
    object-position: 50% 50%;
    /* even if we dont declare this the image will still be centered */
    height: 30vw;
    width: 30vw;
    max-width: min(40vw, calc(0.4*var(--vmax_px)));
    max-height: 60vh;

    /*filter: gray;*/
    /* IE6-9 */
    /*-webkit-filter: grayscale(1);*/
    /* Google Chrome, Safari 6+ & Opera 15+ */
    /*filter: grayscale(1);*/
    /* Microsoft Edge and Firefox 35+ */
}


.flex_content .imgbox#fly {
    /*max-width: min(40vw, 400px);*/
    /*max-width: min(40vw, calc(0.4*var(--vmax_px)));*/
    width: 40%;
    height: 100%;
    background-color: none;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.imgbox#fly img {
    object-fit: cover;
    object-position: 50% 50%;
    /* even if we dont declare this the image will still be centered */
    height: 30vw;
    width: 15vw;
    max-width: min(40vw, calc(0.4*var(--vmax_px)));
    max-height: 60vh;
}

.imgbox#fly video {
    object-fit: cover;
    object-position: 50% 50%;
    /* even if we dont declare this the image will still be centered */
    height: 30vw;
    width: 15vw;
    max-width: min(40vw, calc(0.4*var(--vmax_px)));
    max-height: 60vh;
}



.cf img {
    object-fit: cover;
    object-position: 50% 50%;
    height: 100%;
    width: 100%;
}

img.top {
    align-self: flex-start;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

img.bottom {}

img.top:hover,
img.top:active {
    opacity: 0;
}



.flex_content .imgbox#contain img {
    object-fit: cover;
    /* ----------------------------------- Contain*/
    height: 10%;
    width: 10%;
    max-width: min(40vw, calc(0.4*var(--vmax_px)));
}



.flex_content .txtbox {
    background-color: none;
    width: 60%;
    /*max-height: 60vh;*/
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.flex_content .txtbox h1 {
    background-color: none;
    color: var(--HoverColor);
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    text-align: left;
}





/* Container for skill bars */
.skillcontainer {
    margin: auto;
    width: 70%;
    /* Full width */
    background-color: none;
    /* Grey background */
    display: flex;
    flex-direction: column;
}

.skill {
    width: 100%;
    background-color: none;
    display: flex;
    flex-direction: row;
}

.skill p:nth-child(1) {
    margin-right: auto;
}

.skill p:nth-child(2) {
    margin-left: auto;
}


.skillbar {
    text-align: right;
    /* Right-align text */
    padding-right: none;
    background-color: var(--barbackground);
    ;
    /* Add bottom padding */
    color: white;
    /* White text color */
    height: var(--barheight);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

}

.bar {
    height: var(--barheight);
    background-color: #2196F3;
    width: var(--width);
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}





















/*boxes*/

.block_content {
    width: 100%;
    background-color: none;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: none;
}

.block_content .block {
    max-width: min(50vw, calc(0.5*var(--vmax_px)));
    min-height: 20vh;
    padding: 2vw;
    width: 50%;
    background-color: none;
    margin-top: 2.5vh;
    margin-bottom: 2.5vh;
}

.block_content .block p {
    text-align: justify;
    /*-----------------------------------------*/
    /*left*/
    background-color: none;

}

.block_content .block h2 {
    margin: auto;
    background-color: none;
    text-align: center;
}


/*Center Content*/
.center_content {
    background-color: none;
    margin: auto;
    overflow: hidden;
    width: 100%;
    /*max-width: 100vw;*/
    /*-----------------------------------------*/
    max-width: min(100vw, var(--vmax_px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.center_content img {
    background-color: none;
    height: 10rem;
    width: 10rem;
    margin: 1rem;
    border-radius: 50%;
    object-fit: cover;
}



/*p*/
.center_content p {
    text-align: center;
    margin: auto;
    margin-bottom: 1rem;
    max-width: min(50vw, calc(0.5*var(--vmax_px)));
}

/*FLEXBUTTON*/
.flexed {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 2vh;
    max-width: min(100vw, calc(var(--vmax_px)));
    background-color: none;
    overflow: hidden;
}

.flexed img {
    height: min(10vh, 10vw);
    width: min(10vh, 10vw);
}




/*NEW TIMELINE*/

.timelinecontainer {
    max-width: min(100vw, calc(var(--vmax_px)));
    width: 95vw;
    display: flex;
    flex-direction: column;
    margin-top: 5vh;
    margin-bottom: 5vh;
    justify-content: center;

    background-position: center;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: cover;
    /* Resize the background image to cover the entire container*/
    /*background-color: red;*/
    background-color: none;
}

.wrapper {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: none;

}

.wrapper:nth-child(even) {
    flex-direction: row-reverse;
}

.wrapper:nth-child(even) .textwrapper {
    width: calc(100%*var(--fac));
}

.textwrapper {
    width: calc(100%*var(--fak));
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


.textwrapper h3 {
    padding: 10px 20px;
    width: 80%;
    background-color: var(--NavFontColor);
    margin: auto;
    margin-top: 2vh;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.textwrapper p {
    padding: 10px 20px;
    width: 80%;
    background: var(--WrapperColor);
    margin: auto;
    margin-bottom: 2vh;
    text-align: justify;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.datewrapper {
    width: calc(100%*var(--fac));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: none;
}

.wrapper:nth-child(even) .datewrapper {
    width: calc(100%*var(--fak));
    align-items: center;
    justify-content: flex-end;

}

.datebox {
    background: none;
    margin: 1rem;
    border-radius: 10px;
    color: white;
}


.line {
    width: 4px;
    background-color: #000;
    background: var(--HoverColor);
    position: relative;
    z-index: 1;
}

.line:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    /*border: 3px none;*/
    background: var(--HoverColor);

    transform: translateX(-50%) translateY(-50%);
}




/**/



























/* Dark Grey */


















.footer-content {
    margin: auto;
    max-width: min(100vw, var(--vmax_px));
    height: 3rem;
    background-color: var(--NavBarColor);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.footer-content a {
    font-size: 0.75rem;
    padding: 0.2rem;
    color: white;
    text-decoration: none;
    background-color: none;
}

div.copyright {
    float: left;
    color: white;
    margin-left: 1rem;
    padding-bottom: 5px;
    background-color: none;

}


/*Kontakt-page*/
/*
.container_contact {
width: 100vw;
height: 80vh;
margin-top: 10vh;
background: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
*/
/*
.container_contact img {
    height: max(20vh, 20vw);
    width: max(20vh, 20vw);
    margin: 1rem;
    border-radius: 50%;
    object-fit: cover;
}


.flex_contact {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 2vh;
    max-width: min(100vw, calc(var(--vmax_px)));
    max-height: 50vh;
    background-color: red;
    overflow: hidden;
}

.flex_contact .item {
    background-color: blue;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
}

.flex_contact .item img {
    height: 5%;
    width: 5%;
}
*/

.widepic {
    width: 100%;
    max-height: 10vh;
}

.widepic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container_contact {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--BackgroundColor);
}

.container_contact img {
    height: max(20vh, 20vw);
    width: max(20vh, 20vw);
    margin: 1rem;
    border-radius: 50%;
    object-fit: cover;
}



.flexed_contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 2vh;
    max-width: min(100vw, calc(var(--vmax_px)));
    background-color: none;
    overflow: hidden;
}

.flexed_item {
    max-width: 60vw;
    display: flex;
    flex-direction: wrap;
    justify-content: flex-start;
    align-items: center;
    background-color: none;
}

.flexed_item img {
    height: min(10vh, 10vw);
    width: min(10vh, 10vw);
}



@media (max-width: 1000px) {

    :root {
        --fak: 0.7;
        --fac: 0.3;
    }

    .container {
        max-width: 100%;
        color: green;
    }

    .h1,
    h1 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .flex_content {
        width: 80vw;
        background-color: none;
        flex-direction: column;
        background-color: none;
        margin: 0%;
        justify-content: center;
        align-items: center;
    }

    .flex_content:nth-child(odd) {
        background-color: none;
        background-color: none;
        flex-direction: column-reverse;

    }

    .flex_content:nth-child(even) {
        background-color: none;
        flex-direction: column-reverse;
    }

    .flex_content .txtbox {
        max-width: 100vw;
        width: 80vw;
        background-color: none;
    }


    .block_content .block {
        max-width: 90vw;
        width: 80vw;
        background-color: none;
        margin-top: 2.5vh;
        margin-bottom: 2.5vh;
    }

    .timelinecontainer {
        margin-right: 5vw;
    }




    .datewrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: calc(50%*var(--fac));
    }

    .wrapper {
        width: 100%;
        flex-direction: row-reverse;
    }

    .wrapper:nth-child(even) .textwrapper {
        width: calc(100%*var(--fak));
    }

    .wrapper:nth-child(even) .datewrapper {
        justify-content: flex-end;
        width: calc(50%*var(--fac));
    }




    .center_content p {
        max-width: 80vw;
    }


    .center_content .block_content {
        max-width: min(90vw, calc(0.9*var(--vmax_px)));
        width: 100%;
        flex-direction: column;

    }

    .center_content .block_content {
        max-width: 100vw;
        margin: auto;
        width: 100%;
        background-color: none;
    }

    .center_content .block_content .block {
        max-width: 100vw;
        width: 100%;
        background-color: none;
    }

    .center_content .block_content .block p {
        max-width: 80vw;
    }

}

@media (max-width: 500px) {

    :root {
        --fak: 0.7;
        --fac: 0.3;
    }

    .container {
        max-width: 100%;
        color: none;
    }

    .h1,
    h1 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .flex_content {
        width: 80vw;
        background-color: none;
        flex-direction: column;
        background-color: none;
        margin: 0%;
        justify-content: center;
        align-items: center;
    }

    .flex_content:nth-child(odd) {
        background-color: none;
        background-color: none;
        flex-direction: column-reverse;

    }

    .flex_content:nth-child(even) {
        background-color: none;
        flex-direction: column-reverse;
    }

    .flex_content .txtbox {
        max-width: 100vw;
        width: 80vw;
        background-color: none;
    }


    .block_content .block {
        max-width: 90vw;
        width: 80vw;
        background-color: none;
        margin-top: 2.5vh;
        margin-bottom: 2.5vh;
    }

    .timelinecontainer {
        margin-right: 5vw;
    }




    .datewrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: calc(50%*var(--fac));
    }

    .wrapper {
        width: 100%;
        flex-direction: row-reverse;
    }

    .wrapper:nth-child(even) .textwrapper {
        width: calc(100%*var(--fak));
    }

    .wrapper:nth-child(even) .datewrapper {
        justify-content: flex-end;
        width: calc(50%*var(--fac));
    }




    .center_content p {
        max-width: 80vw;
    }


    .center_content .block_content {
        max-width: min(90vw, calc(0.9*var(--vmax_px)));
        width: 100%;
        flex-direction: column;

    }

    .center_content .block_content {
        max-width: 100vw;
        margin: auto;
        width: 100%;
        background-color: none;
    }

    .center_content .block_content .block {
        max-width: 100vw;
        width: 100%;
        background-color: none;
    }

    .center_content .block_content .block p {
        max-width: 80vw;
    }

}