@import "fonts.css";
@import "utils.css";
@import "animations.css";

:root {
    --default-padding: 1rem;
    --border-s:0.1rem;
    --dense-line-height: 4.5rem;

    --red-glow-shadow : 0px 0.1rem 10px rgba(255, 0, 0, 0.876);

}

/* General Styling */
*{
    margin:0;
    padding: 0;
}



body {
    background: white;
    display: grid;
    grid-template-rows: auto 1fr;
    
    overflow-x: hidden;
    max-width: 99vw;
    min-height: 95vh;
    padding:var(--default-padding)
}

/* || MainBody */
#mainHeader{
    border-top: solid black var(--border-s);
    border-right: solid black var(--border-s);
    line-height: var(--dense-line-height);
    padding: var(--default-padding);



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

    h1 {
        text-transform: uppercase;
        text-shadow: 1px 1px 0.1rem red;;
        font-size: 4rem;
        line-height: 3rem;
    }::first-letter{
        color: red;
        text-shadow: 1px 2px 0.1rem black;
    }

    >h2 {
        padding: var(--default-padding);
        color: red;
        border-bottom: solid black 0.1rem;
        text-transform: uppercase;
        text-align: end;
        font-size: 3rem;
        text-shadow: 1px 2px black;
        animation: fadeIn 1.8s ease-in 0s 1 normal both
    }

    
}
#centeredBody{
    display: grid;
    height: 100%;
    width: 100%;
    place-items: center;
}
#borderleft{
    border-left: solid 1px;
    border-bottom: solid 1px;
    
    position:absolute;
    z-index: -100;
    width: 40%;
    top:52.5%;
    bottom:2rem;
}


/* || Index  */
#lebenslaufWrapper {
    display: grid;
    place-items: center;
    text-align: center;
    padding:1rem;
    ul {
        list-style: none;
        
        padding:1.5rem;
        display: grid;
        
        
        border: black solid .015cap;
        border-radius: 0.2rem;
        

        li {
            border-bottom: 1px solid black;
            padding: 0.3rem 0rem;
            > h3 {
                font-size: x-large;
            }
        }

        li:first-child{
            padding:0rem;
        }

        li:hover{
            scale: 106%;
            
        }

        p {
            padding: 0rem 1rem;
        }

    }
}

#indexList{
  p {font-size: 3.5rem;
  	font-weight: 900;
    line-height: 3.5rem; }
  > li {
        animation-name: slideInRight;
        animation-duration: 0.8s;
        animation-timing-function: cubic-bezier(0.27, 0, 0.63, 1);
        animation-fill-mode: both;
    };
} 
#indexList li:nth-of-type(1){
    animation-delay: .1s;}
#indexList li:nth-of-type(2){
    animation-delay: .4s;}
#indexList li:nth-of-type(3){
    animation-delay: .6s;
}#indexList li:nth-of-type(4){
    animation-delay: .8s;
}#indexList li:nth-of-type(5){
    animation-delay: 1s;
}#indexList li:nth-of-type(6){
    animation-delay: 1.2s;
}

#indexGimmik {
    animation-composition: accumulate;
    animation: slideInLeft 2.8s, shake-lr-normal 3.8s;
    }
 
/* Zeichnungs */

#zeichnungs-crousell{
    display: inline-flex;
    max-height: 65vh;
    padding-inline: 1rem;
    /* Fill as much as possible within bounderies */
    
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-color: red #fe000031;
    scroll-padding: 16px;
    gap:2rem;
}

.zeichnungs-card{
    display: grid;
    max-height: inherit;
    overflow: clip;
    border: solid black 1px;
    
    >figure {
        max-height: inherit;

        > * {grid-area: 1 / 1;}
        background: linear-gradient(to bottom, #fe000031, 50%, #FFFFFF );
        
        > picture > img{
            height: 80%;
            width: 35vw;

            outline: black solid 1px;
            padding: 8px;
            object-fit: contain;

            } 
        
        >figcaption {
            display: flex;

            font-weight: 700;
            font-size: xx-large;
            text-shadow: 2px 4px 2px pink;
            text-decoration: underline;
            text-align: center;
            justify-content: center;
            align-items: center;

        }   
    }
}

/* || Malerei */

#malereiContainer{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4rem;
    padding-block: 32px;
    margin-left: 1rem;

    border-left: solid 1px black;
    border-bottom: solid 1px black;
}

.malerei-card{
    text-align: center;
    height: 33vh;
    
    box-shadow: 0px 0.1rem 10px rgba(255, 0, 0, 0.876);
    box-shadow: 0px 0.1rem 10px #c20b0bdf;

    border-radius: 16px;
    font-weight: 900;
    font-style: oblique;
    text-decoration: underline overline;
    > a {
        color: black;
    }
    
    figcaption {text-align: end;}

    img{
        height: 100%;
        border-radius: 16px;
    }
}

.malerei-card:hover{
    scale: 102%;
}

/* || Performance */

.performance-image-board {
    display: flex;
    max-width: 100%;
    height: 60vh;
    align-self: center;
    justify-self: center;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    padding:16px;
    margin:16px;
    outline: black solid 2px;
    outline-offset: 0px;
    border: red solid 1px;
    animation-duration: 2.5s;
}

.performance-image-wrapper {
    outline: black solid 4px;
    outline-offset: -4px;
    overflow: hidden;    
    height: 60vh;

    figcaption {
        position: absolute;
        bottom: 0%;

        height: 20%;
        width: 100%;

        background-color: rgba(26, 14, 14, 0.742);
        text-shadow: 1px 2px 1px red;
        color: pink;
        font-weight: 700;
        font-size: xx-large;
        text-decoration: none;
        text-align: center;
        
        transition: 1.2s;
        translate: 0% 100%;
        opacity: 0;

    }
    img {
    height: 100%;
}
}

.performance-image-wrapper:hover{
    >figcaption {
        opacity: 1;
        translate: 0% 33%;
    }
}


/* Links */
.--a-red-black{
    a {color:black; text-decoration: none;}
    a:visited {color: black;}
    a:hover{
        color:red;
        span {color:black}
    }
}

/*  || Flex */

.flex-row {
    display: flex;
    width: 100%;
    max-height: 100%;
    justify-content: center;
    flex-wrap: wrap;

}

.bottom-flex{
    display: flex;
    align-items: end;
    justify-content: space-between;
}


/* Outlines */
.--outline-s{
    outline: 0.1rem solid black;
}
.--outline--inner{
    outline-offset: -1rem;

}

/* Borders */
.--border-top-s{
    border-top: var(--border-s) solid black;
}

.--border-bottom-s{
    border-bottom: var(--border-s) solid black;
}
.--border-left-s{
    border-left: var(--border-s) solid black;
}
.--border-right-s{
    border-right: var(--border-s) solid black;
}

/* Shadows */

.--red-glow-shadow {
    box-shadow: var(--red-glow-shadow);
}