* {
   box-sizing: border-box; 
   margin: 0;
   padding: 0;
}

:root {

    /* color variables */
--color-strom-der-zeit: #81995D;
--color-gdi:#ebb266;
--color-dkp: #A7678A;
--color-dicke-luft: #799E78;
--color-strom-der-zeit-documentation: #e9726e;
--color-irokousei-sampo: #6172b0;
--color-sparking-joy-nyc: #A7A16C;
--color-streating: #898989;
--color-bg: black;
--color-font: white;

/* media query breakpoints */
--width-tablet: 800px; /* type gets smaller */
--width-mobile: 720px; /* one column layout */

/* layout */

--mbs-hero-header-desktop: 70vh;
--mbs-hero-header-tablet: var(--mbs-hero-header-desktop);
--mbs-hero-header-mobile: 100vw;
--mis-hero-header-text: 1000px;

--mis-grid-two-columns-project-title: 45rem;
--mis-grid-two-columns-project-info: 60rem;

/* spacer */
--spacer: 1rem;
--spacer-tablet: var(--spacer);
--spacer-mobile: var(--spacer);

/* FONTS */

--ff: "Favorit Variable", system-ui, Helvetica, Arial, sans-serif;

/* variable font styles */
--fvs-bold: 800;
--fvs-regular: 380;
--fvs-light: 300;
--fvs-slnt: -12;

/* font hero properties */
--fs-hero-desktop: 5rem;
--fs-hero-tablet: 4rem;
--fs-hero-mobile: 2.7rem;
--lh-hero: 0.95;

/* font regular properties */
--fs-regular-dekstop: 3rem;
--fs-regular-tablet: 2rem;
--fs-regular-mobile: 1.6rem;
--lh-regular: 1;
--ls-regular-desktop: -0.5px;

}

body {
    font-family: var(--ff);
    background-color: var(--color-bg);
    color: var(--color-font);
}

p, h1, h2, h3, li {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
}

img {
    display: block;
    max-inline-size: 100%;
}

video {
    display: block;
    min-inline-size: 100%;
    max-inline-size: 100%;
    overflow: hidden;     
}

a {
    text-decoration: none;
    color:inherit;
}

ul{
    list-style-type: none;
}

.hero-header {
    min-block-size: var(--mbs-hero-header-mobile);
    padding: var(--spacer);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
   
    /*@media (800px > width > 720px){
        min-block-size: var(--mbs-hero-header-tablet);
    }*/
     @media (width > 600px){
        min-block-size: var(--mbs-hero-header-desktop);
    }

}

.hero-text {
    font-size: var(--fs-hero-mobile);
    line-height: var(--lh-hero);  

    max-inline-size: min(100%, 1000px);
    margin-inline: auto;

    @media (800px > width > 600px){
        font-size: var(--fs-hero-tablet);
    }

     @media (width > 800px){
        font-size: var(--fs-hero-desktop);
    }

    transition: font-variation-settings 0.3s ease;

}

.heroTitle {
    font-variation-settings: "wght" var(--fvs-bold), "slnt" var(--fvs-slnt);
}

.heroSubTitle {
    font-variation-settings: "wght" var(--fvs-light), "slnt" 0;
}

.grid-two-columns {
    display: grid;
    gap: 0;
    
    @media (width > 720px) {
        grid-template-columns: 2fr 3fr;
    }
    
}

.grid-cv li{
    display: grid;
    gap: 0;
    
    @media (width > 720px) {
        grid-template-columns: 2fr 3fr;
    }
}

.grid-cv-year{
    padding-inline: var(--spacer);
    
    @media (width > 720px) {
        text-align: right;
        padding-inline-start: var(--spacer);
        padding-inline-end: 0;
    }
}

.grid-cv-activity{
    padding-inline: var(--spacer);
    padding-block-end: var(--spacer);
}

.grid-two-columns-reversed {
    display: grid;
    gap: 0;
    
    @media (width > 720px) {
        grid-template-columns: 3fr 2fr;
    }
    
}

.project-info {
    display: flex;
    align-items: center;
    padding: var(--spacer);
}

.bio-info {
    padding: var(--spacer);
    text-align: center;
    /*max-inline-size: 1200px;
    margin-inline: auto;*/
}

.project-info-landing {
    padding: var(--spacer);

    @media (width > 720px){
        padding-inline: var(--spacer);
        padding-block: 0;
    }
}

.project-info-landing h2,
.project-info-landing p {
     @media (width > 800px){
        max-inline-size: var(--mis-grid-two-columns-project-title);
     }
}

.regular-text {
    font-variation-settings: "wght" var(--fvs-regular), "slnt" 0;
    line-height: var(--lh-regular);

    font-size: clamp(1.6rem, -2.7806rem + 7.2258vw, 3rem);
    /*font-size: clamp(1.6rem, 0.6rem + 2.667vw, 3rem);
    font-size: clamp(1.6rem, -1.265rem + 4.7257vw, 3rem);*/

    /*font-size: var(--fs-regular-mobile);

    @media (800px > width > 600px){
        font-size: var(--fs-regular-tablet);
    }

    @media (width > 800px){
        font-size: var(--fs-regular-dekstop);
        letter-spacing: var(--ls-regular-desktop);
    }*/
}

.hover-white:hover{
    color:var(--color-font);
}

.hover-black:hover{
    color:var(--color-bg);
}


.legal-info {
    padding-inline: var(--spacer);
}

.legal-info h2{
    @media (width > 720px){
        max-inline-size: var(--mis-grid-two-columns-project-title);
        margin-inline-start: calc(40% + var(--spacer));
    }
}

.legal-info p{
    font-variation-settings: "wght" var(--fvs-regular), "slnt" 0;
    line-height: var(--lh-regular);
    font-size: 1.6rem;

    @media (width > 720px){
        max-inline-size: var(--mis-grid-two-columns-project-title);
        margin-inline-start: calc(40% + var(--spacer));
    }
}

.strom-der-zeit-color {
    color: var(--color-strom-der-zeit);
}

.strom-der-zeit-fill {
    background-color: var(--color-strom-der-zeit);
}

.strom-der-zeit-documentation-color {
    color: var(--color-strom-der-zeit-documentation);
}

.strom-der-zeit-documentation-fill {
    background-color: var(--color-strom-der-zeit-documentation);
}


.gdi {
    color: var(--color-gdi);
}

.gdi-fill {
    background-color: var(--color-gdi);
}

.dkp {
    color: var(--color-dkp);
}

.dkp-fill {
    background-color: var(--color-dkp);
}

.thick-air {
    color: var(--color-dicke-luft);
}

.thick-air-fill {
    background-color: var(--color-dicke-luft);
}

.irokousei-sampo {
    color: var(--color-irokousei-sampo);
}

.irokousei-sampo-fill {
    background-color: var(--color-irokousei-sampo);
}

.sparking-joy-nyc {
    color: var(--color-sparking-joy-nyc);
}

.streating {
    color: var(--color-streating);
}

footer {
    text-align: center;
    padding-inline: var(--spacer);
    padding-block: var(--spacer);
}