@font-face {
    font-family: Amatic Sc;
    src: url(CutiveMono-Regular.ttf);
}

@font-face {
    font-family: Roboto Slab;
    src: url(Open_Sans/OpenSans-Regular.ttf);
}

*{margin: 0; padding: 0;}

html {font-size: 16px;}

body {
    margin: 0; 
    padding: 0;
    background-color: ;
}

/*
PAGE ELEMENTS --------------
*/

/*
NAVIGATION
*/

.primary-nav{  
    position: fixed;
    display: inline-block;
    background-color: #fff;
    padding-top: 0.75rem; 
    padding-bottom: 0.75rem; 
    border-bottom: 0.15rem solid; 
    border-color: #B6CFC9;
    width: 100%;
    font-size: 1.5rem;
    text-align: center;
    vertical-align: middle;
    z-index: 200;
    top: 0;
    }


nav li { 
    display: inline-block;
    list-style: outside none none;
    margin-right: 2.25rem;
	font-family:'Amatic SC'; 
    font-weight: 400; 
    font-size: 1.2rem; 
    letter-spacing: 0.09rem;}

.navitem {}

nav a {
    color: #768b8f; 
    text-decoration: none; 
    text-transform: lowercase; 
    font-family:'Amatic SC'; 
    font-weight: 400;
    }

nav a {
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;}

nav a:hover, nav a:active {color: #b6cfc9;}

.no-touch nav a {
    -webkit-transition:color 0.3s ease-in-out;
    transition:color 0.3s ease-in-out;}

.no-touch nav a:hover, nav 
.active{color: #b6cfc9;}

.lightbulb {
    position: fixed;
    right: 8vw;
    z-index: 100;
    height: 25rem;
    top: 0;
    }
 
.enlightbulb {
    position: fixed;
    right: 8vw;
    z-index: 100;
    height: 25rem;
    top: 0;
    }

.lightbulblink .enlightbulb {
    display: none;
}

.lightbulblink:hover .lightbulb,
.lightbulblink:active .lightbulb{
  display: none;
}
.lightbulblink:hover .enlightbulb,
.lightbulblink:active .enlightbulb{
  display: block;
}


/*
sections
*/

#home {
    width: 99vw;
    height: 115vw;
    background-image: url("img/Lampe.svg");
    background-size: 80% auto;
    background-position: left bottom;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    padding-top: 15%;
    margin-bottom: 8%;
}

#thoughts {
    
}

#teaser {
    margin-top: 15%;
}

#contact {
    background-color: #B6CFC9;
    margin-top: 4rem;
    padding-top: 4rem;
}

/*
home
*/

.MyName {
    background-image: url(img/Meinlogo-05.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    height: 30vw;
    width: 40vw;

}

/*
divs
*/

.content {
    margin: 0 20%;
}

#thoughts .content {
    margin: 0 calc(20% + 2rem)
}

.column {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.center {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}

.AboutMe {
    flex: 1;
}

.content .column .img {
    flex: 1;
}

.portrait {
    width: 35%;
    height: auto;
    margin-right: 10%;
}

.image {
    width: 100%;
    height: auto;
    }

.overlay { 
    position: absolute;
    display: none;
    top: 3rem;
    width: 100%;
    padding-top: 10%;
    }

.responsive {
    position: relative;
    height: auto;
    cursor: pointer;
    margin:0;
    flex: 1;
    }

.responsive:hover .image{
    opacity: 0.1;
    transition: .5s ease;
    } 

.responsive:hover .overlay {
    display: block;
    transition: .3s ease;
    color: #768b8f;
    font-family: 'Amatic SC';
    font-style: 700;
    font-size: 3rem;
    text-align: center;
    }

.overlay a {text-decoration: none;}

.overlay p {color: #952908;}

/*
fonts
*/

.AND {
    font-size: 115%; 
    vertical-align: middle;
    }
p {
    font-size: 1rem;
    line-height: 180%;
    margin-bottom: 1.5em;
    font-family: 'Roboto Slab';
    font-weight: 400;
    }

.text {
    width: 80%;
    margin: 1.5rem 0 1.5rem 0rem;
    }

h1 {
    font-family: 'Amatic SC';
    color: #B6CFC9;
    font-style: 100;
    font-size: 2rem;
    letter-spacing: 0.09rem;
    text-transform: lowercase;
    }

.heading {
    margin-top: 4rem ;
    margin-right: 0;
    }

.heading-contact {
     color: #8d5649;
}

h2 {
    font-size: 2rem;
    color: #B6CFC9;
    font-weight: 400;
    text-align: left;
    font-family: 'Amatic SC';
    font-style: 400;
    margin-bottom: 0.5rem;
    margin-right: 1rem;
    letter-spacing: 0.09rem;
    text-transform: lowercase;
    
    }

/*
form
*/

form {
    width: 27rem;
    padding-bottom: 4vh;
    }

form p {margin: 1.5rem 0 0 0;}

form a {text-decoration: none;}

form label, form input, form textarea {
    display: block; 
    width: 100%; 
    margin: 0 auto; 
    padding: 0.6rem 1.5rem; 
    box-sizing: border-box;
    border: none; 
    outline: none; 
    color: #456064; 
    border-radius: 4px;
    font-family: 'Roboto Slab';
    font-size: 1rem;
    }

form input:focus, form textarea:focus {color: #456064;}

textarea {
    background-color: #fff;  
    font-size: 1.2rem; 
    font-weight: 400; 
    line-height: 150%;
    }

input {background-color: #fff;}

.button {
    background-color: #ced887;
    height: 4rem;
    cursor: pointer;
    font-family: 'Amatic Sc';
    text-transform: lowercase;
    font-size: 2rem;
}

/*
footer
*/

footer {
    padding-top: 2rem;
    background-color: #8d5649;
    width: 100%;
    height: 10rem;
}

footer p {
    color: #B6CFC9;
    font-weight: 100;
    font-size: 0.9rem;
    letter-spacing: 0.03rem;
    }

.footertexth {
    width: auto;
    height: 9rem;
    }

.footertexth h2 {
    color: #B6CFC9;
}

.footertextp {
    width: 12rem;
    height: 9rem;
    margin-top: 0.5rem;
    }

.foo {
    display: flex;
    justify-content: flex-start;
    flex: 1;
}
/*
PORTFOLIO, LIGHTBOX, HOMMADE, WIE ICH BIN
*/

#Gallery {
    padding-top: 10vw;
    padding-bottom: 5vw;
}

#Gallery .column {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
}

#Gallery .overlay {
    color: #B6CFC9;
    top: 1rem;
}

#Gallery .content h1 {
    color: #8d5649;
}

#Gallery .content p {
 margin-bottom: 4rem;
}

.flexi {
    width: 30%;
    height: auto;
    margin-bottom: 4vw;
    position: relative;
}

.flexi:hover .image{
    opacity: 0;
    transition: .5s ease;
    } 

.flexi:hover .overlay {
    display: block;
    transition: .3s ease;
    color: #768b8f;
    font-family: 'Amatic SC';
    font-style: 700;
    font-size: 3rem;
    text-align: center;
    }

.Galfoo { 
    height: auto;
}

#lightbox { margin: 0; padding: 0; height: 100vh;}

#lightbox .content {padding-top: 20%;}

#About {
    /*padding-top: 10vw;*/
}

.mephoto {
    width: 30vw;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

#About .MyName {
    width: 30vw;
    height: 20vw;
    position: relative;
}

#About .content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    height: auto;
    width: 30vw;
    margin-left: auto;
    margin-right: auto;
}

.metext {
    width: 99%;
    margin-left: 0.5vw;
    margin-top: 2vw;
}

.Ame {
    width: 30vw;
    margin-top: 10vw;
    height: 13rem;
    background-image: url(img/Meinlogo-G.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
}

.skills {
    width: 20rem;
    height: auto;
}


.intern {
    font-size: 2rem;
    font-style: 700;
}


.timeline {
    width: 332px;
    height: auto;
    margin-top: 5vw;}

.mephoto { order: 1;}
.metext .uno {order: 2;}
.metext .due {order: 3;}
.timeline { order: 4;}

/*
MEDIA QUERRIES
*/


@media only screen and (min-width: 0px) and (max-width: 1114px) {
    
    #home {
        background-size: 90% auto;
        margin-top: 15%;
        padding-top: 5%;
        height: 140vw;
    }
    
    .MyName {
        height: 50vw;
        width: 50vw;
    }
    
    
    .lightbulb, .enlightbulb {
        right: 4vw;
        top: -5rem;
    }
    
    .content {
        margin: 0 10%;
    }
    
    .portrait {
        margin-right: 5%;
    }
    
    h1 {
        font-size: 10vw;
    }
    
    
    #About .content {
        height: auto;
        align-items: center;
        width: 30vw;
        margin-left: auto;
        margin-right: auto;
        }
    
    .Bme {
        margin: 0;
    }
    
    .Ame {
        margin-left: auto;
        margin-right: auto;
    }
    
    .metext{ 
        width: 100%;
        margin-top: 2vw;
    }
    
    
    

    
    .timeline {width: 100%;}

    
    .mephoto { order: 1;}
    .metext .uno {order: 2;}
    .metext .due {order: 3;}
    .timeline { order: 4;}
   
}

@media only screen and (min-width: 0px) and (max-width: 850px) {
    
    footer {
        height: auto;
    }
    
    .foo {
        display: flex;
        justify-content: flex-start;
        flex: 1;
        flex-direction: column;
    }
    .footertexth {
        height: 5rem;
    }
    
    .flexi {
        width: 48%;
        margin-bottom: 4vw;
    }
    
    .mephoto {
        width: 40vw;
    }
    
    .Ame {
        width: 40vw;
        height: 30vw;
    }
    

     #About .content {
        height: auto;
        align-items: center;
        width: 40vw;
        margin-left: auto;
        margin-right: auto;
        }
    
    .timeline {width: 100%;}
    
    .skills {
        width: 100%;
        height: auto;
    }
    
}

@media only screen and (max-width: 600px) {
 
    .column {
        flex-direction: column;
    }
    
     .lightbulb, .enlightbulb {
        right: 0vw;
        top: -45vw;
        width: 20vw;
        height: auto;
    }
    
   .primary-nav{  
        position: fixed;
        background-color: #fff;
        padding-top: 0.75rem; 
        padding-bottom: 0.75rem; 
        border-bottom: none;
        width: 100%;
        height: 100%;
        font-size: 1.5rem;
        text-align: center;
        vertical-align: middle;
        z-index: 1;
        top: 0;
    }
    
    nav ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        flex-direction: column;
        height: 80%;
    }
    
    nav li {
        font-size: 4rem;
    }
    
    #click {
       display: none;
    }
    
    #menu {
        display: block;
    }
    
    .overlay { 
        display: none;
        position: relative;
        height: auto;
        vertical-align: middle;
        top: 0;
        padding: 0;
    }
    
    .responsive:hover .overlay {
    display: none;
    }
    
    .responsive:hover .image {
        opacity: 1;
    }
    
     .responsive:hover .hover {
        display: block;
    }
    
    .hover {
        display: block;
        position: relative;
        height: auto;
        width: auto;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 5vw;
        color: #768b8f;
        font-family: 'Amatic SC';
        font-style: 700;
        font-size: 3rem;
        text-align: center;
    }
    
    #teaser {
        flex-wrap: nowrap;

    }
    
    #teaser .column {
        flex-wrap: nowrap;
    }
    
    .portrait {
        width: 80%;
        height: auto;
        margin-left: 10%;
    }
    
    form {
        width: auto;
        margin: 10%;
    }
    
    h1 {
        font-size: 15vw;
    }
    
    .MyName {
        width: 80vw;
        height: 80vw;
        margin-top: 0%;
    }
    
    #home {
        background-size: 100% auto;
        margin-top: 20%;
        padding-top: 5%;
        height: 155vw;
    }
    
    .flexi {
        width: 100%;
        margin-bottom: 5vw;
    }
    
    .overlay h2 {
        margin-right: auto;
        margin-left: 2rem;
    }
    
    a {text-decoration: none;}
    
    #Gallery .overlay {
        font-size: 15vw;
        display: inline-block;
        position: static;
        color: #768b8f;
        font-family: 'Amatic SC';
        font-style: 700;
        font-size: 2.5rem;
        text-align: center;
        height: auto;
        margin-top: -5px;
        padding-bottom: 2rem;
        letter-spacing: 0.5px;
    }
    
    #Gallery .image{
    opacity: 1;
    margin: 0;
    }
    
    #Gallery a {margin: 0; padding: 0;
        height. 0;
    
    }
    
     .timeline {width: 100%;}

}

@media only screen and (min-width: 401px) and (max-width: 500px) {
    
    .overlay {
        top: 0;
    }
   
        
    .Ame {
        width: 100%;
        height: 50vw;
        margin-bottom: 4vw;
    }
    
    .mephoto {
        width: 100%;
        height: auto;
    }
    
     #About .content {
        height: auto;
        align-items: center;
        width: auto;
        margin-left: 5vw;
        margin-right: 5vw;
        }
    
    .timeline {
        width: 5rem;
        height: auto;
       
    }

     .Bme {
        margin: 0;
    }
    
    .Ame {
        margin-left: 5vw;
        margin-right: 5vw;
        width: auto;
    }
    
    .metext{ 
        width: 100%;
        margin-top: 2rem;
        margin-left: 1vw;
    }
    
    .skills {width: 100%;}
    
    .timeline {
        width: 100%;
    }
}

@media only screen and (max-width: 400px) {
    
    .content { margin: 0 10%;}
    
    .text {
        font-size: 4vw;
    }
    
    p {
        font-size: 4vw;
    }
    
    .overlay {
      top: 0;  
    }
   
    #home {
        background-size: 100%;
    }
    
    .Ame {
        width: 100%;
        height: 50vw;
        margin-bottom: 4vw;
    }
    
    .mephoto {
        width: 100%;
        height: auto;
    }
    
     #About .content {
        height: auto;
        align-items: center;
        width: auto;
        margin-left: 5vw;
        margin-right: 5vw;
        }
    
    .timeline {
        width: 100%;
        height: auto;
       
    }

     .Bme {
        margin: 0;
    }
    
    .Ame {
        margin-left: 5vw;
        margin-right: 5vw;
        width: auto;
    }
    
    .metext{ 
        width: 100%;
        margin-top: 2rem;
        margin-left: 1vw;
    }
    
    .skills {width: 100%;}
    
    .timeline {
        width: 100%;
    }
    
}