@font-face 
{ 
    font-family: "PoppinsBold"; 
    src: url("../fonts/Poppins-Bold.ttf"); 
}

/*
@font-face {
    font-family: "InterRegular";
    src: url("../fonts/Inter-Regular.ttf");
}

@font-face {
    font-family: "InterMedium";
    src: url("../fonts/Inter-Medium.ttf");
}

@font-face {
    font-family: "InterSemiBold";
    src: url("../fonts/Inter-SemiBold.ttf");
}

@font-face {
    font-family: "InterBold";
    src: url("../fonts/Inter-Bold.ttf");
}
*/
/*------------Quicksand-------------*/

@font-face {
    font-family: "QuicksandRegular";
    src: url("../fonts/Quicksand/static/Quicksand-Regular.ttf");
}

@font-face {
    font-family: "QuicksandMedium";
    src: url("../fonts/Quicksand/static/Quicksand-Medium.ttf");
}

@font-face {
    font-family: "QuicksandSemiBold";
    src: url("../fonts/Quicksand/static/Quicksand-SemiBold.ttf");
}

@font-face {
    font-family: "QuicksandBold";
    src: url("../fonts/Quicksand/static/Quicksand-Bold.ttf");
}

:root 
{   --white: #FFF;
    --lightGray: #f0f0f0;
    --middleGray: #e5e5e5;
    --darkGray: #999997;
    --darkGrayTransparent: #99999785;
    --buttonBackgroungTransparent: #99999798;
    --black: #000;
    /* --lightGreen: #B0A43C; */
    --lightGreen: #b4474d;
    --middleGreen: #807C5E;
    --darkGreen: #3D3A25;
    --navigationBackground: #fff;
    --runaway: #E34C41;
    --ambient: #A68B4E;
    --logo: #807C5E;

    --h0: 4.6vw;
    --h1: 4.04vw;
    --h2: 1.6vw;
    --h2hover: 1.4vw;
    --h3: 1.15vw;
    --h4: 1vw;
    --li: 1.15vw;
    --lihover: 1.3vw; 
    --p: 0.9vw;
    --phovergross: 1vw;
}

*
{
    margin: 0em ;   
}

body
{   background-color: var(--white);
    /*margin: 2em auto;*/
}

/*---------------------general-styling--------------------------*/

a
{   
    text-decoration: none;
    font-size: var(--p);
    color: var(--darkGreen);
}

#current-page
{    color: var(--middleGray);  }

h1 { 
    font-size: var(--h1);
    font-family: QuicksandBold, Arial, Helvetica, sans-serif;
}

h2 { font-size: var(--h2); }

h3, button{ 
    font-size: var(--h3);
    font-family: QuicksandSemiBold, Arial, Helvetica, sans-serif;
}

li {font-size: var(--li);}

p, td { 
    font-size: var(--p);
    font-family: QuicksandMedium, Arial, Helvetica, sans-serif;
}

/*------------------------Menüleiste-------------------------*/
header 
{   font-family:  QuicksandSemiBold, Arial, Helvetica, sans-serif;
    color:           var(--black); 
    background-color:var(--navigationBackground);
    position: fixed; 
    width:    100%;
    height:   12vh;
    top:      0em;
    z-index:  1;
}

header ul
{   font-family:    QuicksandBold, Arial, Helvetica, sans-serif;  }


header #logo 
{   display:       inherit;
    width:         1.9vw;
    border-radius: 1.5vw;
    margin:        0.7vw;
    /*box-shadow:    0.04vw 0.05vw 0.2vw 0.05vw var(--middleGray);*/

    transition: width 0.3s, margin 0.3s ;
    transition-timing-function: ease-in-out;
}

header:hover #logo
{   width:  2.5vw;
    margin: 0.4vw;
}

#menu-container
{
    display:     flex;
    align-items: center; 
    padding:     0vw 17vw;
}

#menu-items
{
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    width:           65vw;
}

.menu-item:first-child 
{
    display:     flex;
    align-items: center;
    justify-content: center;
    flex-wrap:   nowrap;
    width:       20vw; 
}


.menu-item
{   flex-wrap: wrap;   }

.menu-item ul 
{   display:         flex;
    justify-content: flex-end;
    align-items:     center;
    list-style:      none;
    flex-wrap:       wrap;
    width:           30vw;
}

.menu-item ul li 
{   padding-left: 2em;
    color:        var(--black);
    font-size:    var(--li);
    transition:   color 0.8s, font-size 0.8s;
}

.menu-item ul li:hover
{
    color:     var(--middleGray);
    font-size: var(--lihover);
}

.menu-item ul li:active, .menu-item a:active
{    color: var(--black);  }

#line
{   position: absolute;
    height:   0.7vw;
    bottom:   -0.7vw;
    left:     0em;
    width:    100%;
    color:            var(--darkGrayTransparent);
    background-color: var(--darkGrayTransparent);
}

/*-------------------------------------Mainpart----------------------------------*/

main
{   padding-top: 7em;
    font-family: QuicksandMedium, Arial, Helvetica, sans-serif;
    line-height: 160%;
}



.flex-container
{   display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    overflow-x: hidden;
    width: 100%;
}

.flex-item
{   width: 100%;
    padding: 2em 100%;
    margin: 1em 0em;
    color: var(--black);
    font-family: InterBold, Arial, Helvetica, sans-serif;
}

/*-----------------------------------Überschriften--------------------------------------*/
#title-leistung, #title-praktikum, #title-education
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          10vw;
    font-family:     InterBold, Arial, Helvetica, sans-serif;
}

#title-leistung
{   background-image: url("../img/mountains.png");
    background-repeat: no-repeat;
    background-position: 50% 40%;
}

#title-leistung h1, #title-praktikum h1, #title-education h1
{   font-size: var(--h0);   }


#title-leistung, #title-praktikum, #title-education
{   box-shadow: 0.2vw 0.2vw 1.5vw 0.3vw var(--middleGray);    }

#title-leistung, #title-praktikum, #title-education
{
    transition: height 2s;
}

#title-leistung:hover, #title-praktikum:hover, #title-education:hover
{
    height: 13vw;
}

#title-praktikum
{   background-image:    url("../img/mountains.png");
    background-repeat:   no-repeat;
    background-position: 50% 60%;
}

#title-education
{   background-image:    url("../img/mountains.png");
    background-repeat:   no-repeat;
    background-position: 50% 80%;
}
/*-------------------------------leistungen--------------------------------------*/

#skills
{   display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    width:           60%;
}

#skills section
{   display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    color:  var(--black);
    margin: 3em;
    width:  12vw;
    height:  13vw;
    
    transition: color 1s;
}

#skills section:hover 
{   color: var(--lightGreen);  }

#skills section .icon
{   margin-bottom: 1em;
    width: 5vw;
    transition: width 1s;
}

#skills section:hover .icon
{   width: 6vw;   }

#skills section h3
{   margin-bottom: 0.5em;
    transition:    font-size 1s; 
}

#skills section:hover h3
{   font-size: var(--h3hover);   }

#skills section p
{    transition:  font-size 1s;  }

#skills section:hover p
{    font-size: var(--phovergross);   }

/*---------------------------------Praktika----------------------------------------------*/

.flex-content
{   width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tables
{   width: 55%;
    display: table;
    border-spacing: 2em;
    line-height: 2.5em;
}

.tables td
{   width: 50%;   }

.tables tr .month
{   background-color: var(--lightGray);
    border-radius: 1em;
    transition: background-color 1s, color 0.1s;

    box-shadow: 0.05vw 0.05vw 0.5vw 0.05vw var(--middleGray);
}

.tables tr:hover .month
{
    background-color: var(--lightGreen);
    color: var(--lightGray);  
}



.tables h3
{   display: flex;
    align-items: center;
    justify-content: center;    
    padding: 1em 1em 1em;
}

.tables tr 
{   color: var(--black);
    transition: color 1s;
}

.tables tr:hover
{
    color: var(--lightGreen);
}

/*-----------------------------Footer---------------------------------------*/

footer
{   display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    font-family: QuicksandSemiBold, Arial, Helvetica, sans-serif;
    line-height: normal;
    background-color: var(--navigationBackground);
    margin: 5em 0em;
    height: 3em;
}

footer table
{   margin:        3vh;
    width:         40vw;
    height:        4vw;
    border-radius: 1em;
}

footer td
{   color:          var(--black);
    text-align:     center;
    vertical-align: middle;
}

footer tr:first-of-type td
{   font-size: var(--h3);  }

#line-footer
{   height: 0.7vw;
    width: 100%;
    color: var(--darkGrayTransparent);
    background-color: var(--darkGrayTransparent);
}

footer img
{
    width: 4vw;
    margin-bottom: 0.2em;
}

footer tr td#impressum-link
{   color: var(--black);
    border-radius: 5em;
    transition: background-color 1s;
}

footer tr td#impressum-link:hover
{   color: var(--lightGreen); 
    background-color: var(--lightGray);  
}

/*-----------------RESPONSIVE----------------*/

/*-------- MAX 1400PX DESKTOPS (kleine pcs)-----------*/
@media (max-width:1400px) {
   
    :root 
    {   --h0: 4.9vw;
        --h1: 4.5vw;
        --h2: 2.4vw;
        --h2hover: 2.6vw;
        --h3: 1.8vw;
        --li: 1.8vw;
        --lihover: 2vw; 
        --p: 1.2vw;
        --phovergross: 1.1vw;
    }
    /*-------HEADER---------------*/
    header #logo 
    {   width:  5.5vw;
        height: 5.5vw;
        margin: 1.3vw;
    }

    header:hover #logo
    {   width:  6vw;
        height: 6vw;
        margin: 1vw;
    }

    #menu-items
    {   width: 70vw;  }

    .menu-item ul 
    {  width: 40vw;  }

    /*---------------MAIN----------------*/

    main
    {   padding-top: 13vh;
        /*background-color: lightgreen;*/
    }

    /*-------------LEISTUNGEN------------------*/
    #skills
    {   width: 80%;  }
    #skills section
    {   width: 17vw;}
    
    #skills section .icon
    {   width: 7vw;  }
    #skills section:hover .icon
    {   width:  8vw;  }

    #skills section:hover h3
    {   font-size: var(--h3hover);   }

    #skills section:hover p
    {   font-size: var(--phovergross);   }

    /*--------------PRAKTIKA---------------------------*/
    .tables
    {   width: 70%;}

}

/*----------------- MAX 992PX DESKTOPS (smartphones)-----------*/

@media (max-width:992px) {
   
    :root 
    {   --h0: 7.0vw;
        --h1: 5.5vw;
        --h2: 2.0vw;
        --h2hover: 2.8vw;
        --h3: 2.8vw;
        --h4: 2.5vw;
        --li: 1.5vw;
        --lihover: 1.8vw; 
        --p: 1.5vw;
    }

    /*-----------------MENÜLEISTE--------------*/
    header
    {
        height: 13vh;
    }

    header #logo 
    {   width: 8.0vw;
        height: 8.0vw;
        margin: 3.9vw;
    }

    header:hover #logo
    {   width: 9.0vw;
        height: 9.0vw;
        margin: 3.9vw;
    }

    #menu-container
    {   padding: 0vw 11vw;  }

    #menu-items
    {   width: 80vw;}

    .menu-item:first-child 
    {   width: 22vw;}

    .menu-item:last-child ul li 
    {   height: 3vh;}

    #line
    {   height: 2.0vw;
        bottom: -2.0vw;
    }

    .menu-item ul 
    {
        flex-direction: column;
        align-items: flex-end;
        text-align: end;
    }

    .menu-item ul li 
    {   margin: 0.15em;   }


    /*----------------MAINPART-------------------*/

    main
    {   padding-top: 13vh;     }


    .flex-item
    {   margin: 6vw 0vw;   }
   
    /*----------------TITELS------------------------*/

    #title-leistung, #title-praktikum, #title-education
    {
        height: 23vw;
    }

    /*-------------LEISTUNGEN------------------*/
    #skills
    {   width: 95%;  }
    #skills section
    {   width: 33vw;
        height: 30vw;
    }
    
    #skills section .icon
    {   width: 10vw;  }
    #skills section:hover .icon
    {   width: 10vw;  }

    #skills section:hover h3
    {   font-size: var(--h3hover);   }

    #skills section:hover p
    {   font-size: var(--phovergross);   }

    /*--------------PRAKTIKA---------------------------*/
    .tables
    {   width: 95%;}

    
    
    
    /*------------footer------------*/
    footer table
    {
        width: 90%;
    }
}