@import url('https://fonts.cdnfonts.com/css/chunkfive-print');
*{

    --clr-main1: 285, 64%, 31%; /*#691d82*/       /*  hsl(var(--clr-main1, 0, 0%, 0%))       */ 
    --clr-main1-ass: 288, 28%, 93%; /*#f0e8f2*/   /*  hsl(var(--clr-main1-ass, 0, 0%, 100%))   */

    --clr-main1--hex: #681c82; 



}


/*reset*/

/* https://piccalil.li/blog/a-modern-css-reset/ */

/* Box sizing, Reset margins & paddings */
*, *::before, *::after, * > * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* make images easier to work with */
img, picture, svg, video {
    
    display: block;
    max-width: 100%; /*the parent has to got a with & height*/
    height: auto;  

    background-repeat: no-repeat;
    background-size: cover;

    font-style: italic;
    shape-margin: 1rem;
    object-fit: cover;
}

svg {
    display:block;
    width: 80rem;
    max-height: 100%;
  }


svg > * {
    fill: inherit;
    stroke: inherit;
  }

/* make form elements easier to work with */
input, button, textarea, select {
    font: inherit;
}

button {
    cursor: pointer;
}

/* remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {  
  *,    *::before,   *::after {
    animation-duration: 0.01ms !important;     animation-iteration-count: 1 !important;      transition-duration: 0.01ms !important;     scroll-behavior: auto !important;
  }
}

ul, li, ol {
    list-style-type: none; /* Remove bullets */
}

h1, h2, h3, h4, h5, h6, span, p, a {
    font-family: var(--ff-sans-normal);
    font-size: var(--fs-400);
    color: inherit;
 }



html{
    scroll-behavior: smooth;
    scroll-padding-top: var(--scroll-padding, 100px);
}


.grid-overlay {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'overlay';

}

    .grid-overlay > * {
        grid-area: overlay;
    }

/*reset end*/
body {
    background: hsl(var(--clr-main1-ass, 0, 0%, 100%));
    background: linear-gradient(178deg, hsl(var(--clr-main1-ass, 0, 0%, 100%)) 0%, hsl(var(--clr-main1, 0, 0%, 0%)) 100%);
}

header {
    margin-inline: auto;
    width: clamp(280px, 80%, 900px);
    
}
    header h1, header p {
        text-align: center;
        color: hsl(var(--clr-main1, 0, 0%, 0%)) ;
        margin-inline: auto;
        
    }

    header h1{ 

        font-family: 'ChunkFive', sans-serif;
        font-family: 'ChunkFive Print', sans-serif;

        font-size: clamp(4rem, 8cqw, 20rem);


        margin-top: 10%;
        line-height: clamp(1, 1cqw, .8);
    }

    header p{
        font-size: clamp(16px, 1.5cqw, 1.5rem);
        font-style: italic;
        width: 40ch;
    }

main{
    --bgSize: clamp(500px, 60vw, 1000px); 
    
    display: block;
    width: 100%;
}

    .main__bg{
        

        background-repeat: repeat;
       /* background-attachment: fixed; */
        background-size: var(--bgSize, auto);
    
        background-image: 
            url("/personalMedia/bg900x900.png"), 
            url("/personalMedia/bg1000x800.png"), 
            url("/personalMedia/bg850x500.png"), 
            url("/personalMedia/bg450x900.png");
            
    
        background-image: -webkit-image-set(url("/personalMedia/bg900x900.avif") type("image/avif"),
                                            url("/personalMedia/bg900x900.webP") type("image/webP"),
                                            url("/personalMedia/bg900x900.png") type("image/png")), 
                          -webkit-image-set(url("/personalMedia/bg1000x800.avif") type("image/avif"),
                                            url("/personalMedia/bg1000x800.webP") type("image/webP"),
                                            url("/personalMedia/bg1000x800.png") type("image/png")), 
                          -webkit-image-set(url("/personalMedia/bg850x500.avif") type("image/avif"),
                                            url("/personalMedia/bg850x500.webP") type("image/webP"),
                                            url("/personalMedia/bg850x500.png") type("image/png")), 
                          -webkit-image-set(url("/personalMedia/bg450x900.avif") type("image/avif"),
                                            url("/personalMedia/bg450x900.webP") type("image/webP"),
                                            url("/personalMedia/bg450x900.png") type("image/png"));
                                            
        background-image:         image-set(url("/personalMedia/bg900x900.avif") type("image/avif"),
                                            url("/personalMedia/bg900x900.webP") type("image/webP"),
                                            url("/personalMedia/bg900x900.png") type("image/png")), 
                                  image-set(url("/personalMedia/bg1000x800.avif") type("image/avif"),
                                            url("/personalMedia/bg1000x800.webP") type("image/webP"),
                                            url("/personalMedia/bg1000x800.png") type("image/png")), 
                                  image-set(url("/personalMedia/bg850x500.avif") type("image/avif"),
                                            url("/personalMedia/bg850x500.webP") type("image/webP"),
                                            url("/personalMedia/bg850x500.png") type("image/png")), 
                                  image-set(url("/personalMedia/bg450x900.avif") type("image/avif"),
                                            url("/personalMedia/bg450x900.webP") type("image/webP"),
                                            url("/personalMedia/bg450x900.png") type("image/png"));

    }
    main article {
        display: flex;
        flex-direction: column;

        padding-block: 2rem;
    }

        main article h3 {
            align-items: flex-start;
            font-family: 'ChunkFive', sans-serif;
            font-family: 'ChunkFive Print', sans-serif;
            letter-spacing: .5rem;

            font-size: clamp(24px, 2cqw, 3rem);

            color: hsl(var(--clr-main1-ass, 0, 0%, 100%)) ;

            padding-block: 1.5rem;
            padding-inline: 1.5rem;


            
        }


        #artPortfolio .section__container{
            width: 80%;
            margin-block: 2em;
            color: hsl(var(--clr-main1-ass, 0, 0%, 100%)) ;
            background:   hsl(var(--clr-main1, 0, 0%, 0%)) ;

            background:   hsla(var(--clr-main1), .5) ;
            border: solid hsl(var(--clr-main1-ass, 0, 0%, 100%));

        }

        #artPortfolio  h4 {
            text-align: center;
        }


        .sctnContainer--right {
                
            margin-left: auto;
            padding: 3rem 0 3rem 5rem;
            border-radius: 5rem 0 0 5rem;
            border-width: .5rem 0 .5rem .5rem;


        }

        .sctnContainer--left {
            margin-right: auto;

            padding: 3rem 3rem 3rem  5rem ;
            border-radius:0 5rem   5rem 0;
            border-width: .5rem  .5rem .5rem 0;
        }

        @media (width <= 600px) {
            .section__container  {
                width: 95%;
            }
            .sctnContainer--right, .sctnContainer--left {
                margin-inline: auto;
                padding: 1.5rem;
                
            }
        }

        .sctnContainer--left > * {
            padding: 1rem;
        }



            .sctnContainer__media--horizontal {

                aspect-ratio: 4/3;
                width: clamp(250px, 95%, 600px);
                height: auto;
                margin-inline: auto;
                padding-block: 1rem;


            }
                .sctnContainer__media  > iframe{
                    display:block;
                    width:100%;

                    border-radius: 2rem 0 2rem 0;
                    border: solid hsl(var(--clr-main1-ass, 0, 0%, 100%)) ;
                }
            .sctnContainer__media--vertical {

                    aspect-ratio: 3/4;
                    width: clamp(250px, 95%, 450px);
                    height: auto;
                    margin-inline: auto;
    
    
                }
                    .sctnContainer__media  > iframe{
                        display:block;
                        width:100%;
    
                        border-radius: 2rem 0 2rem 0;
                        border: solid hsl(var(--clr-main1-ass, 0, 0%, 100%)) ;
                    }



        /*------------------------------- carrier --------------------------------*/

        #artCarrier .section__container{
            display: grid;
            grid-template-areas: 'overlay';    

            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            place-content: center;
            place-items: center;

            height: reset;
            background:   transparent ;
            border: none;  
        }

            #artCarrier .section__container > * { grid-area: overlay;}

            main #artCarrier h3 {
                font-size: clamp(20px, 2cqw, 3rem);
                letter-spacing: .3rem;
            }

            #sectionTimeline {
                height: 95%;
                width: 20px;

                margin: auto;
                
                background:   hsla(var(--clr-main1), .8) ;
                border: solid hsl(var(--clr-main1-ass, 0, 0%, 100%)) ;
                border-width: 0  .3rem 0 .3rem ;
            }

            #sectionJobs{
                width: clamp(280px, 95%, 960px);
                padding-block: 2rem;


                z-index: 99;
            }

                .sectionJobs--left, .sectionJobs--right { 
         
                    width: calc(50% + 15px); 
                    height: 50px;
                    margin-block: 1rem;

                    display: flex;
                    flex-direction: row;

                    gap: 10px;


                }

                .sectionJobs--right {
                    margin-left: auto;
                }

                .sectionJobs--left {
                    margin-right: auto;
                    flex-direction: row-reverse;
                }

                #sectionJobs  h4 {
                    --shadowStrenght: .3;
                    font-weight: normal;
                    font-size: clamp(16px, 2cqw, 1.5rem);
                }

                .button--job, .button--education , .button--skill{
                    padding: .5rem 2rem;
                    margin: auto .25rem;    
                    
                    text-align: center;
                    border-radius: 1rem;
                    border: solid 1px ;
                }


                .button--job {
                    --textShadowClr: var(--clr-main1-ass, 0, 0%, 100%);
                    color: hsl(var(--clr-main1-ass, 0, 0%, 100%)) ;
                    background: hsl(var(--clr-main1, 0, 0%, 100%)) ;

                    border-color: hsl(var(--clr-main1-ass, 0, 0%, 100%)) ;
                }

                .circle {

                    width: 30px;
                    height: 30px;

                    margin-block: auto;
                    border: solid hsl(var(--clr-main1-ass, 0, 0%, 100%)) 5px ;
                    background: hsl(var(--clr-main1, 0, 0%, 100%)) ;
                    border-radius: 50%;
                }

                .button--education{
                    --textShadowClr: var(--clr-main1, 0, 0%, 100%);
                    color: hsl(var(--clr-main1, 0, 0%, 100%)) ;
                    background: hsl(var(--clr-main1-ass, 0, 0%, 100%)) ;

                    border-color: hsl(var(--clr-main1, 0, 0%, 100%)) ;
                    
                }

                .rombus {
                    width: 30px;
                    height: 30px;

                    margin-block: auto;
                    border: solid hsl(var(--clr-main1-ass, 0, 0%, 100%)) 5px ;
                    background: hsl(var(--clr-main1, 0, 0%, 100%)) ;
                    transform: rotate(45deg);

                }

                .button--skill , .button--skill > h4{
                    --textShadowClr: var(--clr-main1-ass, 0, 0%, 100%);
                    font-style: italic;
                    color: hsl(var(--clr-main1-ass, 0, 0%, 100%)) ;
                }

                .line {
                    width: 30px;
                    height: 5px;

                    margin-block: auto;
                    border: solid hsl(var(--clr-main1-ass, 0, 0%, 100%)) 5px ;
                    background: hsl(var(--clr-main1, 0, 0%, 100%)) ;

                    height: 2px;
                    border: solid hsl(var(--clr-main1-ass, 0, 0%, 100%)) 2px ;
                    background: transparent
                }





        /* decoration */
        .decorRippedPapper--small {
            background-image: 
                url("/personalMedia/rippedPapper--small--lilac.png");
            background-repeat: no-repeat;
            background-size:cover;
            background-position: center;
        }

        .decorRippedPapper--large {
            background-image: 
            url("/personalMedia/rippedPapper--large--lilac.png");
            background-repeat: no-repeat;
            background-size:cover;
            background-position: center;
        }

        .decorShadow {
            filter: drop-shadow(.5rem .5rem .1rem hsla(0, 0%, 0%, var(--shadowStrenght, .5)) );
        }

        .deocorShadowInset {
            box-shadow: inset 0px 0px 12px 20px hsla(0, 0%, 0%, var(--shadowStrenght, .3));

        }


        .decorBlur {
            filter: blur(var(--blur, .1rem));
        }

        .decorTextShadow {
            text-shadow: hsl(var(--textShadowClr, 0, 0%, 100%)) 0 0 5px;
        }

        .decorTextUnderLine {
              text-decoration: underline;
        }

        *[data-title] {
            font-style: italic;
        }
            *[data-title]:hover {
                position: relative; 
                cursor: pointer;
            }
        
                *[data-title]:hover::after{
                    content: attr(data-title); 
                    position: absolute; 
        
                    top: 100%;
                    left: 0;
        
                    border: 1px solid;
                    border-radius: 1rem;
                    padding-inline: .5rem;
                    
                    font-family: inherit;
                    font-size: 80%;
                    text-align: center;

                    background: hsl(var(--clr-main1, 0, 0%, 100%)) ;


                    color: hsl(var(--clr-main1-ass, 0, 0%, 100%));
                    border-color: hsl(var(--clr-main1-ass, 0, 0%, 100%));
                    background: hsl(var(--clr-main1, 0, 0%, 100%)) ;
        
                    z-index: 2000; 
        
                    overflow: visible;
                }

            /*Animations*/

            .animationPulse {
                animation: pulse var(--animationLenght, 3s) infinite;
            }


            @keyframes pulse {
              0% {
                transform: scale(1);
              }
              10% {
                transform: scale(1.1);
              }

              20% {
                transform: scale(1);
              }
              100% {
                transform: scale(1);
              }
            }


/*
.boxTest{
    width: 400px;
    height: 300px;
    
}
    .boxTest:nth-of-type(2n){background: blue;}
    .boxTest:nth-of-type(2n+1){background: orange;}
    .boxTest:nth-of-type(4n+1){background: lightblue;}
    .boxTest:nth-of-type(1){background: red;}
    .boxTest:nth-of-type(2){background: green;}
    .boxTest:nth-of-type(3){background: purple;}
    .boxTest:nth-of-type(4){background: yellow;}