/* fonts */
/* home */
@font-face {
    font-family: Cabazon;
    src: url(Cabazon.ttf);
}   

/* archiv */
@font-face {
    font-family: DinCondensed;
    src: url(DINCondensed-Regular.ttf);   
}   

/* über Mich */
@font-face {
    font-family: Ocr-B;
    src: url(OCR-B.ttf);
}



    /* seitenübergreifend */
a {
    text-decoration: none;
   /* color: rgb(50, 50, 50);*/
    color: rgb(25, 25, 25);
}

body {
   /* color: rgb(50, 50, 50);*/
    color: rgb(25, 25, 25);
    padding: 2% 8% 2% 8%;
   /* margin: 0;*/
    background-color: rgb(255, 255, 252);
}



    /* navigation */

/* navigation oben */
/* e's links */
#e-home {
    color: rgb(25, 25, 25);
    font-family: Cabazon;
    font-size: 22px;
    text-align: left;
    float: left;
    
    margin: 0;
    padding: 0;
}
#e-blog {
    color: rgb(25, 25, 25);
    font-family: Times New Roman;
    font-weight: 600;
    font-size: 24px;
    float: left;
}
#e-archiv {
    color: rgb(25, 25, 25);
    font-family: DinCondensed;
    font-size: 25px;
    float: left;
}
#e-ueberMich {
    color: rgb(25, 25, 25);
    font-family: Ocr-B;
    font-size: 17px;
    font-weight: 600;
    float: left;
}
#e-impressum {
    color: rgb(25, 25, 25);
    font-family: Helvetica;
    float: left;
    font-size: 18px;
}

/* navigation rechter teil */
ul { 
    list-style-type: none;
    text-align: right;
    
    margin-right: auto; 
    margin-left: auto; 
    margin-top: 30px;
    padding-left: 0;
}
.nav li {
    font-family: Helvetica;
    letter-spacing: 0.8px;
    font-size: 18px;
    font-weight: 400;
    
    display: inline;
}
#nav-blog, #nav-ueberMich, #nav-archiv, 
#nav-blog-aktiv, #nav-ueberMich-aktiv, #nav-archiv-aktiv {
    padding-left: 36px;
}

#nav-archiv-aktiv {
    font-family: DinCondensed;
    font-size: 23px;
}
#nav-blog-aktiv {
    font-family: Times New Roman;
    font-weight: 600;
    font-size: 21px;
}
#nav-ueberMich-aktiv {
    font-family: Ocr-B;
    font-size: 15px;
    letter-spacing: -2px;
    font-weight: 100;
}

footer {
    font-family: Helvetica;
    font-size: 18px;
    letter-spacing: 0.8px;
    
    display: inline-block; 
    min-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#insta {
    float: left;
    
    margin-top: 200px;
    padding-bottom: 60px;
}
#impressum {
    float: right;
    
    margin-top: 200px;
    padding-bottom: 60px;
}



    /* pages */

/* home */
#home1 {
    margin-top: 3vw;
    
    display: flex;
    align-content: center;
    justify-content: center;
}
#home-img-large {
    display: flex;
    width: 90%;
    height: auto;    
}

    /* footer home */
.insta-home {
    float: left;
    
    margin-top: 200px;
    padding-bottom: 60px
}
.impressum-home {
    float: right;
    
    margin-top: 200px;
    padding-bottom: 60px
}



    /* div : home1 (nur text) */
#home2 {
    margin-top: 10vw;
    
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}
h1.home {
    font-family: Cabazon;
    letter-spacing: 1px;
    font-size: 55px;
    font-weight: 100;
    margin-top: 70px;
}
#text1 {
    flex: 40%;
}

#home2-img {    
    display: flex;
    flex: 30%;
    padding: 0;
}
#eyes {
    display: flex;
    height: auto;
    width: 100%;
}


/* impressum */
    /* Typo wie bei Arbeiten Einzeln */
h1.impressum {
    font-family: Helvetica;
    font-size: 34px;
    line-height: 42px;
    font-weight: 500;
    margin-top: 12vh;
    margin-bottom: 8vh;
    padding-left: 6vw;

}
p.impressum {
    font-family: Helvetica;
    font-weight: 100;
    line-height: 30px;
    font-size: 24px;
    max-width: 400px;
    
    padding-bottom: 0;
    padding-left: 6vw;
}



/* archiv : übersicht */
#archiv-heading {
    margin-top: 8vh;
    margin-bottom: 8vh;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    }
#archiv-heading-text {
    width: auto;
}
h1.archiv {
    font-family: DinCondensed;
    font-size: 155px;
    letter-spacing: 8.2px;
    
    margin-bottom: 0;
    display: block;
}
h2.archiv {
    font-family: Helvetica;
    font-weight: 500;
    font-size: 16px;
    line-height: 25px;
    
    margin-top: 0;
    max-width: 380px;
}

#archiv-heading-img {
    flex: 30%;
}



div.gross , div.klein {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}
div.klein {
    flex-direction: column-reverse;
    align-content: flex-end;
}
div.gross {
    margin-top: 60px;
    align-content: flex-start;
    
    margin-left: auto;
    margin-right: auto;
}
img.img-gross {
    height: 375.5px;
    width: auto;
    flex: none;
}
img.img-klein {
    height: 183.5px;
    flex: none;
}

h3.archiv {
    font-family: Helvetica;
    font-weight: 400;
    letter-spacing: 0.8px;
    font-size: 34px;
    
    margin-top: 30px;
    margin-bottom: 15px;
    max-width: 1000px;
}
h4.archiv {
    font-family: Helvetica;
    font-weight: 100;
    line-height: 25px;
    
    margin-top: 0;
    margin-bottom: 15px;;
}

h5.archiv {
    font-family: Helvetica;
    font-weight: 600;
    line-height: 25px;
    
    margin-top: 0;
    margin-bottom: 180px;
}



/* archiv : arbeiten einzeln */
div.arbeiten-einzeln {
    max-width: 50vw;
    margin-left: 10vw;
    margin-top: 10vh;
}

h1.arbeiten-einzeln {
    font-family: DinCondensed; 
    font-weight: 400; 
    letter-spacing: 0.8px;
    font-size: 58px; 
    
    margin-bottom: 3vh;
    margin-top: 12vh;
}
h2.arbeiten-einzeln {
    font-family: Helvetica;
    font-weight: 100;
    line-height: 30px;
    font-size: 24px;
    margin-bottom: 10svh;
}
p.arbeiten-einzeln {
    font-family: Helvetica;
    font-size: 34px;
    line-height: 42px;
    padding-bottom: 90px;
}
h3.arbeiten-einzeln {
    font-family: Helvetica;
    font-weight: 100;
    line-height: 30px;
}

img.hover-small {
    display: inline-block;
}
img.hover-small:hover {
    transform: scale(750%);
    transform-origin: 30% center; 
}
img.hover-small:active {
    transform: scale(750%);
    transform-origin: 10% center;
}

img.hover-center:hover {
    transform: scale(500%);
    transform-origin: 10% center; 
}
img.hover-center:active {
    transform: scale(500%);
    transform-origin: 10% center ; 
}



/* blog */
#blog-heading {
    margin-top: 12vh;
    margin-bottom: 9vh;
    
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
div.blog-heading-img {
    display: flex;
    height: 300px;
    width: 350px;    
}
#stift
#blog

#blog-heading-text {
    flex: 50%;
}


h1.blog {
    font-family: Times New Roman;
    font-size: 180px;
    letter-spacing: 32px;
    
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}
h2.blog {    
    font-family: Helvetica;
    font-weight: 500;
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0.3px; 
    text-align: center;
    
    margin-top: 45px;
    margin-bottom: 25px;
    
    width: 100%;
}

#blog-main {
    max-width: 1000px;
    height: 2000px;
    margin: auto;
    position: relative;
}

div.blog-links-gross {
    color: rgb(25, 25, 25);
    font-family: Times New Roman;
    font-size: 48px;
    line-height: 54px;
    letter-spacing: 0.5px;
    
    margin-bottom: 10px;
    margin-top: 50px;
    max-width: 800px;
    
    float: left;
}
div.blog-rechts-klein { 
    float: right;
    
    font-family: Helvetica;
    font-size: 22px;
    line-height: 30px;
    
    margin-bottom: 50px;
    margin-top: 50px;
    max-width: 630px;
}
div.blog-rechts-gross {
    float: right;
    
    font-family: Times New Roman;
    font-size: 48px;
    line-height: 54px;
    letter-spacing: 0.5px;
    
    margin-bottom: 50px;
    margin-top: 50px;
    max-width: 800px;
}
div.blog-links-klein {
    float: left;
    
    font-family: Helvetica;
    font-size: 22px;
    line-height: 30px;
    
    margin-bottom: 50px;
    margin-top: 50px;
    max-width: 630px;
}

em.date-links {
    font-family: Helvetica;
    font-style: normal;
    font-size: 16px;
    font-weight: 100;
    line-height: 25px;
    letter-spacing: 0.3px;
}
em.date-rechts {
    font-family: Helvetica;
    font-weight: 100;
    line-height: 25px;
    font-size: 16px;
    letter-spacing: 0.3px;
    font-style: normal;
    
    position: absolute;
    right: 0;
}

strong {
    font-style: italic;
    font-weight: 400;
}

div.img-blog-rechts {
    margin-top: 0;
    margin-bottom: 70px;
    width: 75%;
    height: 22vh;
    
    float: right;
}

#analog, #db {
    display: flex;
    
    width: 100%;
    height: auto;
}

div.img-blog-links {
    margin-top: 0;
    margin-bottom: 70px;
    width: 60%;
    height: 24vh;
    
    float: left;
}



/* über mich */
    /* div 1 : hi (heading + img) */
#hi {    
    margin-top: 7vw;
    
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#hi_heading {
    display: flex;
    flex: 37%;
}
h1.ueber-mich {
    font-family: Ocr-B;
    font-size: 100px;
    line-height: 130px; 
    letter-spacing: -6px;
    font-weight: 100;
    text-align: left;
}

#hi_img_nbg {
    flex: 58%;
        
    padding: 0;
    margin-right: 3.5vw;    
}
#nbg {
    display: flex;
    width: 100%;
    height: auto;
}

    /* div 2 : ueber-mich-text1 (text + img) */
#ueber-mich-text1 {
    margin-top: 4vw;
    width: 100%;
    padding-left: 2.5vw;
    
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    
}
#text3 {
    flex: 70%;
}
p.ueber-mich {
    font-family: Helvetica;
    font-size: 34px;
    line-height: 42px;
    
    max-width: 610px;
    margin-bottom: 1vh;
}
h2.ueber-mich {
    font-family: Ocr-B;
    font-size: 50px;
    line-height: 1.6;
    letter-spacing: -6px;
    font-weight: 100;

    margin-top: 1.1vh;
}
#img-stern {
    flex: 30%;
}
#stern {
    width: 100%;
    height: auto;
}

    /* div 3 : bild london (nur bild) */
#london {
    margin-top: 4vw;
    width: 70vw;
    margin-right: auto;
    margin-left: auto;
    
    display: flex;
    flex-wrap: wrap;
	justify-content: right;
	align-items: center;
}

#london_img {
    display: flex;
    width: 75%;
    height: auto;
}



/* breakpoint: 600px - leider nicht fertig geworden, bin verzweifelt an den Bildern ... */

@media (max-width: 600px) {
    p.impressum {
    font-size: 22px;
    }
    
    .nav li {
        display: block;
        padding-bottom: 16px;
        font-size: 28px;
        letter-spacing: 0.8px;
    }
    #nav-archiv-aktiv {
    font-size: 32px;
    }
    #nav-blog-aktiv {
    font-size: 32px;
    }
    #nav-ueberMich-aktiv {
    font-family: Ocr-B;
    font-size: 22px;
    letter-spacing: -2px;
    font-weight: 100;
    }
    footer {
        font-size: 24px;    
    }
    #e-home {
        font-size: 34px;
    }
    #e-blog {
        font-size: 32px;
    }
    #e-archiv {
        font-size: 34px;
    }
    #e-ueberMich {
        font-size: 22px;
    }
    #e-impressum {
        font-size: 24px;
    }
    
}