/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Light.ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
:root {
    --font-size-mobile-h1: 5rem;
    --font-size-mobile-h2: 4rem;
    --font-size-mobile-h3: 2rem;
    --font-size-mobile-h4: 1.5rem;
    --font-size-mobile-p: 1.25rem;
    --font-size-mobile-p-light: 1rem;

    --font-size-mobile-large-p: 1.5rem;
    --font-size-mobile-large-p-light: 1.25rem;

    --font-size-p: 1.75rem;
    --font-size-p-light: 1.5rem;

    --font-size-desktop-large-h1: 8rem;
    --font-size-desktop-large-h2: 6rem;
    --font-size-desktop-large-h3: 3.5rem;
    --font-size-desktop-large-h4: 2.5rem;
    --font-size-desktop-large-p: 2rem;
    --font-size-desktop-large-p-light: 1.25rem;

    --section-padding: 10rem;
    --margin-horizontal: 7.5vw;

    --color-grey: #363636;
    --color-green: #03FCBA;
    --color-light: #E6E6E6;
} 


/*---------------------------------------------------------------------------------------------------------------MOBILE SMALL---------------------------------------------------------------------------------------------------------------*/

    *{
        scroll-behavior: smooth !important;
    }

    body {
        background-color: var(--color-light);
        font-family: 'Poppins', sans-serif;
    }

    h1 {
        font-size: var(--font-size-mobile-h1);
    }

    h2 {
        font-size: var(--font-size-mobile-h2);
    }

    h3 {
        font-size: var(--font-size-mobile-h3);
        /*font-weight: 300;*/    
    }

    h4 {
        font-size: var(--font-size-mobile-h4);
    }

    p {
        font-size: var(--font-size-mobile-p);
        margin: 2.5rem 0;
    }

    .p-title {
        font-weight: bold;
    }

    .p-light {
        font-weight: 300;
        font-size: var(--font-size-mobile-p-light);
        margin-top: 1rem !important;
    }

    .p-image {
        font-weight: 300;
        font-size: var(--font-size-mobile-p-light);
        margin: 0 !important;
        margin-top: 1rem !important;
    }

    a {
        color: var(--color-grey);
        text-decoration: underline;
        text-decoration-color: var(--color-green);
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        overflow-y: hidden;
    }
    .main-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        overflow: hidden;
    }

    .section {
        color: var(--color-grey);
        max-width: 67.5rem;
        margin-bottom: 5rem;
    }

    .hero-banner,
    .hero-banner-vita {
        height: auto;
        width: 100%;
        overflow-y: hidden;
    }

    .hero-banner {
        background-image: url('img/hero-img-home-3.jpg');
        background-size: auto 100%;
        background-position: top center;
        background-origin: border-box;
        background-repeat: no-repeat;
        min-height: 100vh;
    }

    .cta-scroll {
        position: absolute;
        z-index: 5;
        width: 5rem;
        top: 90vh;
        left: calc(50vw - 2.5rem);
        animation: scroll 1500ms ease-in-out 0s infinite normal none;
    }

    @keyframes scroll {
        0% {
            top: 90vh;
        }
        50% {
            top: 92vh;
        }        
        100% {
            top: 90hv;
        }
    }

    .hero-image-wrapper {
        position: relative;
        z-index: 1 !important;
        height: 100vh;
        width: 100%;
        top: 0;
    }

    .hero-image {
        height: 100%;
        object-fit: cover;
        margin: 0 auto;
    }

    .introduction{
        padding: 0 var(--margin-horizontal);
        padding-top: var(--section-padding);
        min-height: 97.5vh;
        width: 100%;
    }

    .introduction-img {
        display: none;
    }

    .introduction-img-2 {
        display: none;
    }

    .devider {
        width: 100vw;
        height: 2.5rem;
        background-color: var(--color-green);
    }

    .portfolio,
    .skills {
        padding: 0 var(--margin-horizontal);
        padding-top: var(--section-padding);
        padding-bottom: var(--section-padding);
        min-height: 95vh;
        width: 100%;
    }

    .skill-rating {
        margin-top: 1rem;
    }

    .wrapper-skills {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-gap: 2rem;
        grid-row-gap: 4rem;
    }

    .skills-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 5rem;
    }

    .wrapper-portfolio-overview {
        display: flex;
        flex-direction: column;
    }

    .portfolio-row {
        width: 100%;
        margin-bottom: 5rem;
    }

    .skill-detail {
        width: 100%;
    }

    .portfolio-detail {
        display: grid;
        grid-template-columns: 40% 60%;
        margin: 1rem;
        filter: grayscale(.4);
    }

    .portfolio-detail p {
        margin: 0;
    }

    .portfolio-detail:hover {
        filter: grayscale(0);
    }

    .portfolio-detail-img {
        min-width: 100px;
    }

    .portfolio-detail-img img {
        max-height: 12.5rem;
        margin: 0 auto;
    }

    .portfolio-info {
        position: relative;
        margin-left: 2.5rem;
    }

    .portfolio-info-btn {
        width: 50%;
        min-width: 6rem;
        height: 2.5rem;
        margin-top: 1rem;
    }

    .porfolio-disclaimer {
        position: relative;
        margin-left: calc(50% + 2.5rem);
    }

    .contact {
        width: 100%;
        padding: 0 var(--margin-horizontal);
        display: flex;
        flex-direction: column;
        min-height: 25vh;
    }

    .contact-mail {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 2.5rem auto;
        height: 3.5rem;
        width: 15rem;
        background-color: var(--color-green);
    }

    .contact-mail p {
        margin: 0 !important;
    }

    /*----------------------------VITA----------------------------*/

    .hero-banner-vita {
        margin-top: 5rem;
    }

    .title,
    .education,
    .abroad,
    .voluntary {
        padding: 0 var(--margin-horizontal);
        padding-top: var(--section-padding);
        padding-bottom: 5rem;
        width: 100%;
    }

    .title,
    .education {
        padding-top: 5rem;
    }

    .title {
        padding-bottom: 0;
    }

    .education-detail-wrapper,
    .projects-detail-wrapper,
    .abroad-detail-wraapper,
    .voluntary-detail-wrapper {
        display: flex;
        flex-direction: column;
    }

    .education-detail-wrapper p,
    .projects-detail-wrapper p,
    .abroad-detail-wrapper p,
    .voluntary-detail-wrapper p {
        margin: .25rem 0;
    }

    .project-category {
        margin-top: 5rem;
    }

    .project-category:first-of-type {
        margin-top: 2.5rem;
    }

    .education-detail-set,
    .projects-detail-set,
    .abroad-detail-set,
    .voluntary-detail-set {
        display: flex;
        flex-direction: column;
        margin-top: 2.5rem;
    }

    .projects-detail-set:last-of-type {
        margin-bottom: 5rem;
    }

    .projects-detail-set a {
        margin-top: 1rem;
    }

    .projects-detail-set ul {
        padding-left: 1rem;
    }

    .education-type,
    .project-type,
    .abroad-type,
    .voluntary-type {
        width: 100%;
    }

    .education-type p,
    .project-type p,
    .abroad-type p,
    .voluntary-type p{
        font-weight: bold;
    }

    .education-type-info,
    .project-type-info,
    .abroad-type-info,
    .voluntary-type-info {
        width: 100%;
    }

    .education-type-date,
    .project-type-date,
    .abroad-type-date,
    .voluntary-type-date {
        width: 100%;
    }

    .education-type-date p,
    .project-type-date p,
    .abroad-type-date p,
    .voluntary-type-date p {
        font-weight: 300;
    }

    .projects {
        padding: 0 var(--margin-horizontal);
        padding-top: var(--section-padding);
        min-height: 97.5vh;
        width: 100%;
    }


    /*---------------------PORTFOLIO SUBPAGES---------------------*/

    .logo-nav {
        position: absolute;
        display: flex;
        flex-direction: column;
        font-weight: bold;
        color: var(--color-green);
        font-size: 1.5rem;
        line-height: 80%;
        top: 1.25rem;
        left: 2.5rem;
        z-index: 5;
    }

    nav {
        position: absolute;
        top: 0;
        display: none;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 5rem;
        z-index: 3;
    }

    .dark a {
        color: var(--color-grey) !important;
    }

    .dark-bg {
        background-color: #36363650;
    }

    nav a {
        justify-self: flex-end;
        margin: 0 1rem;
        color: var(--color-light);
    }

    nav a:last-of-type {
        margin-right: 2.5rem;
    }

    iframe {
        width: 100%;
        height: 40rem;
        padding: 2.5rem 0;
    }

    .portfolio-page-wrapper {
        width: 100%;
        padding: 0 var(--margin-horizontal);
        color: var(--color-grey);
    }

    .portfolio-page-wrapper h2 {
        line-height: 90%;
        padding: 2.5rem 0;
    }

    .portfolio-page-logo,
    .portfolio-page-website,
    .porfolio-page-overlay,
    .portfolio-page-clr,
    .portfolio-page-other {
        padding-top: var(--section-padding);
    }

    .portfolio-page-other {
        padding-bottom: calc(var(--section-padding)/2);
    }

    .portfolio-page-logo img {
        padding: 2.5rem 0;
        width: 50%;
        max-width: 25rem;
    }

    .hero-banner-clavinaro,
    .hero-banner-conduco,
    .hero-banner-simplynick,
    .hero-banner-vita {
        min-height: 480px;
        height: 25vh;
        width: 100vw;
        background-size: auto 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .hero-banner-conduco {
        background-image: url('../../img/conduco-signum/hero-img-conduco.jpg');
    }

    .hero-banner-simplynick {
        background-image: url('../../img/simplynick/hero-img-simplynick.jpg');
    }

    .hero-banner-clavinaro {
        background-image: url('../../img/clavinaro/hero-img-clavinaro.jpg');
    }

    .hero-banner-vita {
        background-image: url('../../img/hero-img-vita-2.jpg');
    }

    .portfolio-overlay-wrapper,
    .portfolio-other-wrapper,
    .portfolio-clr-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 2.5rem;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .portfolio-overlay-wrapper h3 {
        margin-bottom: 2.5rem;
    }

    .portfolio-overlay-detail,
    .portfolio-other-detail {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 5rem;
    }

    .portfolio-overlay-detail p,
    .portfolio-other-detail p {
        margin: 0 0;
        margin-top: 1rem;
    }

    .portfolio-overlay-detail:last-of-type {
        margin-bottom: 0;
    }

    .portfolio-detail-media {
        width: 100%;
        min-height: 5rem;
    }

    .portfolio-clr-detail {
        display: flex;
        flex-direction: row;
    }

    .portfolio-clr-detail p {
        margin-top: 1rem !important;
    }

    .portfolio-clr-detail-cell {
        display: flex;
        flex-direction: column;
        width: 45%;
    }

    .sn-clr-cell-yellow {
        width: 100%;
        height: 1.5rem;
        background-color: #FFDB49;
    }

    .sn-clr-cell-grey {
        width: 100%;
        height: 1.5rem;
        background-color: #363636;
    }

    .cl-clr-cell-white {
        width: 100%;
        height: 1.5rem;
        background-color: #DADADA;
    }

    .cl-clr-cell-grey {
        width: 100%;
        height: 1.5rem;
        background-color: #363636;
    }

    .subdevider {
        width: 100%;
        height: 3px;
        background-color: var(--color-grey);
    }


    footer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 5rem;
        background-color: var(--color-grey);
    }

    footer a {
        text-decoration: none;
        color: var(--color-green);
    }



/*---------------------------------------------------------------------------------------------------------------MOBILE LARGE---------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 769px) {

    p {
        font-size: var(--font-size-mobile-large-p);
    }

    .p-light {
        font-size: var(--font-size-mobile-large-p-light);
    }

    .p-image {
        font-size: var(--font-size-mobile-large-p-light);
    }

    .name-wrapper {
        left: 22.5vw;
    }

    .hero-banner div:nth-of-type(2) {
        left: 22.5vw; 
    }

    .wrapper-skills {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
    }

    .skill-detail {
        max-width: 10rem;
    }

}

/*---------------------------------------------------------------------------------------------------------------DESKTOP---------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1080px) {

    p {
        font-size: var(--font-size-p);
    }

    .p-light {
        font-size: var(--font-size-p-light);
    }

    .p-image {
        font-size: var(--font-size-p-light);
    }

    .main-wrapper {
        max-width: 67.5rem;
        margin: 0 auto;
    }

    .name-wrapper {
        font-size: 10rem;
    }

    .hero-banner span:last-of-type {
        top: 7.5rem;
    }

    .hero-banner div:nth-of-type(2) {
        top: 27.5rem;
        font-size: 2rem !important;
    }

    .introduction-img {
        display: block;
        position: absolute;
        width: 5rem;
        right: 7.5vw;
    }

    .introduction-img-2 {
        display:4 block;
        position: absolute;
        width: 2rem;
        left: 5vw;
    }

    .portfolio-detail {
        grid-template-columns: repeat(2, 1fr);
    }

    nav {
        display: flex;
    }

    /*---------------------PORTFOLIO SUBPAGES---------------------*/

    .portfolio-page-wrapper {
        max-width: 67.5rem;
        margin: 0 auto;
        margin-top: 5rem;
    }

    iframe {
        height: 60rem;
        border: 2px var(--color-grey) solid;
        padding: 0 !important;
        margin-top: 2.5rem;
    }

    .portfolio-overlay-wrapper,
    .portfolio-other-wrapper {
        flex-direction: row;
    }

    .portfolio-overlay-detail {
        width: 45%;
    }

    .portfolio-other-detail {
        width: 25%;
        margin-right: 5%;
    }

    .hero-banner-clavinaro,
    .hero-banner-conduco,
    .hero-banner-simplynick,
    .hero-banner-vita {
        min-height: 540px;
        height: 50vh;
        background-size: auto 100%;
    }

    .hero-banner-vita {
        margin-top: 5rem;
    }

}

@media only screen and (min-width: 1601px) {
    .hero-banner {
        background-size: 100% auto;
    }
}


@media only screen and (min-width: 2161px) {

    h1 {
        font-size: var(--font-size-desktop-large-h1);
    }

    h2 {
        font-size: var(--font-size-desktop-large-h2);
    }

    h3 {
        font-size: var(--font-size-desktop-large-h3);
    }

    h4 {
        font-size: var(--font-size-desktop-large-h4);
    }

    p {
        font-size: var(--font-size-desktop-large-p);
    }

    nav a {
        font-size: var(--font-size-desktop-large-p);
    }

    .p-light {
        font-size: var(--font-size-desktop-large-p-light);
    }

    .logo-nav {
        font-size: 3rem;
        top: 2.5rem;
        left: 5rem;
    }

    nav {
        height: 10rem;
    }

    nav a:last-of-type {
        margin-right: 5rem;
    }

    .cta-scroll {
        width: 10rem;
    }

    .section {
        max-width: 135rem;
    }

    .hero-banner-vita {
        margin-top: 10rem;
        background-size: cover;
    }

    .introduction,
    .skills,
    .portfolio {
        min-height: auto;
    }

    .skill-detail {
        max-width: 20rem;
        margin-bottom: 10rem;
    }

    .main-wrapper {
        max-width: 135rem;
    }

    .portfolio-page-wrapper {
        max-width: 135rem;
        margin-top: 10rem;
    }
    
}


/*-------------------------------PLACEHOLDER--------------------------------------*/

.placeholder-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100vw;
    min-height: 100vh;
    background-color: var(--color-grey);
}

.name-placeholder {
    line-height: .85;
    color: var(--color-green);
    position: absolute;
    top: calc(5rem + 15vw);
    left: 15vw;
    z-index: 15;
    font-size: 8vw;
    font-weight: bold;
}

.announcement {
    position: absolute;
    top: calc(5rem + 32.5vw);
    left: 15vw;
    z-index: 15;
    color: var(--color-green);
}

.socials {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15;
    width: 100%;
    height: 4rem;
    bottom: 0;
    left: 0;
}

.socials-detail {
    max-width: 2rem;
    margin: 0 1rem;
}

.placholder-impressum  {
    position: absolute;
    z-index: 20;
    bottom: 1rem;
    right: 1rem;
    font-size: .75rem;
    text-decoration: none;
    color: var(--color-light);
}

.bg-wrapper{
    height: 100vh;
    width: 100vw;
    max-width: 1920px;
    overflow: hidden;
    background-image: url('img/hero-img-home-2.jpg');
    background-size: auto 100vh;
}

.bg-placeholder{
    filter: grayscale(1) brightness(.5);
    opacity: .5;

}


/*----------------IMPRESSUM---------------------*/

.impressum {
    margin: 10rem 10rem;
}

@media only screen and (max-width: 769px) {
    .name-placeholder {
        font-size: 12.5vw;
    }

    .impressum {
        margin: 10rem 2rem;
    }
}