* {
    font-family: 'KoHo', sans-serif;
    box-sizing: border-box;
    color: var(--color-blackORwhite);
    font-size: 100%;
    margin: 0;
    padding: 0;
    /*outline: 1px solid black;*/
}

*::selection {
    color: white;
    background-color: var(--primary-color);
}

:root {
    /* everything transparent on default; This way the iframe won't flicker when loading the style (because there is a delay in loading the projects colors with onload()) */
    --primary-color: transparent;
    --primary-color-light: transparent;
    --secondary-color: transparent;
    --color-blackORwhite: transparent;
    --arrow-invert-amount: 0%;
    --box-shadow-color: '0,0,0';

    --offset-title-x: 0px;
    --offset-title-y: 0px;
    --offset-img-x: 0px;
    --offset-img-y: 0px;
    --offset-button-x: 0px;
    --offset-button-y: 0px;

    --coverImg-margin-top: -0.3vw;
    --coverImg-margin-bottom: 1vw;
    --coverImg-shadow-pos: 0.8vw;
    --coverImg-shadow-blur: 1vw;
}

body {
    font-size: 1.1em;
    overflow: hidden; /* disable scoll-bars */
}

h1 {
    font-size: 2.2rem;
    margin-top: 5vw;
}

h1::selection {
    color: white;
    background-color: var(--primary-color);
}

h2 {
    font-size: 1.4rem;
    margin-top: 5vw;
}

nav ul {
    position: fixed; /* sticky */
    top: 0.3em;
    left: 0.3em;
    margin: 0;
    padding: 0.5em;
    width: auto;
    height: auto;
    list-style-type: none;
    overflow: auto;
    z-index: 12;
}

li a {
    display: block;
    margin-top: -0.1em; /* bring links a little closer together */
    padding: 0.3em 0.6em;
    font-size: 1.4em;
    font-weight: bold;
    text-decoration: none;
    border: 0px solid transparent;
    border-radius: 0.2rem;
    transition-duration: 0.15s;
}

ul li:first-child a {
    margin-top: 0em; /* first link in stack should have no margin */
}

li a:hover {
    background-color: var(--primary-color);
    color: white;
}


.nav-arrow {
    position: fixed; /* sticky */
    left: 40%;
    width: 20%;
    height: 10%;
    margin: auto;
    font-size: 1.25em;
    text-align: center;
    opacity: 25%;
    z-index: 10;
    transition-duration: 0.6s;
    cursor: pointer;

    /* make img not drag-/selectable */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.nav-arrow:hover {
opacity: 60%;
}

.nav-arrow.up img {
    filter: invert(var(--arrow-invert-amount));
    animation-name: arrow_up_std;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate; /* The animation is played forwards first, then backwards */
    animation-timing-function: ease-in-out;

    /* make img not drag-/selectable */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.nav-arrow.down img {
    filter: invert(var(--arrow-invert-amount));
    animation-name: arrow_down_std;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate; /* The animation is played forwards first, then backwards */
    animation-timing-function: ease-in-out;

    /* make img not drag-/selectable */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

p {
    font-size: 1.5rem;
    text-align: left;
}

p::selection {
    color: white;
    background-color: var(--primary-color);
}

section p:first-child {
    padding-top: 2.8vw;
}

.up {
    top: 0;
}

.up div {
    visibility: hidden;
    font-weight: bold;

    animation-name: arrow_up_caption_std;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate; /* The animation is played forwards first, then backwards */
    animation-timing-function: ease-in-out;
}

.up:hover div {
    visibility: visible;
}

.down {
    bottom: 0.4em;
}

.down div {
    visibility: hidden;
    font-weight: bold;
    margin-bottom: -0.6em;
}

.down:hover div {
    visibility: visible;
}


@keyframes arrow_up_std {
    0% {margin-top: 0;}
    100% {margin-top: 0.3em;}
}

@keyframes arrow_down_std {
    0% {margin-top: 0;}
    100% {margin-top: -0.3em;}
}

@keyframes arrow_up_caption_std {
    0% {margin-top: -1em;}
    100% {margin-top: -1.3em;}
}


#cover-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: auto;
    padding: 0 20%;
    background-color: var(--secondary-color);
    text-align: center;
    z-index: -1;
    transition-duration: 0.4s;
}

#cover-section img {
    margin: var(--coverImg-margin-top) auto var(--coverImg-margin-bottom) auto;
    display: block;
    padding: 0;
    width: auto;
    max-width: 60vw;
    height: auto;
    max-height: 45vh;
    
    /* make img not drag-/selectable */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;

    /* not correct alpha channel based drop shadow */
    /* box-shadow: 0.8rem 0.8rem 2rem rgba(0, 0, 0, 0.75); */

    -webkit-filter: drop-shadow(var(--coverImg-shadow-pos) var(--coverImg-shadow-pos) var(--coverImg-shadow-blur) rgba(0,0,0,0.75));
    filter: drop-shadow(var(--coverImg-shadow-pos) var(--coverImg-shadow-pos) var(--coverImg-shadow-blur) rgba(0,0,0,0.75));

    z-index: 9;
    transform: translate(var(--offset-img-x), var(--offset-img-y));
}

.secondary-button {
    height: auto;
    width: auto;
    margin: 0 auto;
    padding: 0.7vw 1.1vw;

    background-color: rgba(255, 255, 255, 0.2);
    color: var(--primary-color);
    border: 0.2vw solid var(--primary-color);
    border-radius: 0.18em;

    font-size: 1.7vw;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;

    z-index: 8;
    transform: translate(var(--offset-button-x), var(--offset-button-y));
    transition-duration: 0.4s; /* remove if transform is active (!0) */
}

.secondary-button:hover {
    color: white;
    background-color: var(--primary-color);
    transition-duration: 0.4s;
}

#cover-title {
    font-size: 4.5vw;
    font-weight: bold;
    text-align: center;
    color: var(--primary-color);

    width: auto;
    height: auto;
    padding: 0;
    margin: 0;

    /* make headline not drag-/selectable */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;

    z-index: 7;
    display: block;
    transform: translate(var(--offset-title-x), var(--offset-title-y));
}

#detail-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: auto;
    padding: 0;
    border: none;

    background-color: var(--secondary-color);
    overflow: auto;
    z-index: 11;
    visibility: hidden;
    opacity: 0;
    transition-duration: 0.2s;
}

#back-btn {
    display: none;
    cursor: pointer;
}

#back-btn-icon {
    filter: invert(var(--arrow-invert-amount));
    margin: 0;
    margin-left: -0.4em;
    padding: 0;
    width: 1.4em;
    height: 1.4em;
    vertical-align: top;
    transition-duration: 0.15s;
}

li a:hover #back-btn-icon {
    filter: invert(100%);
}

#detail-article {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 2em 20%;

    background-color: var(--secondary-color);
    text-align: center;
    z-index: -1;
    transition-duration: 0.4s;
}


#detail-article #cover-img {
    margin: var(--coverImg-margin-top) auto 2em auto;
    display: block;
    padding: 0;
    width: auto;
    max-width: 60vw;
    height: auto;
    max-height: 45vh;
    
    /* make img not drag-/selectable */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;

    -webkit-filter: drop-shadow(var(--coverImg-shadow-pos) var(--coverImg-shadow-pos) var(--coverImg-shadow-blur) rgba(0,0,0,0.75));
    filter: drop-shadow(var(--coverImg-shadow-pos) var(--coverImg-shadow-pos) var(--coverImg-shadow-blur) rgba(0,0,0,0.75));
}

#detail-article img {
    margin: 2em auto;
    display: block;
    padding: 0;
    width: auto;
    max-width: 60vw;
    height: auto;
    max-height: 45vh;
    
    /* make img not drag-/selectable */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;

    -webkit-filter: drop-shadow(0.3vw 0.3vw 0.7vw  rgba(var(--box-shadow-color),0.75));
    filter: drop-shadow(0.3vw 0.3vw 0.7vw rgba(var(--box-shadow-color),0.75));
}



#gallery-section .img-gallery { 
    float: left;
    width: 30.33%; /* due to padding of article there are only 60% left in total */
    height: auto;
    padding: 0;
    margin: 2vw 3% 0 0;
    display: block;

    border-radius: 0.2rem;
    box-shadow: 0 0.15vw 0.5vw 0 rgba(var(--box-shadow-color), 0.2), 0 0.15vw 0.7vw 0 rgba(var(--box-shadow-color), 0.19);

    -webkit-filter: drop-shadow(0 0 0  rgba(0, 0, 0, 0));
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    transition-duration: 0.25s;
    cursor: zoom-in;
}

#gallery-section .img-gallery:hover {
    border-radius: 0;
    background-color: var(--primary-color);
    outline: 0.2vw solid var(--primary-color);
    
    box-shadow: 0 0.4vw 1vw 0 rgba(var(--box-shadow-color), 0.4), 0 0.4vw 1.4vw 0 rgba(var(--box-shadow-color), 0.38);
}

#gallery-section {
    padding: 1vw 0;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.flex-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between; /* or center? */
    align-items: center;
}

#gallery-single-view {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    opacity: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    
    overflow: none;
    z-index: 15;
    visibility: hidden;

    background-color: rgba(40,40,40,0.95);
    transition-duration: 0.2s;
    cursor: zoom-out;
}

#gallery-single-view img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: auto;
    height: auto;
    max-height: 80vh;
    max-width: 80vw;
    margin: auto;
    padding: 0;

    box-shadow: 0 0 2vw rgba(0, 0, 0, 0.85);
}

/*#gallery-single-view #close-gallery-icon {
    position: absolute;
    top: 8vh;
    left: 90vw;
    margin: 0;

    filter: invert(100%);

    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}*/

#detail-article #gallery-section img {
    max-height: none;
    max-width: none;
}

.list-in-body-text {
    text-align: left;
    font-size: 1.5rem;
    list-style-type: none;
}

.list-in-body-text li::before {
    content: "– ";
}

#overview-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: auto;
    padding: 5% 15%;
    background-color: var(--secondary-color);
    text-align: center;
    z-index: -1;
    transition-duration: 0.4s;

    overflow-y: auto;
}

#overview-section ul {
    list-style-type: none;
}

#overview-section a {
    display: block;
    font-size: 1.75em;
    padding: 0.5em 1em;
    margin: auto;

    /* make not drag-/selectable */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

#overview-section li a:hover {
    background-color: unset;
    color: white;
}

#overview-section li {
    display: inline;
    float: left;
    background-color: white;

    border-radius: 0.25rem;
    margin: 1.3vw;

    box-shadow: 0 0.15vw 0.5vw 0 rgba(0,0,0, 0.2), 0 0.15vw 0.7vw 0 rgba(0,0,0, 0.19);
    transition-duration: 0.25s;
}

#overview-section li:hover {
    box-shadow: 0 0.4vw 1vw 0 rgba(0,0,0, 0.4), 0 0.4vw 1.4vw 0 rgba(0,0,0, 0.38);
}

#overview-section img {
    display: block;
    min-height: 2.5em;
    max-height: 6.5vh;
    box-sizing: unset;
    margin: auto;
    padding: 0.4em;

    /* make img not drag-/selectable */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.navActive {
    color: white;
    background-color: var(--primary-color-light);
}


#about-section {
    width: 100%;
    height: auto;
    margin: auto;
    padding: 3% 20% 7% 20%;
    text-align: center;
    z-index: -1;
    transition-duration: 0.4s;
}

#sticky-div {
    text-align: center;
    background-color: var(--secondary-color);
    padding-top: 2.1em;
    margin-top: -1.7em;
    padding-bottom: 2.1em;
    position: sticky;
    top: 0;

    box-shadow: 0 0.3vw 0.3vw 0 rgba(0,0,0, 0.2);
}

#sticky-div h1 {
    color: var(--primary-color);
    padding: 0;
    margin: 0;
}

#portrait {
    text-align: center;
    position: sticky;
    top: -100vh;
    z-index: 5;
}

#portrait img {
    border-radius: 100%;
    max-width: 13em;
    margin: 4% auto 0 auto;
    padding: 0;

    /* make img not drag-/selectable */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;

    box-shadow: 0 0.2vw 0.6vw 0 rgba(0,0,0, 0.3), 0 0.2vw 1vw 0 rgba(0,0,0, 0.25);
}

#about-section ul {
    font-size: 1.5rem;
    text-align: left;
}

#about-section a {
    color: var(--primary-color);
    font-weight: bold;
}

#about-section a:hover {
    color: var(--primary-color-light);
}