/* FONTS */
@font-face {
    font-family: "main";
    src: url("NotoSans-Regular.ttf");
}
@font-face {
    font-family: "default";
    src: url("texgyreadventor-regular.otf");
}
body {
    font-family: "default", sans-serif;
}
nav,
h1,
h2 {
    font-family: "main", sans-serif;
}
/* VARS */
:root {
    /* --c: #7b8c79;
    --c: #e2c044;
    --c: #023c40;
    --c: #a35a52;
    --c: #fe938c;
    --c: #d7b69d;
    --c: #7c77b9;
    --c: #87677b;
    --c: #e4dee4;
    --c: #4b3b47;
    --c: #e0d8de;
    --c: #fed9b7;
    --c: #34312d;
    --c: #d6a99a;
    --c: #e6e8ef; */

    font-size: 16px;
    --nav_height: 3rem;
    --nav_logo_width: 2.5rem;
    --section_shadow: 0 0 10px 0px #e6efe664;
    --nav_bg: #7b8c79;
    --nav_col: #250518;
    --body_bg: #e6e8ef;
    --body_col: #250518;
    --sect_line: 0px solid white;
    --backdrop_filter: blur(25px);
    --backdrop_shadow: 0 0 10px 10px rgba(255, 255, 255, 0.02);
    --backdrop_bg: #e6e8efc8; /*transparent;*/ /*rgba(255, 255, 255, 0.03);*/
    /* --backdrop_tshadow: 0 0 15px rgba(255, 187, 114, 0.532); */
    --image_filter: contrast(0.8) saturate(0.7) brightness(1.2);
    /* --image_filter: blur(1px) contrast(0.75) saturate(0.5) brightness(1.6) sepia(20%);  */
    /* sepia(90%) hue-rotate(85deg) */
    --image_height: calc(50vh - var(--nav_height));
    --quote_col: #72856f;
    --max_w: 1200px;
    --max_text_w: 600px;
}
#Home {
    --img: url("./img/Machine.jpg");
}
#Joseph_Pilates {
    --img: url("./img/Feet.jpg");
}
#Marcelo_de_Melo {
    --img: url("./img/Marcelo_1.jpg");
    --bg_position: center 30%;
}
#Das_Training {
    --img: url("./img/Knee.jpg");
}
#Kontakt {
    --img: url("./img/Wall.jpg");
}
#Impressum {
    --img: url("./img/Hands.jpg");
}
/* BASICS */
* {
    box-sizing: border-box;
}
h1,
h2,
p,
ul,
blockquote {
    width: fit-content;
}
html {
    overflow: hidden;
    height: 100vh;
}
body {
    margin: 0;
    height: 100vh;
    color: var(--body_col);
    background-color: var(--body_bg);
}
section::before {
    content: "";
    display: block;
    position: absolute;
    height: 40vh;
    left: 5vh;
    right: 5vh;
    top: 0;
    background-image: url("img/logo_line.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 1;
}

nav::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: inherit;
    background-image: url("img/logo_line.svg");
    background-position: center;
    background-size: cover;
    opacity: 0.07;
    pointer-events: none;
}
#content {
    position: fixed;
    top: var(--nav_height);
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
#content > * {
    max-width: var(--max_w);
    margin: auto;
}
#content > *:first-child {
    margin-top: 3rem;
}
/* NAV */
nav {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    /* box-shadow: var(--section_shadow); */
    height: var(--nav_height);
    color: var(--nav_col);
    fill: var(--nav_col);
    background-color: var(--nav_bg);
}
nav > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--nav_height);

    padding: 0 0.5em;
    max-width: var(--max_w);
    margin: auto;
}
a {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 1.5em;
}
a[href="#Home"] {
    width: var(--nav_logo_width);
    /* max-width: 3vw; */
    display: flex;
    align-content: center;
    justify-content: center;
}
/* ARTICLES */
article {
    position: relative;
    min-height: calc(100vh - var(--nav_height));
    scroll-snap-align: start;
    border-top: var(--sect_line);
    /* padding: var(--nav_height) 0vw 0rem 0vw; */
}
article::before {
    content: "";
    display: block;
    background-size: var(--size, cover);
    background-repeat: no-repeat;
    background-position: var(--bg_position, center);
    position: sticky;
    z-index: -999;
    top: 4.6rem;
    left: 0;
    right: 0;
    height: var(--image_height);
    margin: 1px;
    /* margin-top: 2rem; */
    margin-bottom: calc(var(--image_height) * -1);
    filter: var(--image_filter);
    background-image: var(--img);
}
h1,
h2 {
    position: sticky;
    top: 0;
    left: 0;
    z-index: -999;
    /* height: 0; */
    /* margin: 0;
    margin-left: 2rem; */
    padding: 1.5rem 0.25rem;
    margin: 0;
    /* box-shadow: 0 0 4px 10px var(--body_bg); */
    text-shadow: 0 4px 10px rgba(255, 255, 255, 0.4);
    background-color: var(--body_bg);
    width: 100%;
    /* height: var(--nav_height); */
    /* color: black;
    text-shadow:0 0 2px white; */
}
article > blockquote {
    position: absolute;
    top: 6vh;
    left: 3vw;
    /* margin: 10vh 0 0 10vw; */
}
h3 {
    margin-top: 2em;
    margin-bottom: 0.5em;
}
section {
    margin: var(--image_height) 0 0 0;
    /* margin-top: 80vh; */
    padding: 1em 1em 20em 1em;
    /* border-radius: 0.5rem; */
    backdrop-filter: var(--backdrop_filter);
    box-shadow: var(--backdrop_shadow);
    text-shadow: var(--backdrop_tshadow);
    background-color: var(--backdrop_bg);

    box-shadow: var(--section_shadow);
    /* 
    position: absolute; */
    /* top: var(--pos_y);
    left: var(--pos_x); */
}
section > * {
    max-width: var(--max_text_w);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.social {
    display: flex;
    justify-content: center;
    align-items: center;
}
.social svg {
    display: block;
    width: 2em;
    height: 2em;
    fill: var(--body_col);
    /* stroke: var(--body_col); */
}

blockquote {
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--quote_col);
}
blockquote:before {
    content: open-quote;
    font-size: 2em;
    /* text-align: center;  
    line-height: 42px;   */
    /* color: #fff;  
    background: #ddd;   */
    float: left;
    position: relative;
    /* border-radius: 25px;   */
    margin-top: -1em;
    margin-left: -0.75em;
    /* vertical-align: -0.4em; */

    /** define it as a block element **/
    display: block;
    /* height: 25px;  
    width: 25px;   */
}
/* blockquote:after {  
    content: close-quote;  
    float: right;
}  */

footer {
    position: fixed;
    bottom: 0;
    right: 15px;
    left: 0;
    z-index: 9999999999;
    background-color: var(--body_bg);
    padding: 1rem;
    text-align: right;
}