/*  dm = darkmode, lm = lightmode
    bg = background, color = background-color, img = background-image, fcolor = (font) color, shadow = box shadow
    icon = nav bar icon filter
    bar = menu bar/ language bar 
    contact = linkedin, xing and mail button
    box = .phase-boxbox
    labelcolor = plus-sign color
    -hover = :hover pseudo class
    -active = :active pseudo class

*/
:root{
    --icon-dm: invert(100%); 
    --iconhover-dm: drop-shadow(0 0  0.25em rgb(255, 21, 68)) invert();
    --icon-lm: invert(66%);
    --iconhover-lm: drop-shadow(0 0  0.25em rgb(255, 13, 13)) invert();


    --bar-dm: #103d55ce;
    --bar-lm: rgba(118, 132, 137, 0.793);

    --contactbg-dm: linear-gradient(145deg, #111a4b, hsla(184,65%,28%,1));
    --contactbg-hover-dm: linear-gradient(145deg, #212c46, #0e1538);
    --contactbg-active-dm: #131c49;
    --contactshadow-dm: inset 0.5em 0.5em 1em #0b1f2649,
                        inset -0.5em -0.5em 1em #c3c3c30a;;

    --contactbg-lm: linear-gradient(145deg, #acbbcd, #ddd, #ccc);
    --contactbg-hover-lm: linear-gradient(145deg, #acbbcd, #ddd, #ccc);
    --contactbg-active-lm: #c5c5c5;
    --contactshadow-lm: inset0.4375em 0.5em 1em #d7d7d767,
                        inset 0.4375em 0.4375em 1em #cccccd;

    --maincolor-dm: hsla(232,62%,17%,1);
    --mainimg-dm: radial-gradient(at 29% 63%, hsla(184,65%,28%,0.37) 0px, transparent 50%),
    radial-gradient(at 55% 0%, hsla(237,69%,7%,1) 0px, transparent 50%),
    radial-gradient(at 93% 76%, hsla(189,48%,8%,1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(222,56%,22%,1) 0px, transparent 50%),
    radial-gradient(at 76% 55%, hsla(235,48%,23%,1) 0px, transparent 50%),
    radial-gradient(at 26% 89%, hsla(233,0%,0%,1) 0px, transparent 50%);
    --mainfcolor-dm: white;

    --maincolor-lm: #dddddd;
    --mainimg-lm: linear-gradient(145deg, rgba(255,255,255,0.8253676470588236) 0%, rgba(195, 195, 195, 0.575) 100%);
    --mainfcolor-lm: black;


    --boxbg-dm: linear-gradient(145deg, #111a4b73, rgba(7, 43, 45, 0.405));
    --boxshadow-dm: 0.5em 0.5em 1em #010e2474,
                    -0.5em -0.5em 1em #131f6549;
    --boxfcolor-dm: rgba(255, 255, 255, 0.856);
    --boxbghover-dm: linear-gradient(145deg, #365b8281, rgba(7, 43, 45, 0.405));
    --boxbgactive-dm: linear-gradient(145deg, #111a4b73, rgba(7, 43, 45, 0.405));
    --boxshadowhover-dm: 0.5em 0.5em 1em #01142474,
                        -0.5em -0.5em 1em #11285c31;
    --boxshadowactive-dm: inset  0.5em 0.5em 1em #010e2474,
                            inset -0.5em -0.5em 1em #131f6549;

    --boxbg-lm: linear-gradient(145deg, #ecececc1, #d1d0d07e);
    --boxshadow-lm: 0.5em 0.5em 1em #9999995b,
                    -0.5em -0.5em 1em #e7e7e78c;
    --boxfcolor-lm: rgba(0, 0, 0, 0.766);
    --boxbghover-lm: linear-gradient(145deg, #d2cece5e, #dbd7d7c4);

    --boxshadowhover-lm:0.4375em0.4375em 1em #bababa,
                        0.4375em 0.4375em 1em #ffffff;
    --boxbgactive-lm: #dddddd;
    --boxshadowactive-lm: inset0.4375em0.4375em 0.625em #bababa,
                            inset 0.4375em 0.4375em 0.625em #ffffff;
}
html{
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

.no-deco{
    text-decoration: none;
    color: inherit;
}

body{
    background-color: rgb(6, 59, 55);
    font-family: 'Roboto', Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
}


main{
    background-color: var(--maincolor-dm);
    background-image: var(--mainimg-dm);
    color: var(--mainfcolor-dm);
    top: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;

}
section{
    scroll-snap-align: start;
    scroll-margin-top: 2rem;
}
p{
    font-size: 1rem;
}
hr{
    border-top: 0.0625em dotted rgba(0, 0, 0, 0.256);
    border-bottom: green;
}

/*NAVIGATION BAR: MENU, MODE, LANGUAGE*/


#nav{
    display: inline-flex;
    width: 100%;
    position: fixed;
    z-index: 99;
    background: transparent;
    border-radius: 0 0 2rem 2rem;
}
    .left-icons{
    width: 100%;
}
.right-icons{
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
.icon{
    filter: var(--icon-dm);
    padding: 1.25em 1.875em 1em 1.875em;
    cursor: pointer;
}

#mode-icon{
    padding-right: 0;
}
#menu-back{
    width: 3.125em;
    border-radius: 50%;
    height: 3.125em;
    position: fixed;
    z-index: 98;
    background-color: transparent;
    top: 0.625em;
    left: 1.25em; 
}
#menubar {
    position: fixed;
    border-radius: 2rem;
    top: 1.875em;
    left: 1.5625em;
    width: 2.5em;
    height: auto;
    z-index: 95;
    display: flex;
    flex-direction: column;
    padding: 3.8125em 0px 0.3125em 0px;
    align-items: center;
    background-color: var(--bar-dm);
  }
.menu{
    width: 1.875em;
    padding: 0.3125em 0 0.625em 0;
    filter: invert(100%);
}
.info-icon{
    padding: 2.5em 0 0.3125em 0;
}
.menu:hover{
    filter: drop-shadow(0px 0px 0.3125em rgb(205, 39, 39)) invert(100%);
}


  #menubar.open { /* Style for open state */
    transform: translateY(0vw);/* Slide menubar to view */
    opacity: 100%;
    height: auto;
    transition: height 0.4s ease-out, opacity 0.2s 0.3s linear, transform 0.4s ease-out;
  }
  #menubar.hidden{
    transform: translateY(28.125em);
    opacity: 0%;
    height: 0px;
    transition: height 0.4s ease-in;
  }
  #lang-back{
    width: 3.125em;
    border-radius: 50%;
    height: 3.125em;
    position: fixed;
    z-index: 98;
    background-color: transparent;
    top: 0.6875em;
    right: 1.25em; 
}


  #language-bar {
    background-color: var(--bar-dm);
    color: white;
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    right: 1.5625em;
    top: 1.875em;
    height: auto;
    width: 2.5em;
    padding: 3.8125em 0px 0.3125em 0px;
    z-index: 95;
    border-radius: 2rem;
  }
  #language-bar a{
    padding: 0.625em 0;
  }
  #language-bar a:nth-child(n+2):hover {
    text-shadow: 0px 0px 0.3125em rgb(50, 216, 216);
  }
  #language-bar.open { /* Style for open state */
    transform: translateY(0vw);/* Slide menubar to view */
    opacity: 100%;
    height: auto;
    transition: height 0.4s ease-out, opacity 0.2s 0.3s linear, transform 0.4s ease-out;
  }
  #language-bar.hidden{
    transform: translateY(-28.125em);
    opacity: 0%;
    height: 0px;
    transition: height 0.4s ease-in;
  }
  .light-mode {
    /* Stilregeln speziell für den Dunkelmodus im Body*/
    background-color:  whitesmoke;
}


/*PHOTO SECTION*/
.photo{
    filter: drop-shadow(0px -1rem 4rem rgba(0, 0, 0, 0.825)) drop-shadow(0 -3rem 2rem rgba(22, 34, 141, 0.536));
    border-bottom: 1px solid rgba(0, 0, 0, 0.289);   
}
#photo{
    display: block;
    position: sticky;
    width: 100%;
    min-width: 38.9375em;
    margin-left: 50%;
    transform: translateX(-50%);
}

/*CONTACT BUTTONS: LINKEDIN, XING, MAIL*/
.contact-div{
    position: relative;
    width: 41%;
    min-width: fit-content;
    margin: 0 auto;
    background-color: transparent;
    display: flex;
    justify-content: space-evenly;
    transform: translateY(-50%);
}


.contact-button{
    border-radius: 50%;
    border-style: none;
    border: 0.0625em solid HSLA(184,65%,28%,0.37);
    cursor: pointer;
    width: 3.9375em;
    height: 3.9375em;
    background: var(--contactbg-dm);
    box-shadow: none;
    /* box-shadow:  3px 3px 2px #080b1d,
             -3px -3px 2px #1e2d75; */
    align-content: center;
    justify-content: center;
    text-align: center;
}
.contact-button:hover{
    background: var(--contactbg-hover-dm);
}
.contact-button:active{
    background: var(--contactbg-active-dm);
    box-shadow: var(--contactshadow-dm);
}
.contact-button img{
    filter: invert();
    opacity: 66%;
    width: 1.87em;
}
.contact-button:hover img{
    opacity: 1;
}
.contact-button:active img{
    opacity: 1;
    filter: drop-shadow(0 0  0.25em rgb(14, 16, 0)) invert();
}


/*OVERLAY*/
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }
  
  .overlay-content {
    position: relative;
    margin: 1.25em auto;
    width: 70%;
    max-height: 80%;
    background-color: white;
    padding: 1.25em;
    border-radius: 1rem;
    overflow-y: scroll;
    overflow-x: hidden;
    text-align: center;
  }
  .overlay-content::-webkit-scrollbar{
    width: 0.3em;
  }
  
  .close {
    position: relative;
    top: -1em;
    left: 49%;
    margin: 0 0;
    font-size: 1.25em;
    cursor: pointer;
  }
  
  

/*ÜBERSCHRIFTEN*/
h1,h2,h3{
    text-align: center;
}
h1{
    font-weight: 500;
    font-size: clamp(2.3rem, 8vw, 10vw);
    margin: 0 auto;
}
h2{
    font-weight: 400;
    font-size: clamp(1.6rem, 5.6vw, 7vw);
    padding-top: 66px;
    margin-top: 0;
}
/* h2::before,
h2::after {
    display: inline-block;
    content: "";
    border-top: .1rem solid black;
    width: 3rem;
    margin: 0 1rem;
    transform: translateY(-0.6rem);
} */
h3{
    font-weight: 300;
    font-size: clamp(1.15rem, 4vw, 5vw);
    padding: 0;
    margin: 0 auto 3.125em auto;
}

/*PHASENBOXEN: Meine Lebensabschnitte in Boxen zusammengefasst*/
.phase-box{
    box-sizing: border-box;
    width: 90%;
    height: 100%;
    background: var(--boxbg-dm);
box-shadow:  var(--boxshadow-dm);
    margin: auto;
    padding: 0.625em 1.25em;
    border-radius: 1rem;
    color: var(--boxfcolor-dm);
}
.phase-box:hover{
    cursor: pointer;
    background: var(--boxbghover-dm);
    box-shadow:  var(--boxshadowhover-dm);
}
.phase-box.active{
    background: var(--boxbgactive-dm);
    box-shadow: var(--boxshadowactive-dm);
}
  /* Unhides the content part when active. Sets the height */
  .phase-box.active .content {
    height: 100%;
  }
  /* Changes from plus sign to negative sign once active */

.phase-box.active .label::before {
  content: '\2212';
}
.label{
    cursor: pointer;
}
.label::before {
    content: '\002B';
    color: rgba(100, 100, 100, 0.62);
    position: absolute;
    right: calc(5% + 1.25em);
    font-size: 1.875em;
  }
  .label:hover::before{
    color: rgba(28, 148, 156, 0.431);

  }
  .job{
    font-size: 1.1rem;
  }
  .content {
    position: relative;
    height: 0px;
    text-align: left;
    width: 100%;
    overflow: hidden;
  }
li{
    padding-top: 0.3125em;
}
dl,dd{
    margin-top: 0;
    padding: 0 0 3px 0;
}
.content a{
    text-decoration: none;
    color:rgb(13, 156, 161);
}
.content a:visited{
    color: grey;
}
.content a:hover{
    color: rgba(22, 184, 157, 0.59);
}

/*SKILL BEREICH: Man kann in der Suchleiste nach Skills filtern*/

.competences{
    text-align: center;
}
.filterbar{
    width: 89%;
    min-height: 1.875em;
    border-style: none;
    border-radius: 1rem;
    margin: 1.25em auto 0px auto;
    padding: 0.3125em 1.25em;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border: 0.0625em rgba(39, 209, 209, 0.163) solid;
    background-color: rgba(241, 241, 241, 0.728);
    color: white;
    font-size: 12px;
}
.filterbar:focus{
    background-color: rgba(37, 173, 183, 0.156);
    outline: none;

}
::placeholder {
    color: rgba(0, 0, 0, 0.859);
    opacity: 0.7; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Edge 12 -18 */
    color: rgba(0, 255, 234, 0.683);
  }

    /*Die angezeigten Skills*/
.skills{
    width: 90%;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    margin: 1.25em auto;
    justify-content: space-between;
    align-content: flex-start;
    position: relative;
}
.skill{
    max-width: fit-content;
    margin: 0.25em;
    background:   rgba(25, 79, 96, 0.427);
    padding:0.3125em 0.3125em;
    border: 0.0625em rgba(39, 209, 209, 0.367) solid;
    border-radius: 1rem;
    display:flex;
    color: rgba(255, 255, 255, 0.834);
    font-size: 0.875em;
    word-wrap: break-word;
}
.skills p, .filtering label{
    text-transform: uppercase;
    margin: 1.1em 0 0.5em 0;
}
  


/*HIDDEN STUFF DURING*/
.desktop{
    display: none;
}

  @media only screen and (min-width: 800px) {
    /*HIDE MOBILE STUFF*/
    #photo-div, #mode-icon, #competences, #contact-div, hr, .mobile{
        display: none;
    }

    /*---------*/

    body{
        height: 100%;
        margin: 0;
        display: flex;
        width: 100%;
        flex-wrap: nowrap;
    }
    aside{
        z-index: 99;
    }
    nav{
        display: block;
        left: calc(70vw - 10.625em);
        background: none;
        border-radius: 2rem;
        z-index: 98;
    }
    .icon{
        filter: var(--icon-lm);
    }
    .left-icons, .right-icons{
        display: inline;
        width: 3.75em;
    }
    #menu-back{
        background-color: transparent;
        left: calc(70vw - 9.375em);
    }

    #lang-back{
        background-color: transparent;
        top: 0.625em;
        left: calc(70vw - 5.625em);
    }
    #menubar{
        left: calc(70vw - 9.0625em);
    }
    #language-bar{
        left: calc(70vw - 5.3125em)
    }

    main {
      background-color: var(--maincolor-lm);
      background-image: var(--mainimg-lm);
      color: var(--mainfcolor-lm);
      flex: 0 0 70vw;
      height: auto;
    }
    h1,h2,h3{
        text-align: justify;
        margin-left: 5%;
    }
    h1{
        margin-top: 1em;
        font-size: clamp(2.3rem, 5vw, 8vw);
    }
    h2{
        font-size: clamp(1.6rem, 3vw, 6vw);
    }
    h3{
        font-size: clamp(1.15rem, 2vw, 3vw);
    }

    .phase-box{
        margin: auto;
    }

    aside.desktop{
        display: flex;
        flex-direction: column;
        background-color:var(--maincolor-dm);
        background-image: var(--mainimg-dm);
        overflow: hidden;
    }

    #photo-desktop{
        width: 100%;
        min-height: 20em;

        object-fit: cover;
        flex: 1;
        z-index: 2;
        /* filter: grayscale(100%) contrast(123%) brightness(107%); */
    }
    /* #photo-desktop:hover{
        filter: grayscale(0%) contrast(100%) brightness(100%);
    } */


    .contact-button{
        width: 3.2em;
        height: 3.2em;
        align-content: center;
        justify-content: center;
        text-align: center;
    }
    .contact-button img{
        width: 1.4em;
    }

    #skills-desktop p, .filtering label{
        color: rgba(255, 255, 255, 0.678);
    }

    .phase-box{
        background: var(--boxbg-lm);
        box-shadow: var(--boxshadow-lm);
        color: var(--boxfcolor-lm);
    }
    .phase-box:hover{
        background: var(--boxbghover-lm);
        box-shadow: var(--boxshadowhover-lm);
    }
    .phase-box.active{
        background: var(--boxbgactive-lm);
        box-shadow: var(--boxshadowactive-lm);
    }

    .label::before {
        content: '\002B';
        color: rgba(61, 61, 61, 0.519);
        position: absolute;
        right: calc(30vw + 4% + 0.625em);
        font-size: 2.5em;
      }

  }