/*#############################Allgemein#############################*/
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Poppins', sans-serif;
    background-color: #1d1d1b;
    width: 75vw;
    height: 100vh;
}

header {
    width: 70vw;
    height: 10vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #1d1d1b;
    padding: 0 15vw;            /* Padding Top/Bottom = 0 | Padding Left/Right = 15vw */
    position: fixed;
    z-index: 100;
    user-select: none;
}

.name {
    color: white;
    font-size: 8vw;
    letter-spacing: 0.5vw;
    user-select: none;
}

.subtitle {
    color: white;
    opacity: 1;
    font-size: 2vw;
    letter-spacing: 0.5vw;
    user-select: none;
    position: inherit;
    top: 48vh;
}


img[alt="Autogramm"] {
    position: absolute;
    left: 15vw;
    user-select: none;
}

.titleAnimation {
    animation: mainTitle 5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

ul {
    list-style-type: none;
    position: relative;
    bottom: 1vh;
}

li {
    float: left;
    margin-right: 1vw;
}

li a {
    color: white;
    font-size: 0.85vw;
}

a {
    text-decoration: none;
}

#carousel {
    width: 105vw;
    height: 100vh;
}

.image {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    position: fixed;
    z-index: -1;
}

.back, .next {
    color: white;
    top: 41vh;
    font-size: 10vw;
    position: absolute;
    user-select: none;
    opacity: 0.3;
}

.next {
    right: 4vw;
}

.back {
    left: 4vw;
}

.cardWrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -50vh;
}

h3 {
    width: 100vw;
    display: flex;
    justify-content: center;
    margin-top: -30vh;
}

.card {
    height: 60vh;
    width: 20vw;
    border-radius: 5%;
    color: white;
    padding: 2vh 1vw;
    text-align: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    overflow: hidden;
    transform: scale(1.001);
}

.cardBackground {
    position: absolute;
    height: 60vh;
    width: 20vw;
    border-radius: 5%;
    background-position: center;
    background-size: cover;
    padding: 2vh 1vw;
    filter: blur(5px);
    opacity: .5;
}

section > p {
    margin-top: 0;
}

section {
    color: white;
}

#aboutMe {
    width: 75vw;
    height: 50vh;
    background-color: #1d1d1b;
    color: white;
    padding: 22vh 15vw;
}

p > a {
    color: grey;
}

.blur {
    position: fixed;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(10px);
    z-index: 101;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
}

.fullsizeDisplay {
    width: 80vw;
    height: 80vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

.exitPopup {
    position: absolute;
    right: 24vw;
    top: 12vh;
    padding: 0;
    margin: 0;
    font-size: 5vw;
    color: white;
    opacity: .75;
    user-select: none;
}

.filterSelection {
    width: 100vw;
}

/* Die Steckbriefe der Personen */
#persons {
    width: 75vw;
    height: 100vh;
    background-color: #1d1d1b;
    margin: 0;
    padding: 15vh 15vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

img {
    display: block;
    max-width: 100%;
}

main {
    display: grid;
    place-items: center;
    min-height: 100vh;
    width: 100vw;
}

#skills {
    width: 81vw;
    height: 100vh;
    padding: 0 12vw;
    background-color: #1d1d1b;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*#############################Pseudo-Klassen#############################*/
.back:hover, .next:hover {
    cursor: pointer;
    opacity: 1;
    transition: opacity .3s;
}

img[alt="Autogramm"]:hover {
    cursor: pointer;
}

li a:hover {
    transition: all 0.3s;
    box-shadow: inset 0 -0.1vw 0 white;
}

.backToTop:hover {
    color: white;
    background-color: #1d1d1b;
    transition: .3s;
    cursor: pointer;
}

.imgWrapper:hover .gOverlay {
    opacity: 1;
    cursor: pointer;
    transition: .3s;
}

.exitPopup:hover {
    opacity: 1;
    transition: .3s;
    cursor: pointer;
}

p > a:hover {
    color: white;
    transition: color .3s;
}

/*#############################Galerie-Bilder#############################*/
/*Philipp*/
.arc1 {
    background-image: url("../img/Bild1.jpg");
}

.arc2 {
    background-image: url("../img/Bild2.jpg");
}

.arc3 {
    background-image: url("../img/Bild3.jpg");
}

.arc4 {
    background-image: url("../img/Bild4.jpg");
}

.arc5 {
    background-image: url("../img/Bild5.jpg");
}

.arc6 {
    background-image: url("../img/Bild6.jpg");
}

.arc7 {
    background-image: url("../img/Bild7.jpg");
}

.arc8 {
    background-image: url("../img/Bild8.jpg");
}

.arc9 {
    background-image: url("../img/Bild9.jpg");
}

/*Felix*/
.bus {
    background-image: url("../img/A7203916.jpg");
}

.car {
    background-image: url("../img/A7203929.jpg");
}

.hm {
    background-image: url("../img/A7203947.jpg");
}

.parkcity {
    background-image: url("../img/citypark.jpg");
}

.couple {
    background-image: url("../img/DSC_1637.jpg");
}

.couple2 {
    background-image: url("../img/DSC_1648.jpg");
}

.couple3 {
    background-image: url("../img/DSC_6959 2.jpg");
}

.couple4 {
    background-image: url("../img/DSC_6968 2.jpg");
}

.single {
    background-image: url("../img/DSC_1691.jpg");
}

.single2 {
    background-image: url("../img/DSC_1705.jpg");
}

.single3 {
    background-image: url("../img/DSC_5520 2.jpg");
}

.single4 {
    background-image: url("../img/DSC_5529 2.jpg");
}

.single5 {
    background-image: url("../img/DSC_5550 2.jpg");
}

.single6 {
    background-image: url("../img/DSC_6263.jpg");
}

.single7 {
    background-image: url("../img/DSC_6315.jpg");
}

.single8 {
    background-image: url("../img/DSC_6975.jpg");
}

.single9 {
    background-image: url("../img/DSC_7565 test 2.jpg");
}

.flower {
    background-image: url("../img/otherpinkflower.jpg");
}

.flower2 {
    background-image: url("../img/pinkflower.jpg");
}

.flower3 {
    background-image: url("../img/pinkflower2.jpg");
}

.nature {
    background-image: url("../img/rockinswamp.jpg");
}

.landscape {
    background-image: url("../img/DSC07692.jpg");
}

.landscape2 {
    background-image: url("../img/sun.jpg");
}

.landscape3 {
    background-image: url("../img/YAK00689.jpg");
}

.landscape4 {
    background-image: url("../img/YAK00729.jpg");
}

.landscape5 {
    background-image: url("../img/YAK00740.jpg");
}

.landscape6 {
    background-image: url("../img/DSC00235.jpg");
}

.landscape7 {
    background-image: url("../img/DSC07732.jpg");
}

/*Mathis*/
.orion {
    background-image: url("../img/orion.jpg");
}

.pleiades {
    background-image: url("../img/pleiades.jpg");
}

.soul {
    background-image: url("../img/soul.jpg");
}

.veil {
    background-image: url("../img/veil.jpg");
}

.pinwheel {
    background-image: url("../img/pinwheel.jpg");
}

.horsehead {
    background-image: url("../img/horsehead.jpg");
}

.bode {
    background-image: url("../img/bode.jpg");
}

.pacman {
    background-image: url("../img/pacman.jpg");
}

.ghost {
    background-image: url("../img/ghost.jpg");
}

.andromeda {
    background-image: url("../img/andromeda.jpg");
}

.triangle {
    background-image: url("../img/triangle.jpg");
}

.pelican {
    background-image: url("../img/pelican.jpg");
}

/*#############################Karten-Hintergründe#############################*/
.bg0 {
    background-color: white;
}

/*Mathis*/
.bg1 {
    background-image: url("../img/orion.jpg");
}

.bg2 {
    background-image: url("../img/piano.jpg");
}

.bg3 {
    background-image: url("../img/design.jpg");
}

/*Felix*/
.bg4 {
    background-image: url("../img/DSC_1637.jpg");
}

.bg5 {
    background-image: url("../img/A7203916.jpg");
}
.bg6 {
    background-image: url("../img/YAK00689.jpg");
}

/*Philipp*/
.bg7 {
    background-image: url("../img/Bild7.jpg");
}

.bg8 {
    background-image: url("../img/Design2.jpg");
}

.bg9 {
    background-image: url("../img/Kaufmann.jpg");
}

/*#############################Helper#############################*/

/*Felix - Active für die Nav*/
.active {
    transition: all 0.3s;
    box-shadow: inset 0 -0.1vw 0 white;
}

.fade-in-button {
    animation: fade-in 0.2s;
    animation-fill-mode: forwards;
}

.fade-out-button {
    animation: fade-out 0.2s;
    animation-fill-mode: forwards;
}

.fade-in-image {
    animation: fade-in 2s;
    animation-fill-mode: forwards;
}

.fade-out-image {
    animation: fade-out 2s;
    animation-fill-mode: forwards;
}

.collapse {
    animation: collapse 0.2s;
    animation-fill-mode: forwards;
}

.expand {
    animation: expand 0.2s;
    animation-fill-mode: forwards;
}

/*Mit dieser Eigenschaft wird der Preloader unsichtbar und durch den Keyframe bekommt er beim verschwinden eine leichte Animation*/
.disappear{
    animation: vanish 1s forwards;
}

/*#############################Profil-Bilder#############################*/
/*Mathis Profile*/
.profileM {
    width: 17vw;
    height: 50vh;
    background-image: url("../img/profile.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 5%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    float: left;
    margin-right: 5vw;
    margin-bottom: 2vh;
}

/*Felix Profile*/
.profileF {
    width: 17vw;
    height: 50vh;
    background-image: url("../img/IMG_2020.jpeg");
    background-size: cover;
    background-position: center;
    border-radius: 5%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    float: left;
    margin-right: 5vw;
    margin-bottom: 2vh;
}

/*Philipp Profile*/
.profileP {
    width: 17vw;
    height: 50vh;
    background-image: url("../img/philipps.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 5%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    float: left;
    margin-right: 5vw;
    margin-bottom: 2vh;
}

/*#############################Before-After-Slider (Felix)#############################*/
#editing {
    display: grid;
    place-items: center;
    height: 100vh;
    width: 100%;
    background-color: #1d1d1b;
    position: relative;
}

.before {
    background-color: #1d1d1b;
    display: grid;
    place-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    --position: 50%;
}

.image-container {
    background-color: #1d1d1b;
    max-width: 800px;
    max-height: 90vh;
    aspect-ratio: auto;
}

.slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
}

.image-before {
    background-color: #1d1d1b;
    position: absolute;
    inset: 0;
    width: var(--position);
}

.slider {
    background-color: #1d1d1b;
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 0;
    /* for Firefox*/
    width: 100%;
    height: 100%;
}

.slider:focus-visible ~.slider-button {
    outline: 5px solid black;
    outline-offset: 3px;
}

.slider-line {
    position: absolute;
    inset: 0;
    width: .2rem;
    height: 100%;
    background-color: white;
    z-index: 10;
    left: var(--position);
    transform: translateX(-50%);
    pointer-events: none;
}

.slider-button {
    position: absolute;
    background-color: white;
    color: black;
    padding: .5rem;
    border-radius: 100vw;
    display: grid;
    place-items: center;
    top: 50%;
    left: var(--position);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100;
    box-shadow: 2px 2px 2px hsl(0, 50%, 2%, .5);
}

/*#############################Galerie#############################*/
#gallery {
    width: 105vw;
    min-height: 100vh;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background-color: #1d1d1b;
}

.overlay {
    width: 100vw;
    height: 90vh;
    background-color: #1d1d1b;
    position: absolute;
    top: 10vh;
    bottom: 0;
    background-attachment: fixed;
    opacity: .45;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    line-height: 150px;
}

.gOverlay {
    position: relative;
    width: 33.3vw;
    height: 50vh;
    opacity: 0;
    color: white;
    background: linear-gradient(to top, rgba(29, 29, 27, 0.5), rgba(255, 0, 0, 0));
}

.imgWrapper {
    width: 33.3vw;
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.gOverlay > p {
    position: absolute;
    bottom: 0;
    left: 2vw;
    font-size: 1.2vw;
    font-weight: lighter;
    user-select: none;
}

/*#############################Back-To-Top-Button#############################*/
.backToTop {
    background-color: white;
    display: flex;
    border-radius: 50%;
    width: 5vw;
    height: 10vh;
    position: fixed;
    bottom: 4vh;
    right: 4vw;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    font-size: 2vw;
    user-select: none;
}

/*#############################Preloader#############################*/
.loader{
position: fixed;
top:0;
left:0;
background: black;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

/*#############################Timeline#############################*/
#timeline{
padding: 2rem;
margin: 0 auto;
max-width: 800px;
min-height: 150px;
}

#timelineAnfang{
text-align: center;
padding: 4rem 0;
max-width: 600px;
margin: 0 auto;
}

.timeline{
position: relative;
min-height: 150px;
}

.line{
position: absolute;
z-index: 2;
left: calc(50% - 1px);
width: 2px;
top: -50px;
background-color: #fff;
display: none;
}

.line:before,
.line::after{
position: absolute;
display: block;
content: '';
height: 1rem;
width: 1rem;
border-radius: 50%;
background-color: #fff;
left: 50%;
transform: translateX(-50%);
}

.line:after{
bottom: 0;
}

.lebensabschnitt{
display: flex;
opacity: 0;
transform: translateX(-100%);
transition: 600ms ease;
position: relative;
z-index: 1;
margin: 50px 0;
padding: 1rem;
align-items: center;
min-height: 300px;
}

.lebensabschnitt:nth-child(odd){
flex-direction: row-reverse;
transform: translateX(100%);
}

.zeitpunkt{
position: absolute;
display: block;
height: 1rem;
width: 1rem;
border-radius: 50%;
background-color: #fff;
left: 50%;
top: 20%;
transform: translateX(-50%);
}

.abschnitt{
width: calc(50% - 2rem);
}

.anzeigen:nth-child(n){
transform: none;
opacity: 1;
}

#timeline1 {
width: 105vw;
height: 220vh;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
background-color: #1d1d1b;
padding: 15vh 0;
}

/*#############################Keyframe-Animations#############################*/
@keyframes fade-in {
    from{opacity: 0; visibility: hidden;}
    to{opacity: 1; visibility: visible;}
}

@keyframes fade-out {
    from{opacity: 1; visibility: visible;}
    to{opacity: 0; visibility: hidden;}
}

@keyframes collapse {
    from {opacity: 1; height: 10vh;}
    to {opacity: 0.3; height: 6vh;}
}

@keyframes expand {
    from {opacity: 0.3; height: 6vh;}
    to {opacity: 1; height: 10vh;}
}

@keyframes mainTitle {
    from {letter-spacing: -0.5vw;}
    to {letter-spacing: 0.5vw;}
}

@keyframes vanish {
    100%{
        opacity: 0;
        visibility: hidden;
    }
}