@import "_reset.css";

html {
    font-size: 0.625em; /* 10px */
    font-family: 'helvetica neue', monospace;
    font-weight: 600;
}


.project img  {
    width: 100%;
    object-fit: cover;
    height: 110vh;
}

.white  {
    width: 100%;
    height: 11vh; 
}

header, .header-bg {
/*
    mix-blend-mode: difference;
*/
    color: black;
    font-size: 5em;
    position: fixed; /* temporär: Original: fixed; */
    text-decoration: none;
    top: 50%;
    transform: translateY(-50%);
/*    padding: 0.6em;*/
    width: 100%;
    z-index: 1;
    height: 5em;
}

.header-text {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.header-bg {
    background-color: white;
    mix-blend-mode: difference;
}
   
a {
    text-decoration: none;
    color: black;
}

.project {
    position: relative;
}

.project:nth-child(1) {z-index: 1;}
.project:nth-child(2) {z-index: 2;}
.project:nth-child(3) {z-index: 3;}
.project:nth-child(4) {z-index: 4;}
.project:nth-child(5) {z-index: 5;}
.project:nth-child(6) {z-index: 6;}
.project:nth-child(7) {z-index: 7;}
.project:nth-child(8) {z-index: 8;}
.project:nth-child(9) {z-index: 9;}
.project:nth-child(10) {z-index: 10;}
.project:nth-child(11) {z-index: 11;}
.project:nth-child(12) {z-index: 12;}
.project:nth-child(13) {z-index: 13;}
.project:nth-child(14) {z-index: 14;}
.project:nth-child(15) {z-index: 15;}
.project:nth-child(16) {z-index: 16;}
.project:nth-child(17) {z-index: 17;}
.project:nth-child(18) {z-index: 18;}
.project:nth-child(19) {z-index: 19;}
.project:nth-child(20) {z-index: 20;}

.project-header {
    position: fixed;
    z-index: 1;
    top: calc(50% - 1.1em);
    left: 0;
    height: 2em;
    display: flex;
    width: 100%;
    color: black;
    font-size: 15em;
    text-decoration: none;
    background-color: white;
    mix-blend-mode: difference;
    text-align: center;
}

.project-header h2 {
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* color: white; */
}
/* -- Kontakt landingpage --*/

.project.header .project-header {
    color: black;
    font-size: 10em;
    padding: 0em;
    display: flex;
    height: 2.5em;
        justify-content: center;
        text-align: center;
}

/*_________________*/
/* BREAKINGPOINTS */
@media screen and (max-width: 1100px) {
    .project-header {
        font-size: 10em;
    }
    .project.header .project-header {
        font-size: 7em;
    }
         
}

@media screen and (max-width: 850px) {
     .project.header .project-header {
        font-size: 6em;
        padding: 1em;
        display: flex;
        height: 3.5em;
        text-align: center;
        }
    .project-header {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1.2em;
        font-size: 7em;
    }
}
@media screen and (max-width: 600px) {
     .project.header .project-header {
        font-size: 2.95em;
        padding: 1em;
        display: flex;
        height: 3.5em;
        text-align: center;
    
}
    .project-header {
        font-size: 5em;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1.2em;

            }
}