/*********************************************************/
/********************** R E S E T S **********************/
/*********************************************************/
 
/*Alegreya fonts, 400, 900*/
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,900;1,900&display=swap');

/* 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);
}

/* ------------------------------------------------------------ */
/*                     - ACCESSABILITY CLASSES  -               */
/* ------------------------------------------------------------ */

.sr-only {  /*sr-only: screen readers only: not visiable*/
    position: absolute; 
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px; 
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* added line */
    border: 0;
  }
  
  .skip-to-content { /* only for :focus*/
        position: absolute;
        z-index: 9999;
          
        padding: .5em 1em;
        margin-inline: auto;

        transition: transform 250ms ease-in;
  }
        .skip-to-content:focus {
            transform: translateY(100%);
        }


/******************************************************************************/
/****************************** V A R I A B L E S *****************************/
/******************************************************************************/

:root {
    /* ------------------------------------------------- */
    /*                   - MEDIA QUERIES -               */
    /* ------------------------------------------------- */
    --media-tablet-max: 35em;       /*   560px, does not work, it for reference only */
    --media-desktop-max: 45em;      /*   720px, does not work, it for reference only */
    --media-desktop-max: 80em;      /* 1,280px, does not work, it for reference only */  

    /* -------------------------------------------- */
    /*                 - TYPOGRAPHY -               */
    /* -------------------------------------------- */

    /* font-sizes */

    
        --fs-900: clamp(2.2rem, 8vw + 1rem, 3rem);
        --fs-800: 2rem;
        --fs-700: 1.8rem;
        --fs-600: 1.5rem;
        --fs-500: 1.2rem;
        --fs-400: 1.2rem;
        --fs-300: 0.9375rem;
        --fs-200: 0.875rem;

        --fs-local: 1rem; /* for small caps */
        
    /* font-families */
        --ff-serif: "Alegreya", serif;
        --ff-sans-cond: "Alegreya SC", serif; 
        --ff-sans-normal: "Alegreya", serif;

    /* if nothing else */        
        --paddingGap: 2em;
        --flow-space: 2em;
}


     /* media quaries for font sizes*/

     @media (min-width: 35em) { /*for tablets*/
        :root {
            --fs-900: clamp(2.5rem, 8vw + 1rem, 3.5rem);
            --fs-800: 2.2rem;
            --fs-700: 2rem;
            --fs-600: 1.7rem;
            --fs-500: 1.4rem;
            --fs-400: 1.1rem;
            --fs-300: 1rem;
            --fs-200: 0.9375rem;
    
            --fs-local: 1.1rem; /* for small caps */
        }
    }
     @media (min-width: 38em) { /*for tablets*/
        :root {
            --fs-900: clamp(2.8rem, 8vw + 1rem, 3.8rem);
            --fs-800: 2.5rem;
            --fs-700: 2.1rem;
            --fs-600: 1.9rem;
            --fs-500: 1.5rem;
            --fs-400: 1.2rem;
            --fs-300: 1.1rem;
            --fs-200: 1rem;
    
            --fs-local: 1.2rem; /* for small caps */
        }
    }

     @media (min-width: 40em) { /*for desktop*/
        :root {
            --fs-900: clamp(3rem, 8vw + 1rem, 4rem);
            --fs-800: 2.8rem;
            --fs-700: 2.4rem;
            --fs-600: 2rem;
            --fs-500: 1.7rem;
            --fs-400: 1.2rem; 
            --fs-300: 1.1rem;
            --fs-200: 1rem;
    
            --fs-local: 1.4rem; /* for small caps */
        }
    }
   
    @media (min-width: 45em) { /*for desktops*/
        :root {
            /* font-sizes */
            --fs-900: clamp(3.3rem, 8vw + 1rem, 4.5rem);
            --fs-800: 3rem;
            --fs-700: 2.6rem;
            --fs-600: 2.4rem;
            --fs-500: 1.9rem;
            --fs-400: 1.2rem; 
            --fs-300: 1.1rem;
            --fs-200: 1rem;
    
            --fs-local: 1.2rem; /* for small caps */
        } 
}




/***************************************************************************/
/****************************** C O L O U R S  *****************************/
/***************************************************************************/
/* ------------------------------------------------------------ */
/*             - C O L O U R S   V A R I A B E L E S  -         */
/* ------------------------------------------------------------ */

:root {
    --clr-main1: 285,  64% ,31%;                                  --clr-main2: 103,  19% ,32%;
        --clr-main1--dd: 285  64% 19%;                              --clr-main2--dd: 103  19% 12%;
                                                                    --clr-main2--d:  103  11% 30%;
        --clr-main1--l:  285  28% 64%;                              --clr-main2--l:  103  18% 81%;
        --clr-main1--ll: 285  28% 93%;                              --clr-main2--ll: 103  18% 92%; 
   
    --clr__h--main1: 	       285;    --clr__s--main1: 	    64%;     --clr__l--main1: 	      31%;  /* #691d82 main1        var( --clr__h--main1 )     var( --clr__s--main1 )     var( --clr__l--main1  )     */ 
        --clr__h--main1--dd:   285;        --clr__s--main1--dd: 64%;        --clr__l--main1--dd:  19%;  /* #3f114e main1--dd    var( --clr__h--main1--dd ) var( --clr__s--main1--dd ) var( --clr__l--main1-dd  )  */ 
        --clr__h--main1--d:    285;        --clr__s--main1--d : 64%;        --clr__l--main1--d :  19%;  /* #xxxxxx              var( --clr__h--main1--d )  var( --clr__s--main1--d )  var( --clr__l--main1-d   )  */ 
        --clr__h--main1--l:    286;        --clr__s--main1--l:  28%;        --clr__l--main1--l:   64%;  /* #b48ec0 main1--l     var( --clr__h--main1--l )  var( --clr__s--main1--l )  var( --clr__l--main1-l  )   */ 
        --clr__h--main1--ll:   288;        --clr__s--main1--ll: 28%;        --clr__l--main1--ll:  93%;  /* #f0e8f2 main1--ll    var( --clr__h--main1--ll ) var( --clr__s--main1--ll ) var( --clr__l--main1-ll  )  */ 

    --clr__h--main2: 	       103;    --clr__s--main2: 	    19%;     --clr__l--main2: 	      62%;  /* #96B08C main2        var( --clr__h--main2 )     var( --clr__s--main2 )     var( --clr__l--main2  )     */ 
        --clr__h--main2--dd:   103;        --clr__s--main2--dd: 11%;        --clr__l--main2--dd:  12%;  /* #1e231c main2--dd    var( --clr__h--main2--dd ) var( --clr__s--main2--dd ) var( --clr__l--main2-dd  )  */ 
        --clr__h--main2--d:    103;        --clr__s--main2--d : 19%;        --clr__l--main2--d :  30%;  /* #465b3e main2--d     var( --clr__h--main2--d )  var( --clr__s--main2--d )  var( --clr__l--main2-d   )  */
        --clr__h--main2--l:    103;        --clr__s--main2--l:  18%;        --clr__l--main2--l:   81%;  /* #cad7c5 main2--l     var( --clr__h--main2--l )  var( --clr__s--main2--l )  var( --clr__l--main2-l  )   */ 
        --clr__h--main2--ll:   103;        --clr__s--main2--ll: 18%;        --clr__l--main2--ll:  92%;  /* #eaefe8 main2--ll    var( --clr__h--main2--ll ) var( --clr__s--main2--ll ) var( --clr__l--main2-ll  )  */


    --clr-white: 285 0% 98%; /* pure white*/
    --clr-: 285 0% 3%;  /* dark gray */ 



    --clr__s--000:   5%;                        --clr__l--000:   5%;
    --clr__s--100:  10%;                        --clr__l--100:  10%;
    --clr__s--200:  20%;                        --clr__l--200:  20%;
    --clr__s--300:  30%;                        --clr__l--300:  30%;
    --clr__s--400:  40%;                        --clr__l--400:  40%;
    --clr__s--500:  50%;                        --clr__l--500:  50%;
    --clr__s--600:  60%;                        --clr__l--600:  60%;
    --clr__s--700:  70%;                        --clr__l--700:  70%;
    --clr__s--800:  80%;                        --clr__l--800:  80%;
    --clr__s--900:  90%;                        --clr__l--900:  90%;
    --clr__s--999:  95%;                        --clr__l--999:  95%;
} 




.clr1--A, .clr1--B { 
    --clr__article__bg:     var( --clr__h--main1 )      var( --clr__s--main1 )      var( --clr__l--main1--ll) ; 
    --clr__article__txt:    var( --clr__h--main1 )      var( --clr__s--main1 )      var( --clr__l--main1);  
    --clr__article__bg2:    var( --clr__h--main2 )      var( --clr__s--main2 )      var( --clr__l--main2--ll) ; /*for separator line, the next article background */ 

    --clr-white:            var( --clr__h--main1 )      var( --clr__s--main1 )      95%;    
    --clr-black:            var( --clr__h--main1 )      var( --clr__s--main1 )      4%;}    
.clr2--A, .clr2--B { 
    --clr__article__bg:     var( --clr__h--main2 )      var( --clr__s--main2 )      var( --clr__l--main2--ll) ; 
    --clr__article__txt:    var( --clr__h--main2--d)    var( --clr__s--main2--d)    var( --clr__l--main2--d) ;
    --clr__article__bg2:    var( --clr__h--main1 )      var( --clr__s--main1 )      var( --clr__l--main1--ll) ;  /*for separator line, the next article background */

    --clr-white:            var( --clr__h--main2 )      var( --clr__s--main2 )      95%;    
    --clr-black:            var( --clr__h--main2 )      var( --clr__s--main2 )      4%;}    

.clr1--A {  


    --clr__bg--h:   var( --clr__h--main1--ll );  --clr__bg--s:   var( --clr__s--main1--ll );   --clr__bg--ll:  var( --clr__l--main1--l );        /* #b48ec0 main1--l    */
    --clr__txt--h:  var( --clr__h--main1 );     --clr__txt--s:  var( --clr__s--main1 );      --clr__txt--l: var( --clr__l--main1 );          /* #3f114e main1--dd    */
    --clr__brd--h:  var( --clr__h--main1--l );  --clr__brd--s:  var( --clr__s--main1--l );   --clr__brd--l: var( --clr__l--main1--l );        /* #b48ec0 main1--l    */

    --clr__bgAccent--h:   var( --clr__h--main1 );     --clr__bgAccent--s:   var( --clr__s--main1 );         --clr__bgAccent--l:  var( --clr__l--main1 );            /* #691d82 main1       */
    --clr__txtAccent--h:  var( --clr__h--main1--ll ); --clr__txtAccent--s:  var( --clr__s--main1--ll );     --clr__txtAccent--l: var( --clr__l--main1--ll );       /* #f0e8f2 main1--ll   */
    --clr__brdAccent--h:  var( --clr__h--main1--l );  --clr__brdAccent--s:  var( --clr__s--main1--l );      --clr__brdAccent--l: var( --clr__l--main1--l );        /* #b48ec0 main1--l    */
    
}
    
.clr1--B {  
    --clr__bg--h:   var( --clr__h--main1 );     --clr__bg--s:   var( --clr__s--main1 );         --clr__bg--l:  var( --clr__l--main1 );            /* #691d82 main1       */
    --clr__txt--h:  var( --clr__h--main1--ll ); --clr__txt--s:  var( --clr__s--main1--ll );     --clr__txt--l: var( --clr__l--main1--ll );       /* #f0e8f2 main1--ll   */
    --clr__brd--h:  var( --clr__h--main1--l );  --clr__brd--s:  var( --clr__s--main1--l );      --clr__brd--l: var( --clr__l--main1--l );        /* #b48ec0 main1--l    */

    --clr__bgAccent--h:   var( --clr__h--main1--l );  --clr__bgAccent--s:   var( --clr__s--main1--l );   --clr__bgAccent--l:  var( --clr__l--main1--l );        /* #b48ec0 main1--l    */
    --clr__txtAccent--h:  var( --clr__h--main1 );     --clr__txtAccent--s:  var( --clr__s--main1 );      --clr__txtAccent--l: var( --clr__l--main1 );          /* #3f114e main1--dd    */
    --clr__brdAccent--h:  var( --clr__h--main1--l );  --clr__brdAccent--s:  var( --clr__s--main1--l );   --clr__brdAccent--l: var( --clr__l--main1--l );        /* #b48ec0 main1--l    */
}
    
.clr2--A {  



    --clr__bg--h:   var( --clr__h--main2--l );   --clr__bg--s:   var( --clr__s--main2--l );    --clr__bg--l: var( --clr__l--main2--l );         /* #cad7c5 main2--l    */
    --clr__txt--h:  var( --clr__h--main2--dd );  --clr__txt--s:  var( --clr__s--main2--dd );   --clr__txt--l: var( --clr__l--main2--dd );       /* #1e231c main2--dd   */
    --clr__brd--h:  var( --clr__h--main2 );      --clr__brd--s:  var( --clr__s--main2 );       --clr__brd--l: var( --clr__l--main2 );           /* #96b08c main2       */

    --clr__bgAccent--h:   var( --clr__h--main2--dd );   --clr__bgAccent--s:  var( --clr__s--main2--dd );   --clr__bgAccent--l: var( --clr__l--main2--dd );        /* #1e231c main2--dd   */
    --clr__txtAccent--h:  var( --clr__h--main2--l  );  --clr__txtAccent--s:  var( --clr__s--main2--l  );   --clr__txtAccent--l: var( --clr__l--main2--l  );       /* #cad7c5 main2--l    */
    --clr__brdAccent--h:  var( --clr__h--main2 );      --clr__brdAccent--s:  var( --clr__s--main2 );       --clr__brdAccent--l: var( --clr__l--main2 );           /* #96b08c main2       */

}

.clr2--B {  
    --clr__bg--h:   var( --clr__h--main2--dd );   --clr__bg--s:  var( --clr__s--main2--dd );   --clr__bg--l: var( --clr__l--main2--dd );        /* #1e231c main2--dd   */
    --clr__txt--h:  var( --clr__h--main2--l  );  --clr__txt--s:  var( --clr__s--main2--l  );   --clr__txt--l: var( --clr__l--main2--l  );       /* #cad7c5 main2--l    */
    --clr__brd--h:  var( --clr__h--main2 );      --clr__brd--s:  var( --clr__s--main2 );       --clr__brd--l: var( --clr__l--main2 );           /* #96b08c main2       */

    --clr__bgAccent--h:   var( --clr__h--main2--l );   --clr__bgAccent--s:   var( --clr__s--main2--l );    --clr__bgAccent--l: var( --clr__l--main2--l );         /* #cad7c5 main2--l    */
    --clr__txtAccent--h:  var( --clr__h--main2--dd );  --clr__txtAccent--s:  var( --clr__s--main2--dd );   --clr__txtAccent--l: var( --clr__l--main2--dd );       /* #1e231c main2--dd   */
    --clr__brdAccent--h:  var( --clr__h--main2 );      --clr__brdAccent--s:  var( --clr__s--main2 );       --clr__brdAccent--l: var( --clr__l--main2 );           /* #96b08c main2       */

}     

.clr12--A {  /* only use in green (main2) background */


    --clr__bg--h:   var( --clr__h--main1--ll);       --clr__bg--s:   var( --clr__s--main1--ll );       --clr__bg--l: var(--clr__l--main1--ll) ;      /* #f0e8f2 main1--ll   */
    --clr__txt--h:  var( --clr__h--main2--dd );   --clr__txt--s:  var( --clr__s--main2--dd );    --clr__txt--l: var( --clr__l--main2--dd );     /* #1e231c main2--dd   */
    --clr__brd--h:  var( --clr__h--main2--dd );   --clr__brd--s:  var( --clr__s--main2--dd );    --clr__brd--l: var( --clr__l--main2--dd );     /* #1e231c main2--dd   */

    --clr__bgAccent--h:   var( --clr__h--main1 );     --clr__bgAccent--s:   var( --clr__s--main1 );         --clr__bgAccent--l:  var( --clr__l--main1 );            /* #691d82 main1       */
    --clr__txtAccent--h:  var( --clr__h--main1--ll ); --clr__txtAccent--s:  var( --clr__s--main1--ll );     --clr__txtAccent--l: var( --clr__l--main1--ll );       /* #f0e8f2 main1--ll   */
    --clr__brdAccent--h:  var( --clr__h--main1--l );  --clr__brdAccent--s:  var( --clr__s--main1--l );      --clr__brdAccent--l: var( --clr__l--main1--l );        /* #b48ec0 main1--l    */
}  

.clr12--B {  
    --clr__bg--h:   var( --clr__h--main1 );      --clr__bg--s:   var( --clr__s--main1 );       --clr__bg--l: var( --clr__l--main1 );            /* #691d82 main1       */    
    --clr__txt--h:  var( --clr__h--main2--l  );  --clr__txt--s:  var( --clr__s--main2--l  );   --clr__txt--l: var( --clr__l--main2--l  );       /* #cad7c5 main2--l    */
    --clr__brd--h:  var( --clr__h--main2 );      --clr__brd--s:  var( --clr__s--main2 );       --clr__brd--l: var( --clr__l--main2 );           /* #96b08c main2       */

    --clr__bgAccent--h:   var( --clr__h--main1 );     --clr__bgAccent--s:   var( --clr__s--main1 );         --clr__bgAccent--l:  var( --clr__l--main1 );            /* #691d82 main1       */
    --clr__txtAccent--h:  var( --clr__h--main1--ll ); --clr__txtAccent--s:  var( --clr__s--main1--ll );     --clr__txtAccent--l: var( --clr__l--main1--ll );       /* #f0e8f2 main1--ll   */
    --clr__brdAccent--h:  var( --clr__h--main1--l );  --clr__brdAccent--s:  var( --clr__s--main1--l );      --clr__brdAccent--l: var( --clr__l--main1--l );        /* #b48ec0 main1--l    */
} 

.clr21--A {  
    --clr__bg--h:   var( --clr__h--main2--l );    --clr__bg--s:   var( --clr__s--main2--l );     --clr__bg--l: var( --clr__l--main2--l );       /* #cad7c5 main2--l    */
    --clr__txt--h:  var( --clr__h--main1 );       --clr__txt--s:  var( --clr__s--main1 );        --clr__txt--l:var( --clr__l--main1 );          /* #691d82 main1       */
    --clr__brd--h:  var( --clr__h--main1 );       --clr__brd--s:  var( --clr__s--main1 );        --clr__brd--l:var( --clr__l--main1 );          /* #691d82 main1       */

    --clr__bgAccent--h:   var( --clr__h--main1--l );   --clr__bgAccent--s:   var( --clr__s--main1--l );    --clr__bgAccent--l: var( --clr__l--main1--l );         /* #cad7c5 main2--l    */
    --clr__txtAccent--h:  var( --clr__h--main2--dd );  --clr__txtAccent--s:  var( --clr__s--main2--dd );   --clr__txtAccent--l: var( --clr__l--main2--dd );       /* #1e231c main2--dd   */
    --clr__brdAccent--h:  var( --clr__h--main2 );      --clr__brdAccent--s:  var( --clr__s--main2 );       --clr__brdAccent--l: var( --clr__l--main2 );           /* #96b08c main2       */

}


.fill {

    fill: hsl(var(--clr__bg--h) var(--clr__bg--s) var(--clr__bg--l) );

}

.stroke {

    stroke: hsl(var( --clr__txt--h ) var(--clr__txt--s) var( --clr__txt--l)); 
    stroke-width: 1px;
}


/* ------------------------------------------------------------ */
/*     - C O L O U R S   U T I L I T Y    C L A S S E S  -      */
/* ------------------------------------------------------------ */
.clr__bg--fill { background-color: 	hsl(var( --clr__bg--h  ) var(--clr__bg--s) 	var( --clr__bg--l )	); }
.clr__txt {      color:             hsl(var( --clr__txt--h ) var(--clr__txt--s) var( --clr__txt--l )	); }
.clr__brd{       border-color: 	    hsl(var( --clr__brd--h ) var(--clr__brd--s) var( --clr__brd--l)	); }

body, header, main, footer, article {
    background-color: hsl( var(--clr__article__bg));
    color: hsl( var(--clr__article__txt));
}


.clr__svg--fill   {fill:            var(--fill, hsl(var( --clr__bg--h  ) var(--clr__bg--s) 	var( --clr__bg--l )	)); }	
.clr__svg--stroke {stroke: 	        var(--stoke, hsl(var( --clr__txt--h ) var(--clr__txt--s) var( --clr__txt--l))); stroke-width: 1; }

.clr__svg--fill--none{ fill: none; }
.clr__svg--stroke--none{ stroke: none; }


.clrLightGradient--001 {  --clr__bg--l:  5%; --clr__txt--l: 55%; --clr__brd--l: 35%; }
.clrLightGradient--100 {  --clr__bg--l: 10%; --clr__txt--l: 60%; --clr__brd--l: 40%; }
.clrLightGradient--200 {  --clr__bg--l: 20%; --clr__txt--l: 70%; --clr__brd--l: 50%; }
.clrLightGradient--300 {  --clr__bg--l: 30%; --clr__txt--l: 80%; --clr__brd--l: 60%; }
.clrLightGradient--400 {  --clr__bg--l: 40%; --clr__txt--l: 90%; --clr__brd--l: 60%; }
.clrLightGradient--450 {  --clr__bg--l: 40%; --clr__txt--l:  5%; --clr__brd--l: 5%;  } 
.clrLightGradient--500 {  --clr__bg--l: 50%; --clr__txt--l: 90%; --clr__brd--l: 70%; }
.clrLightGradient--550 {  --clr__bg--l: 50%; --clr__txt--l: 30%; --clr__brd--l: 30%; }
.clrLightGradient--600 {  --clr__bg--l: 60%; --clr__txt--l: 30%; --clr__brd--l: 30%; }
.clrLightGradient--700 {  --clr__bg--l: 70%; --clr__txt--l: 40%; --clr__brd--l: 40%; }
.clrLightGradient--800 {  --clr__bg--l: 80%; --clr__txt--l: 50%; --clr__brd--l: 50%; }
.clrLightGradient--900 {  --clr__bg--l: 90%; --clr__txt--l: 60%; --clr__brd--l: 60%; }
.clrLightGradient--999 {  --clr__bg--l: 95%; --clr__txt--l: 75%; --clr__brd--l: 75%; }


.clrSatGradient--1A {  --clr__bg--s:  28%; --clr__txt--s: 64%; --clr__brd--s: 64%; }
.clrSatGradient--1B {  --clr__bg--s:  64%; --clr__txt--s: 28%; --clr__brd--s: 28%; }
.clrSatGradient--2A {  --clr__bg--s:  19%; --clr__txt--s: 11%; --clr__brd--s: 19%; }
.clrSatGradient--2B {  --clr__bg--s:  11%; --clr__txt--s: 19%; --clr__brd--s: 19%; }

.clrSatGradient--001 {  --clr__bg--s:  5%; --clr__txt--s: 55%; --clr__brd--s: 35%; }
.clrSatGradient--100 {  --clr__bg--s: 10%; --clr__txt--s: 60%; --clr__brd--s: 40%; }
.clrSatGradient--200 {  --clr__bg--s: 20%; --clr__txt--s: 70%; --clr__brd--s: 50%; }
.clrSatGradient--300 {  --clr__bg--s: 30%; --clr__txt--s: 80%; --clr__brd--s: 60%; }
.clrSatGradient--400 {  --clr__bg--s: 40%; --clr__txt--s: 90%; --clr__brd--s: 60%; }
.clrSatGradient--450 {  --clr__bg--s: 40%; --clr__txt--s:  5%; --clr__brd--s: 5%;  } 
.clrSatGradient--500 {  --clr__bg--s: 50%; --clr__txt--s: 90%; --clr__brd--s: 70%; }
.clrSatGradient--550 {  --clr__bg--s: 50%; --clr__txt--s: 30%; --clr__brd--s: 30%; }
.clrSatGradient--600 {  --clr__bg--s: 60%; --clr__txt--s: 30%; --clr__brd--s: 30%; }
.clrSatGradient--700 {  --clr__bg--s: 70%; --clr__txt--s: 40%; --clr__brd--s: 40%; }
.clrSatGradient--800 {  --clr__bg--s: 80%; --clr__txt--s: 50%; --clr__brd--s: 50%; }
.clrSatGradient--900 {  --clr__bg--s: 90%; --clr__txt--s: 60%; --clr__brd--s: 60%; }
.clrSatGradient--999 {  --clr__bg--s: 95%; --clr__txt--s: 75%; --clr__brd--s: 75%; }





/* ------------------------------------------------------------ */
/*                        - TYPOGRAPHY  -                       */
/* ------------------------------------------------------------ */

/* font sizes, weight, basic reset */



.fs-900 { font-size: var(--fs-900); }
.fs-800 { font-size: var(--fs-800); }
.fs-700 { font-size: var(--fs-700); }
.fs-600 { font-size: var(--fs-600); }
.fs-500 { font-size: var(--fs-500); }
.fs-400 { font-size: var(--fs-400); }
.fs-300 { font-size: var(--fs-300); }
.fs-200 { font-size: var(--fs-200); }

.fs-900,  .fs-800,  .fs-700, .fs-600 {
    line-height: 1.1;
}

p {
    line-height: 1.6;
}

/* balancing out titels, */
h1, h2, h3 {
    text-wrap: balance;
} 

@supports(orphans: 3){
    h1, h2, h3, h4, h5, h6, span, p {
        orphans: 3;
    }
}

@supports(widows: 3){
    h1, h2, h3, h4, h5, h6, span, p {
        widows: 3;
    }
}

/* text decorations */

.uppercase { text-transform: uppercase; }



.italic {
    font-style: italic;
}    
.bold {
    
    font-weight: var(--fontWeight, 600);
}   

.decor--textUnderline {
    text-decoration: underline dotted;
}
.decor--textStroke, 
.decor--textStroke > * {
    text-decoration: line-through;
}

.decor--textRotate {
    padding-inline: .5rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
}


/* --------------------------- */
.stickerHeading{
    width: 20vw;
    height: 3vw;

    width: clamp(100px, 20vw, 200px);
    height: clamp(50px, 3vw, 60px);
    font-size: clamp(36px, 20vw ,36px);

}

.stickerHeading:last-of-type{
    width: clamp(200px, 20vw, 230px);
}

    .stickerHeading--left {
        float: left;
    }

    .stickerHeading--right {
        float: right;
    }



.stickerHeading > svg {
    width: 100%;
    height: auto;
    margin: auto;
    aspect-ratio: 1/1;

    object-fit: contain;
}



.sticker {
    fill: hsl(var(--clr__txt--h), var(--clr__txt--s), var(--clr__txt--l));
}

.outline {
    
    stroke: hsl(var(--clr-white));
    stroke-width: .6vw;
    stroke-linecap: round;
    stroke-linejoin:round;
}
.decor--textShadow {
    text-shadow: 2px 2px 10px hsla(var(--clr-black) /.7);
}


/*****************************************************************************/
/********************** U T I L I T Y    C L A S S E S  **********************/
/*****************************************************************************/

/* ---------------------------------------------------------- */
/*                   -  ARTICLES AND CONTENTS  -              */
/* ---------------------------------------------------------- */
article{
    display: grid;
    grid-template-areas: 'overlay';

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

    padding-block: clamp(15px, 5svh, 40px);

}

    article > * { grid-area: overlay;}

    article .flex {
        place-content: space-evenly;
        place-items: center;
    }

.content--narrow, .content--normal, .content--wide, .content--full{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.content--full { width: 100svw;  }
    @media (width >= 560px) {.content--full { width: 100vw;  }}

.content--narrow, .content--normal, .content--wide {
    width: clamp(280px, 95%, 360px); 
}
    @media (width >= 390px) {
        .content--narrow, .content--normal, .content--wide {
            width: clamp(360px, 92%, 394px);  } }

    @media (width >= 430px) {
        .content--narrow, .content--normal, .content--wide {
            width: clamp(395px, 93%, 550px); } }     
            
    @media (width >= 600px) {
        .content--normal, .content--wide {
            width: clamp(551px, 94%, 800px); } }       
            
    @media (width >= 860px) {
        .content--normal{
            width: clamp(801px, 95%, 980px); } 
        .content--wide {
            width: clamp(810px, 95%, 980px); }
        }               

    @media (width >= 1024px) {
        .content--wide {
            width: clamp(980px, 80%, 1800px); }
        }  

.mediaContent--text{        
    container: mediaContent--text / inline-size;        
    padding: 2% 5%;
    margin: auto;
    width: 100%;
    height: 100%;

}
    .mediaContent--text--p {font-size: clamp(16px, 5cqw, 18px); line-height: 1.3; }
    .mediaContent--text--h3 {font-size: clamp(24px, 8cqw, 32px); line-height: 1;} 
    .mediaContent--text--h2 {font-size: clamp(36px, 10cqw, 44px); line-height: .9;}
        @container (width >= 390px) { 

            .mediaContent--text--p {font-size: clamp(18px, 5cqw, 20px); line-height: 1.2;  }
            .mediaContent--text--h3 {font-size: clamp(24px, 1cqw, 32px); line-height: 1;} 
            .mediaContent--text--h2 {font-size: clamp(36px, .1cqw, 44px); line-height: .9;}}
        @container (width >= 430px) { 

            .mediaContent--text--p {font-size: clamp(20px, 10cqw, 22px); line-height: 1.2;}  
            .mediaContent--text--h3 {font-size: clamp(36px, 8cqw, 40px); line-height: 1;} 
            .mediaContent--text--h2 {font-size: clamp(44px, 12cqw, 52px);line-height: .8;}}
        @container (width >= 600px) { 

            .mediaContent--text--p {font-size: clamp(20px, 10cqw, 22px); line-height: 1.2; } 
            .mediaContent--text--h3 {font-size: clamp(40px, 10cqw, 48px); line-height: .9;} 
            .mediaContent--text--h2 {font-size: clamp(48px, 14cqw, 58px);line-height: .8;}}
        @container (width >= 860px) { 

            .mediaContent--text--p {font-size: 22px; line-height: 1.2; } 
            .mediaContent--text--h3 {font-size: clamp(48px, 8cqw, 52px);line-height: .8;} 
            .mediaContent--text--h2 {font-size: clamp(54px, 16cqw, 58px);line-height: .8}}

/*--------------------------------------------------------------------*/
        .mediaContent__img{
            container: imgContainer / inline-size;
            width: clamp(250px, 80%, 800px);
            height: minmax(200px,  600px);
        }

        .mediaContent__img--landscape{
            container: imgContainer / inline-size;
            width: clamp(250px, 80%, 800px);
            height: minmax(200px,  600px);
        }     
        
        .mediaContent__img--portait{
            container: imgContainer / inline-size;
            width: clamp(200px, 80%, 600px);
            height: clamp(350px, 80%, 600px);
        } 
            .mediaContent__img__BG{
                width: 100%; 
                height: 100%; 

                background-repeat: no-repeat;
                object-fit: cover; 
                background-size: cover;
                border-radius: var(--borderRadius, 1rem);
            }

.mediaContent--icon{

    width: 30px; 
    height: 30px;
}


.bgImg,
.bgImg::after {
    container: imgContainer / inline-size;
    width: 100%;
    height: 100%;

    position: relative;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.bgImg::after {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}

.bgImg::after {
    content: "";

    top: 0;
    left: 0;
}
/* -------------------------------------------- */
/*                -  LAYOUTS  -                 */
/* -------------------------------------------- */

.layout--cards {
    --layout--gap: 2rem;
    min-width: 100%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--section--cards--width, 400px), 1fr));
    justify-content: center;

    justify-items: center;
    align-items: center;

    gap: var(--layout--gap, 2rem);

}

    .layout--cards .card {
        padding-block: var(--layout--gap, 2rem);
    }



.layout--float--left {
    float: left;
}

.layout--float--right {
    float: right;
}
/*-----------------------------------------------------------*/
/*---------------------- - A L I G N  -----------------------*/
/*-----------------------------------------------------------*/
.align--center--margin{
    margin-inline: auto;
}

.align--center--flex{
    margin-inline: auto;
}

.align--spaceEvenly--flex{
    justify-content: space-evenly;
}


/* ---------------------------------------------------------- */
/*                   -  WRAPS AND CONTAINERS  -               */
/* ---------------------------------------------------------- */




/*--------------------------------------------------------------------*/
    .mediaContent--text--p{
        text-align: left;
        text-indent: 2rem;
    }

    .mediaContent--text--p:first-of-type{
        text-indent: 3rem;
    }

    .mediaContent--text--p:not(:first-child){
        margin-top: 1.5rem;  
    }

    .mediaContent--text--p  span{
        font-size: inherit;
        font-style: italic;
    }

    .wrapper--text__subtitle { 
        font-size: clamp(24px, 20cqi, 32px);
        line-height: minmax(8cqi, .9); 




    }




.container {  /*center inner elements into the middle*/
        padding: var(--paddingGap);

        container-type: inline-size;
        
        margin-inline: auto;
        width: 100%;
        height: 100%;
}



/* --------------------------------------------- */
/*                 -  LAYOUTS  -                 */
/* --------------------------------------------- */


.flex {
    display: flex;
}

.flex-row {
    flex-direction: column;

}

    @media (width >= 700px) {
        .flex-row {
            flex-direction: row;
        }
    }

.flex-column {
    flex-direction: column;
}


.flex-cluster {
    flex-wrap: wrap;   /*breaking the lines for more elements*/
}


.flex-flexibleGrid { 
    display: flex;
    gap: var(--gap, 1rem);
}

    .flex-flexibleGrid > * {   /* adding (wrapping) the elements into the next line, the elements can grow */
        flex: 1;
    }

    
.grid {
    display: grid;
}

.grid--centerItems{
    place-items: center;
}


.grid-reel {  /*  only the current ones are visiable */
    grid-auto-flow: column;
    grid-auto-columns: 45%;

    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-padding: 1rem;

    padding: var(--paddingGap);
}

    .grid-reel > * {
        scroll-snap-align: start;
    }

/*----------------------------------------------------------------------------------------------------*/   
.grid-gallery {

    --grid-gallery__size: clamp(5rem, 10vh, 8rem);
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(var(--grid-gallery__size), 1fr));
    grid-template-rows: repeat(auto-fit, minmax(var(--grid-gallery__size), 1fr));
    grid-auto-flow: row dense;

    padding-block: 2em;
  
    margin-inline: auto;
  
    gap: 2em;

}

.grid-gallery > * {
    width: 100%;
    max-height: 100%;

}

       .grid-gallery .gallery--tall {
            grid-row: span 2;
        }

        .grid-gallery .gallery--wide {
            grid-column: span 2;  
        }

        .grid-gallery .gallery--large {

            grid-column: span 2; 
            grid-row: span 2;

        }

        .grid-gallery .gallery--xlarge {

            grid-column: span 3; 
            grid-row: span 3;


        }




/* overlaying elements */    
.grid-overlay {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'overlay';

}

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


/* layout content */
.layout--contentBg {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'overlay';

    justify-items: center;
    align-content: space-evenly;
    z-index: 1;
}

    .layout__content, .layout__bg {
        grid-area: overlay;
    }

    .layout__content {
        z-index: 100;
    }

    .layout__bg {    
        z-index: 2;
        opacity: 50%;

        overflow: hidden;
    }


    @media (width >= 800px) {
        .layout--contentBg {          
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;
            grid-template-areas: 'left right';


            align-content: space-evenly;
        }

            .layout--contentBg--left  { grid-area:  left;  }
            .layout--contentBg--right { grid-area: right;  opacity: 1; }
        }


/* adding extra margin for all the not first child*/    
.flow > *:where(:not(:first-child)) {  /* or--  .flow > * + *  --*/
    margin-top: var(--flow-space, 1rem);
}


/* -------------------------------------------------------- */
/*                  - CONNECTING ELEMENTS -                 */
/* -------------------------------------------------------- */

*[data-title] {
    font-style: italic;
}
    *[data-title]:hover {
        position: relative; 
        cursor: pointer;
    }

        *[data-title]:hover::after{
            content: attr(data-title); 
            position: absolute; 

            top: 0;
            left: 0;

            border: 1px solid;
            border-radius: 1rem;
            padding-inline: .5rem;
            
            font-family: inherit;
            font-size: 60%;
            color: hsl(var(--clr__txt--h) var(--clr__txt--s)var(--clr__txt--l));
            border-color: hsl(var(--clr__brd--h) var(--clr__brd--s)var(--clr__brd--l));
            background: hsl(var(--clr__bg--h) var(--clr__bg--s)var(--clr__bg--l));

            z-index: 10; 

            overflow: visible;
        }

/* -------------------------------------------------------- */
/*                 - T A B U L A T O R S  -                 */
/* -------------------------------------------------------- */

/* ------------------- Tabs: compasulary  ----------------- */


/* e.g. 


*/


/*new check them out*/
.tabs{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
/**/
.tabs input[type="radio"]{  display: none; }

.tabs .tab { display: none; } 

.tabs input[type="radio"]:checked + label + .tab{ display: block;  }

.tabs__content { display: none;}
/*
.tabs input label{

}
*/
/* TO DO ADD VARIABLES TO FILL AND BACKGROUND */        
.tabs input[type='radio'] + label {
    --stroke: hsl(var(--clr-black)) ;
    --stroke__width: 1;
    --fill: hsl(var(--clr__txt--h) var(--clr__txt--s) 60%);
}

.tabs input[type='radio']:checked + .tabsLabel { 
    background: hsl(var(--clr__bg--h) var(--clr__bg--s)var(--clr__l--900)); 

    font-style: italic;
}

.tabs--circles input[type='radio']:checked + .tabsLabel {
    background: transparent;


    --fill: hsl(var(--clr__bgAccent--h) var(--clr__bgAccent--s) var(--clr__bgAccent--l));
    --stroke: hsl(var(--clr__brdAccent--h) var(--clr__brdAccent--s) var(--clr__brdAccent--l));


}

/* --------------------- Tabs: layouts -------------------- */
/*tops & bottoms*/

/*
            <article class="content--wide"  >  <!--set wide for the element-->
                <div class="tabs tabs--top "> <!--select Top or Bottom-->
                    <input id="tabFirst" type="radio" class="tabsRadio" name="tabs-example" checked> <!-- name="has to be the same for all tabulator, id=has to be different for each of the tabs"-->
                    <label for="tabFirst" class="tabsLabel">First Tab</label>
                    <div class="tabs__content">
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id culpa consequuntur cum suscipit adipisci esse?</p>
                    </div>


                    <input id="tabSecond" type="radio" class="tabsRadio" name="tabs-example" >
                    <label for="tabSecond" class="tabsLabel">Second Tab</label>
                    <div class="tabs__content">
                        <p>Wit amet consectetur adipisicing elit. Id culpa consequuntur cum suscipit adipisci esse?</p>
                    </div>

                    <input id="tabThird" type="radio" class="tabsRadio" name="tabs-example" >
                    <label for="tabThird" class="tabsLabel">3rd Tabs</label>
                    <div class="tabs__content">
                        <p>Id culpa consequuntur cum suscipit adipisci esse? Amet consectetur adipisicing elit. </p>
                    </div>
                </div>
            </article>
*/
.tabs--top .tabsRadio:checked+.tabsLabel+.tabs__content, 
.tabs--bottom .tabsRadio:checked+.tabsLabel+.tabs__content{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}


    .tabs.tabs--top .tabs__content {
        order: 1;
    }

    .tabs.tabs--bottom .tabs__content {
        order: -1;
    }
.tabsLabel{
    cursor: pointer;
}






.tabs--left{
    /*tabs--left label orgainzed on the left side, start at the same line */
    display: grid;
    grid-template-columns: 30px 1fr;

    grid-template-areas: 
        'label1 content'
        'label2 content'
        'label3 content'
        'label4 content';
    gap: clamp(5px,5%,1rem);        
}
    .label1 { grid-area: label1; }
    .label2 { grid-area: label2; }
    .label3 { grid-area: label3; }
    .label4 { grid-area: label4; }

    .tabs__content { grid-area: content; }    

           
.tabs--right {
    /*tabs--right label orgainzed on the right side, they all centered */ 
    display: grid;
    grid-template-columns: 1fr 30px;

    grid-template-areas: 
        'content label1 '
        'content label2 '
        'content label3 '
        'content label4 ';
}
    .tabs--right label{
        text-align: center;
    }

    .tabs__heading{
        writing-mode: vertical-rl;
        text-orientation: upright;
        letter-spacing: -2px;
    }
       /**---------------------------------*/    








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

.tabs--circles{
    display: flex;
    flex-wrap: wrap;
    justify-self: center;
    align-self: center;
    justify-content: center; 
    gap: 1rem;
}

    .tabs--circles label {
        margin-inline: auto;

    }


    .tabs--circles .tabs .contactTabs--tab {
        order: -1;
    } 

    .tabs .tabs--circles .tabs label {
        background: transparent;
    }

    .tabs--circles__label{
        width: 50px;
        height: 50px;
    }

    .tabs--circles .tabs .label1 {
        margin-left: 20%;
    }




    .tabs--circles__labelSVG{     
        --fill: hsl(var(--clr__bg--h) var(--clr__bg--s)var(--clr__bg--l));
        --stroke: hsl(var(--clr__brd--h) var(--clr__brd--s)var(--clr__brd--l));

        stroke-width:2; 
        stroke: var(--stroke); 

        


    }

    .tabs--circles input[type='radio']:checked + label {
        background: transparent;
        --stroke: hsl(var(--clr-black)) ;
        --fill: hsl(var(--clr__txt--h) var(--clr__txt--s) 80%);

    }

    .tabs__SVG{
        width: 30px;
        height: 30px;
    }

    .tabs__SVG--svg{
        stroke: var(--stroke); 
        stroke-width:1; 
        fill: var(--fill);
    }

/* -------------------------------------------------------- */
/*                - B A C K G R O U N D S -                 */
/* -------------------------------------------------------- */

/*  Utility classes */

.background--repeat {
    background-repeat: repeat;
}

.background--cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
} 

.background--contain {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

} 

.background--repeatX{
    background-repeat: repeat-x;
    background-size: contain;
}

.background__separator {
    background: linear-gradient(hsl(var(--clr__article__bg)), hsl(var(--clr__article__bg2)));
    height: 100px;
    width: 100vw;
}


/* same background for more than one article 

    Example: 
        <div class="decor--background grid grid-overlay " > 
            
            <div  class="decor--bgContainer">  
                <div id="typewritter--remington" class="bgImg mediaContent__img--portait decor--glassWithShadow decor--turn"  >
                </div>
                <div id="phone--Dkay" class="bgImg mediaContent__img--portait decor--glassWithShadow decor--turn" >
                </div>
                <div id="typewritter--AGluck" class="bgImg mediaContent__img--portait decor--glassWithShadow decor--turn" >
                </div>
            </div>
            <article></article>
            <article></article>
        </div>
*/
.decor--bgContainer {
    display: grid;
    grid-template-rows:  repeat(auto-fit, minmax(200px, 1fr));
    align-items: center;

}
.decor--bgContainer div {
    display: none;
    width: 0;
    height: 0;
}
    /*TypeA - first line on the right*/
    .decor--bgContainer__A div:nth-of-type(even) { --decorTrun: -3deg;}
    .decor--bgContainer__A div:nth-of-type(odd) {  --decorTrun: 5deg; justify-self: end;}
    /*TypeA - first line on the left*/
    .decor--bgContainer__B div:nth-of-type(even) { --decorTrun: 2deg;  justify-self: end; }
    .decor--bgContainer__B div:nth-of-type(odd) { --decorTrun: -5deg; }


    .decor--background article {
        background: transparent;

    }  
    
    article.decor--background  {
        background: transparent;

    } 
@media (width >=900px) {
    .decor--bgContainer div {
        display: block;
        width: clamp(200px, 50%, 400px);
        aspect-ratio: 4/3;
        height: auto;
        margin-inline: 5rem;
        
    }


}




/* -------------------------------------------------------- */
/*                     - DECORATION -                       */
/* -------------------------------------------------------- */

.smallCaps {
    display: inline-block;
    text-transform: uppercase;
    font-size: var(--fs-local);
}
    .smallCaps::first-letter{
        font-size: calc(var(--fs-local) * 1.1);
    } 
.decor--echo {
    position: relative;
    transform-origin: 100% 50%;
    z-index: 1;

    margin-inline: auto;
}
    .decor--echo::after{

        content: attr(data-text);
        position: absolute;

        top: 88%;
        left: 0%;


        z-index: -1;

        
        transform: rotateX(180deg);
        

        background: linear-gradient(0deg, hsl(var(--clr__txt--h), var(--clr__s--200), var(--clr__l--400)) 0, transparent 90%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;

        opacity: .9;

        filter: blur(3px);

        text-shadow: none; 

    }


.decor--overlay > * {

    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    
    border-image: var(--decor--overlay__image, 
                        linear-gradient(
                            hsl( var(--clr-main1) / .5),
                            hsl(var(--clr-main2)  / .5))) 
                fill 1;
}



.decor--bright {
    filter: brightness(2000%);
}

.decor--colourLilac{
    /* https://codepen.io/sosuke/pen/Pjoqqp  Credit goes to MultiplyByZer0 for their post & Barrett Sonntag
    light    sepia(15%) saturate(96%) hue-rotate(238deg) brightness(97%) contrast(95%);
    dark     sepia(47%) saturate(3354%) hue-rotate(269deg) brightness(90%) contrast(101%);*/

    filter:  sepia(47%) saturate(96%) hue-rotate(238deg) brightness(90%) contrast(87%);
}

.decor--colourGreen{
    /* https://codepen.io/sosuke/pen/Pjoqqp  Credit goes to MultiplyByZer0 for their post & Barrett Sonntag 
    light    sepia(4%) saturate(242%) hue-rotate(58deg) brightness(103%) contrast(90%);
    dark    sepia(14%) saturate(527%) hue-rotate(59deg) brightness(104%) contrast(87%);*/
    filter:  invert(94%) sepia(4%) saturate(542%) hue-rotate(58deg) brightness(103%) contrast(90%);
}

.decor--colourShade {
    background-color: hsl(var( --clr__txt--h ) var(--clr__txt--s) var( --clr__txt--l )	);
    opacity: .4;

    width: 200px;
    height: 200px;
    
}

.decor--glasseffect {
  /*  --glasseffectStrenght: .6; */
    background-color: hsl( var(--clr-white, white) / var(--glasseffectStrenght, .6));
 }
 
    @supports (backdrop-filter: blur(10xp)) {
        .decor--glasseffect {
            
            /* From https://css.glass */
            
            background-color: hsl( var(--clr-white, white) / .6);
            -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
            border: 1px solid hsl( var(--clr-black, black) / .6);
        }
    }  

.decor--glassWithShadow {

    background-color: hsl(var(--clr-white) / .2);
    border: 2px solid hsl(var(--clr-white) );
    box-shadow: 
        inset 20px 20px 60px hsl(var(--clr-white)),
        inset -20px -20px 60px hsl(var(--clr-black)),
              0px 19px 38px 0px hsl(var(--clr-black) / .2),
              11px 15px 12px -5px hsl(var(--clr-black) / .2);
}
     
        @supports (backdrop-filter: blur(10xp)) {
            .decor--glassWithShadow > * {
                background-color: hsl( var(--clr-white) / .5);
                -webkit-backdrop-filter: blur(20px);
                backdrop-filter: blur(20px);
                border: 1px solid rgba(255, 255, 255, 0.3);
            }
        }     

.decor--dropShadow {
    /*    box-shadow: 0;*/
        filter: drop-shadow(.5rem .5rem .5rem hsl(var(--clr-black) / .3));
}  

.decor--dropShadow__200 {
    /*    box-shadow: 0;*/
        filter: drop-shadow(.5rem .5rem .5rem hsl(var(--clr-black) / .35));
}

.decor--dropShadow__300 {
    /*    box-shadow: 0;*/
        filter: drop-shadow(.5rem .5rem .5rem hsl(var(--clr-black) / .4));
}


.decor--dropShadow__400 {
    /*    box-shadow: 0;*/
        filter: drop-shadow(.5rem .5rem .5rem hsl(var(--clr-black) / .45));
}

.decor--dropShadow__500 {
    /*    box-shadow: 0;*/
        filter: drop-shadow(.5rem .5rem .3rem hsl(var(--clr-black) / .5));
}   

.decor--dropShadow__900 {
    /*    box-shadow: 0;*/
        filter: drop-shadow(.5rem .5rem .2rem hsl(var(--clr-black) / .8));
}
.decor--dropShadow--bottom {
        box-shadow: .5rem .5rem 1rem hsl(var(--clr-black) / .3);   
    }
    @supports(filter: drop-shadow(0 .5rem  1rem hsl(var(--clr-black) / .3))){
        .decor--dropShadow--bottom{
            box-shadow: 0;
            filter: drop-shadow(0 .5rem  1rem hsl(var(--clr-black) / .3));
        }
    }

.decor--boxShadow {
    padding: .5rem;
    box-shadow: 
        inset .5rem .5rem 1rem hsl( var(--clr-black) / .3),
        inset -.5rem -.5rem 1rem  hsl( var(--clr-white) / .3);

}    

.decor--borderRadius {
    border-radius: 1rem;
}

.decor--blur_100 {
    opacity: 0.95;
}
    @supports (filter: blur(1rem)) {
        .decor--blur_100 {
            filter: blur(.07rem);
        }
    }


  
.decor--blur_200 {
    opacity: 0.9;
}
    @supports (filter: blur(1rem)) {
        .decor--blur_200 {
            filter: blur(.08rem);
        }
    }

.decor--blur_300 {
    opacity: 0.8;
}
    @supports (filter: blur(1.2rem)){
        .decor--blur_300 {
            filter: blur(0.2rem);
        }
    }


.decor--blur_400 {
    opacity: 0.75;
}
    @supports (filter: blur(1.5rem)){
        .decor--blur_400 {
            filter: blur(0.5rem);
        }
    }

.decor--blur_500 {
    opacity: 0.70;
}
    @supports (filter: blur(1.5rem)){
        .decor--blur_500 {
            filter: blur(.6rem);
        }
    }   

.decor--turn { transform: rotate(var(--decorTrun, 10deg));}
.decor--turn_10   {transform: rotate(10deg);}
.decor--turn_20   {transform: rotate(20deg);}
.decor--turn_30   {transform: rotate(30deg);}
.decor--turn_45   {transform: rotate(45deg);}
.decor--turn_90   {transform: rotate(90deg);}
.decor--turn_180  {transform: rotate(180deg);} /*flip - flop*/
.decor--turn_-10  {transform: rotate(350deg);}
.decor--turn_-20  {transform: rotate(340deg);}
.decor--turn_-30  {transform: rotate(330deg);}
.decor--turn_-45  {transform: rotate(315deg);}
.decor--turn_-90  {transform: rotate(270deg);}


    .decor--scrollbar::-webkit-scrollbar{
        width: 10px;
        height: 10px;
        z-index: 9;
    }
    .decor--scrollbar::-webkit-scrollbar-thumb{
        background-color: hsl(var( --clr__brd--h ) var(--clr__brd--s) var( --clr__brd--l )	);
        border-radius: 10px;
        box-shadow: inset 2px 2px 2px hsla(0, 0%, 100%, .25),
                    inset -2px -2px 2px hsla(0, 0%, 0%, .25);
        z-index: 9;
    }    

/* -------------------------------------------------------- */
/*                     -  PATTERNS  -                       */
/* -------------------------------------------------------- */
/*
use the following vars: 
            --patternCLR--1: black;  
            --patternCLR--2: white;  
            --patternCLR--BG: transparent;  


            --patternSize: 200px; 

*/
.bgPattern--A, .bgPattern--B, .bgPattern--C, .bgPattern--D, .bgPattern--E, .bgPattern--G {
    --patternCLR--1: black;  
    --patternCLR--2: white;  
    --patternCLR--BG: red;  


    --patternSize: 200px; 
}

.bgPattern--A {
    /*Equal sign (rotated rectangles) pattern 
      https://css-pattern.com/equal-sign/*/



--patternSize: 50px; /* control the size*/
--patternCLR--2: transparent;

--_g:transparent 8%,var(--patternCLR--1) 0 17%,transparent 0 58%;
background: 
    linear-gradient(135deg,transparent 20.5%,var(--patternCLR--1) 0 29.5%,transparent 0) 0 calc(var(--patternSize)/4),
    linear-gradient( 45deg,var(--_g)) calc(var(--patternSize)/2) 0,
    linear-gradient(135deg,var(--_g),var(--patternCLR--1) 0 67%,transparent 0),        
    linear-gradient( 45deg,var(--_g),var(--patternCLR--1) 0 67%,transparent 0 83%,var(--patternCLR--1) 0 92%,transparent 0),
    var(--patternCLR--2); 
background-size: var(--patternSize) var(--patternSize);

filter: blur(5px);

}


.bgPattern--B {
    /* Linked squares pattern 
    https://css-pattern.com/linked-squares */


    --patternSize: 30px;
    
    --_s: calc(2*var(--patternSize)) calc(2*var(--patternSize));
    --_g: var(--_s) conic-gradient(at 40% 40%,#0000 75%,var(--patternCLR--1) 0);
    --_p: var(--_s) conic-gradient(at 20% 20%,#0000 75%,var(--patternCLR--BG) 0);
    background:
        calc( .9*var(--patternSize)) calc( .9*var(--patternSize))/var(--_p),
        calc(-.1*var(--patternSize)) calc(-.1*var(--patternSize))/var(--_p),
        calc( .7*var(--patternSize)) calc( .7*var(--patternSize))/var(--_g),
        calc(-.3*var(--patternSize)) calc(-.3*var(--patternSize))/var(--_g),
        conic-gradient(from 90deg at 20% 20%,var(--patternCLR--BG) 25%,var(--patternCLR--1) 0) 
        0 0/var(--patternSize) var(--patternSize);

}

.bgPattern--C{
/* Checkerboard optical illusion pattern 
https://css-pattern.com/checkerboard-optical-illusion/ */  

--patternSize: 50px; 


--c:var(--patternCLR--1) 0;
--g:conic-gradient(at 50% 25%,#0000 75%,var(--c));
background:
    repeating-linear-gradient(#0000 0 48%,var(--c) 50%),var(--g),
    conic-gradient(#0000 75%,var(--c)) calc(var(--patternSize)/4) calc(var(--patternSize)/2),
    var(--g) calc(var(--patternSize)/2) var(--patternSize) var(--patternCLR--2);
background-size: var(--patternSize) var(--patternSize),var(--patternSize) calc(2*var(--patternSize));

}

.bgPattern--D{

/* thick hexagons ---- Rhombus & Octagons pattern 
https://css-pattern.com/rhombus-octagons/ */
--patternSize: 50px; 
--_g:var(--patternCLR--1) 15%,var(--patternCLR--2) 0 28%, transparent 0 72%,var(--patternCLR--2) 0 85%,var(--patternCLR--1) 0;

background:
                conic-gradient(from 90deg at 2px 2px, transparent 25%,var(--patternCLR--1) 0) -1px -1px,
                linear-gradient(-45deg,var(--_g)),linear-gradient(45deg,var(--_g)),
                conic-gradient(from 90deg at 40% 40%,var(--patternCLR--1) 25%,var(--patternCLR--2) 0) 
                calc(var(--patternSize)/-5) calc(var(--patternSize)/-5);
background-size: var(--patternSize) var(--patternSize);

}

.bgPattern--E{

/* Outline circles pattern 
https://css-pattern.com/outline-circles/ */




--_g:radial-gradient(#0000 60%,var(--patternCLR--1) 61% 63%,#0000 64% 77%,var(--patternCLR--1) 78% 80%,#0000 81%);
--_c:,#0000 75%,var(--patternCLR--BG) 0;
background:
    conic-gradient(at 12% 20% var(--_c)) calc(var(--patternSize)* .44) calc(.9*var(--patternSize)),
    conic-gradient(at 12% 20% var(--_c)) calc(var(--patternSize)*-.06) calc(.4*var(--patternSize)),
    conic-gradient(at 20% 12% var(--_c)) calc(.9*var(--patternSize)) calc(var(--patternSize)* .44),
    conic-gradient(at 20% 12% var(--_c)) calc(.4*var(--patternSize)) calc(var(--patternSize)*-.06),
    var(--_g),var(--_g) calc(var(--patternSize)/2) calc(var(--patternSize)/2) var(--patternCLR--BG);
background-size: var(--patternSize) var(--patternSize); 




}

.bgPattern--F{
    /*mathbook crosses 
    https://www.magicpattern.design/tools/css-backgrounds */
    --patternDistance:  calc(var(--patternSize) / 25);
    --patternDistance2: calc(var(--patternSize) / 50);


    opacity: 1;
    background-image:	linear-gradient var(--patternDistance), transparent var(--patternDistance), 
                        linear-gradient(90deg, var(--patternCLR--1)  var(--patternDistance), transparent var(--patternDistance)), 
                        linear-gradient(var(--patternCLR--2)  var(--patternDistance2), transparent var(--patternDistance2)), 
                        linear-gradient(90deg, var(--patternCLR--2) var(--patternDistance2), var(--patternCLR--BG)  var(--patternDistance2));    

    background-size: var(--patternSize) var(--patternSize), var(--patternSize) var(--patternSize), calc(var(--patternSize) / 5) calc(var(--patternSize) / 5) , calc(var(--patternSize) / 5)  calc(var(--patternSize) / 5) ;
}

.bgPattern--G {



        
        --_s: calc(2*var(--patternSize)) calc(2*var(--patternSize));
        --_g: 35.36% 35.36% at;
        --_c: #0000 66%,var(--patternCLR--1)68% 70%,#0000 72%;
        background:
          radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--patternSize) var(--patternSize)/var(--_s),
          radial-gradient(var(--_g) 0    75%,var(--_c)) var(--patternSize) var(--patternSize)/var(--_s),
          radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s),
          radial-gradient(var(--_g) 0    75%,var(--_c)) 0 0/var(--_s),
          repeating-conic-gradient(var(--patternCLR--BG) 0 25%,#0000 0 50%) 0 0/var(--_s),
          radial-gradient(var(--_c)) 0 calc(var(--patternSize)/2)/var(--patternSize) var(--patternSize)
          var(--patternCLR--BG);
}


.bgPattern--H {
    --s: 10px; /* control the size*/
    --c1: #691d82;
    --c2: #96b08c;
    --c3: transparent;
    
     --g: var(--s); /* gap between lines */
     background:
       conic-gradient(at var(--s) calc(100% - var(--s)),#0000 270deg,var(--c1) 0) calc(var(--s) + var(--g)) 0,
       linear-gradient(var(--c2) var(--s),#0000 0) 0 var(--g),
       conic-gradient(at var(--s) calc(100% - var(--s)),#0000 90deg,var(--c2) 0 180deg, var(--c1) 0), var(--c3);
     background-size: calc(2*(var(--s) + var(--g))) calc(2*(var(--s) + var(--g)));
  }

  .bgPattern--Hshadow {
    --s: 10px; /* control the size*/
    --c1: rgba(31, 31, 31, 0.9);
    --c2: rgba(31, 31, 31, 0.9);
    --c3: rgba(255, 255, 255, 0);

    
     --g: var(--s); /* gap between lines */
     background:
       conic-gradient(at var(--s) calc(100% - var(--s)),#0000 270deg,var(--c1) 0) calc(var(--s) + var(--g)) 0,
       linear-gradient(var(--c2) var(--s),#0000 0) 0 var(--g),
       conic-gradient(at var(--s) calc(100% - var(--s)),#0000 90deg,var(--c2) 0 180deg, var(--c1) 0),
       var(--c3);
     background-size: calc(2*(var(--s) + var(--g))) calc(2*(var(--s) + var(--g)));


  }


  .bgPattern--I  {

           /* Crosses*/ 

    --c1: hsl(var(--clr-main1));
    --c2: hsl(var(--clr-main2));
    --c3: transparent;
    /* Sizes and distances*/
    --s: 20px; 
    --s2: .2rem;
    --g: var(--s);



    background:
        conic-gradient(at var(--s2) calc(100% - var(--s2)), #0000 270deg, var(--c1) 0) calc(var(--s2) + var(--g)) 0,
        linear-gradient(var(--c2) var(--s2), #0000 0) 0 var(--g),
        conic-gradient(at var(--s2) calc(100% - var(--s2)), #0000 90deg, var(--c2) 0 180deg, var(--c1) 0), var(--c3);

    background-size: calc(2*(var(--s2) + var(--g))) calc(2*(var(--s2) + var(--g)));

    z-index: 5;

}

.bgPattern--I::before {
    display: block;

    content: "";
    aspect-ratio: 6/4;


    z-index: 3;

    margin: auto;


    background:
        conic-gradient(at var(--s2) calc(100% - var(--s2)), #0000 270deg, var(--c1) 0) calc(var(--s2) + var(--g)) 0,
        linear-gradient(var(--c2) var(--s2), #0000 0) 0 var(--g),
        conic-gradient(at var(--s2) calc(100% - var(--s2)), #0000 90deg, var(--c2) 0 180deg, var(--c1) 0), var(--c3);

    background-size: calc(2*(var(--s2) + var(--g))) calc(2*(var(--s2) + var(--g)));




    --c1: hsl(0, 0%, 15%);
    --c2: hsl(0, 0%, 30%);
    --c3: transparent;

      --s: 10px;
  
  --s2: .1rem;
   --g: calc(var(--s)/2);  

    background-position: .2rem .2rem;
    opacity: .6;
    filter: blur(3px);
}  

.bgPattern--J{
    --op: .3;
    --c1: var(--clr-main1),  var(--op);
    --c2: var(--clr-main2),  var(--op);
    --c3: transparent;
    /* Sizes and distances*/
    --s: 50px; 

    background: 
    radial-gradient(circle at 50% 50%, hsla(var(--c1)) 0%, hsla(var(--c1)) 15%, transparent 16%), 
    radial-gradient(circle at 50% 50%, hsl(var(--clr-white)) 16%, transparent 17%), 
 /*   radial-gradient(circle at 51% 51%, #2b2b2b65 15%, transparent 16%), */
    
    linear-gradient(45deg, transparent 49%, hsla(var(--c2))  49% 51%, transparent 51%), 
/*    linear-gradient(45deg, transparent 50%, hsla(0, 0%, 17%, 0.3) 50% 52%, transparent 52%),*/
    linear-gradient(-45deg, transparent 49%, hsla(var(--c2))  49% 51%, transparent 51%) /*, 
    linear-gradient(-45deg, transparent 48%, hsla(0, 0%, 17%, 0.3) 48% 50%, transparent 50%)*/   ;
            background-size: var(--s) var(--s);
         /*   background-color: hsl(103, 19%, 95%);*/
    
}
.mask--splash {
    width: 100%;
    height: 100%;
 



    mask-image: url("../backgrounds/Splash.png");

    -webkit-mask-image: url("../backgrounds/Splash.png");
    mask-image: url("../backgrounds/Splash.png");
    mask-size: 100%;
    mask-repeat: no-repeat;
    margin: auto;


    background-image: url("../backgrounds/Splash--Shadow.png");

    background-image: -webkit-image-set(url("../backgrounds/Splash--Shadow.avif") type("image/avif"),
            url("../backgrounds/Splash--Shadow.webP") type("image/webP"),
            url("../backgrounds/Splash--Shadow.jpg") type("image/jpg"));

    background-image: image-set(url("../backgrounds/Splash--Shadow.avif") type("image/avif"),
            url("../backgrounds/Splash--Shadow.webP") type("image/webP"),
            url("../backgrounds/Splash--Shadow.jpg") type("image/jpg"));
    background-size: 100%;
    background-repeat: no-repeat;

    rotate: -90deg;
    z-index: -2;


}

@media (width >= 600px) {
    .mask--splash  {
        aspect-ratio: 6/4;
        rotate: 0deg;
    }

}
/* -------------------------------------------------------- */
/*                     - Animation  -                       */
/* -------------------------------------------------------- */
.animation{
    --hover-durantion: 10s;
    --hover-timing: ease-in-out;
}

/*----- Ligthing Up  -----*/
.animation-brightness{
    transition: animation-brightness var(--hover-durantion) var(--hover-timing);
}

.animation-brightness:hover, .animation-brightness:focus{
    filter: brightness(105%);
}
/*----- Shading -----*/
.animation-darkness{
    transition: animation-brightness var(--hover-durantion) var(--hover-timing);
}

.animation-darkness:hover, .animation-darkness:focus{
    filter: brightness(80%);
}

/*----- Colour change -----*/
.animation-hueRotate{
    --hueRotate: 180deg;    
    /*Complamentary colours: --hueRotate: 120deg;     --hueRotate: 240deg;   --hueRotate: 60deg;   --hueRotate: 300deg;  --hueRotate: 180deg; - exact opposit*/
    transition: animation-hueRotate var(--hover-durantion) var(--hover-timing);
}

.animation-hueRotate:hover, .animation-hueRotate:focus{
    filter: hue-rotate(var(--hueRotate));
}

.animation-reveal {
    background-color: hsl( var(--clr-white) / .8);
 }
 
    @supports (backdrop-filter: blur(10xp)) {
        .animation-reveal  {

            /* From https://css.glass */
            background-color: hsl( var(--clr-white) / .8);
            -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
            border: 1px solid hsl( var(--clr-black) / .3);
        }
    }

    @media (width >= 600px) {
        .animation-reveal  {
            opacity: 0;
            transition: opacity .5s ease-in-out;
        }

        .animation-reveal:hover {
            opacity: 1;
        }
    }

/* Animation - Before / After */
    .animateReviel > div:nth-of-type(2) { animation-duration: var(--animationDuration, 5s) ;  animation-iteration-count: var(--animationRepeat, 3); animation-direction: forwards;  animation-timing-function: ease-in-out;}
       
    /**/   
        .animateReviel--diagonal >div:nth-of-type(2) { clip-path: polygon(	  100%	 100%, 	100%	0%, 	 50%	 50%, 	0%	100%	 ); }
        .animateReviel--diagonal:hover div:nth-of-type(2) {animation-name:  revielDiagonal; }
     
        @keyframes revielDiagonal {    
                0%	 ,100%      { clip-path: polygon(	  100%	 100%, 	100%	0%, 	 50%	 50%, 	0%	100%	 ); }  /* Half */
                30%      { clip-path: polygon(	 100%	 100%, 	100%	0%, 	100%	100%, 	0%	100%	 ); }  /* Before */
                70%     { clip-path: polygon(	100%	 100%,	100%	0%, 	  0%	  0%, 	0%	100%	 ); }  /* After */
            }

/**/   
        .animateReviel--DiagonalWide >div:nth-of-type(2) { clip-path: polygon(	 100%	 50%,	100%	0%, 	  0%	  50%, 	0%	100%	 ); }
        .animateReviel--DiagonalWide:hover div:nth-of-type(2) {animation-name:  revielDiagonalWide; }
     
        @keyframes revielDiagonalWide {    
                0%, 100%      { clip-path: polygon(	   0%	 50%,	100%	0%, 	  100%	  50%, 	0%	100%	 ); }  /* Half */
                40%                     { clip-path: polygon(	    0%	 0%, 	100%	0%, 	  100%	100%, 	0%	100%	 ); }  /* Before */
                60%                     { clip-path: polygon(	 0%	 0%,	100%	0%, 	  100%	  100%, 	0%	100%	 ); }  /* After */
            }        
/**/
        .animateReviel--horizontal >div:nth-of-type(2) { clip-path: polygon(	 0 50%, 100% 50%, 100% 100%, 0 100%); }
        .animateReviel--horizontal:hover div:nth-of-type(2) {animation-name:  revielHorizontal; }
     
        @keyframes revielHorizontal {    
                0%, 100%      { clip-path: polygon(	    0 50%, 100% 50%, 100% 100%, 0 100%);  }  /* Half */
                40%           { clip-path: polygon(	   0%	 0%,	100%	0%, 	  100%	  100%, 	0%	100%	 ); }  /* After */
                70%           { clip-path: polygon(	    0 100%, 100% 100%, 100% 100%, 0 100% ); }  /* Before */

            } 

/**/
/**/
        .animateReviel--circle >div:nth-of-type(2) { clip-path: circle(25% at 50% 50%);}
        .animateReviel--circle:hover div:nth-of-type(2) {animation-name:  revielCircle; }
     
        @keyframes revielCircle {    
                0%, 100%      { clip-path: circle(25% at 50% 50%); }  /* Half */
                30%           { clip-path: circle(100% at 50% 50%);}  /* After */
                90%           { clip-path: circle(0% at 50% 50%); }  /* Before */

            } 
/* ---------------------------------------------------------- */
/*                      -   MAIN PARTS  -                     */
/* ---------------------------------------------------------- */
/* body, header, main, footer*/


body {
    display: flex;
    flex-direction: column;

    min-height: 100svh;
    width: 100svw;

    overflow-x: hidden; 

    line-height: 1.5;
    font-family: var(--ff-sans-normal);
    font-size: var(--fs-400);
    font-weight: 400;
}

header, main, main article, footer {
    width: 100svw;
}
    @media (width >= 600px) {
        body { 
            min-height: 100vh; width: 100vw;  }
        header, main, main article, footer {
            width: 100vw;}
    }
header {
    z-index: 10;
}    

footer {
    z-index: 5;
}

main {
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 100svw;
}

footer  {
    margin-top: auto;
    justify-self: flex-end;
}





/* ---------------------------------------------------------- */
/*                        -   HEADER  -                       */
/* ---------------------------------------------------------- */


#headings {
  /*  --local--height: 60px;    only for tablets, and desktops*/
    --fs-local: 1rem;  /*setting up local font size for smallCaps */
    --gap: 1rem;

    display: flex;    
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    

    height: 100px;    
    margin-inline: auto;

}


#headings #headings__left {   

    align-self: flex-start;
    justify-self: start;

    height: 100px;
    width: 250px;  


    display: flex;
    flex-direction: row;

    line-height: normal;
}

    #headings__left__logo   { 
        height: 80px;
        width: 80px;
        margin: auto;
    }


    #headings__left__navbar__focus{ 

        height: 60px;
        width: 100px;
        margin: auto;
        padding: .5rem .2rem;

        border-radius: 1rem;

        border: 1px solid ;
        
        text-align: center;
        text-decoration: none; 

        opacity: 0;
        transition: opacity 1s ease-in;

    }

        #headings #headings__left #headings__left__navbar__focus:focus, 
        #headings #headings__left #headings__left__navbar__focus:hover { 
            opacity: 1;
        }  

#headings__main-menu {
    display: flex;
    flex-direction: column;

    justify-items: space-between;


    gap: 1rem;
}

    #headings__main-menu__hamburger{    
        align-self: center;        

        margin-top: 220px;
        display: grid;
        grid-template-areas: 'overlay';

    }

        .hamburger--icon {
            grid-area: overlay;


            width: 100px;
            height: 100px;

            justify-self: flex-end;
            cursor: pointer;
            height: 50px;
            width: 50px;

            object-fit: cover;

        }

            .hamburger--icon picture {
                height: 50px;
                width: 50px;

                object-fit: cover;      
            }

                #headings__main-menu__hamburger .hamburger--opened picture {
                    opacity: 0;
                    transition: all .5s ease-in-out;
                } 

    #headings__main-menu__nav{

        justify-self: flex-start;

        display: flex;
        flex-direction: column;
        align-content: space-evenly;
        
        
        width: 150px;
        height: auto;

        padding-block: 3rem;
        margin-right: -40px;
        border-radius: 30% 70% 0% 100% / 55% 0% 100% 45% ;


        opacity: 0;
        transition: all .5s ease-in-out;

    }

        #headings__main-menu .menu__link a,
        #headings__main-menu .menu__link a:visited,
        #headings__main-menu .menu__link a:hover,
        #headings__main-menu .menu__link a:active  {
            margin-left: 30px;
            text-decoration: none;
            transition: all .5s ease-in;
            color: hsl(var( --clr__txt--h ) var(--clr__txt--s) var( --clr__txt--l )	);
        }

        #headings__main-menu .menu__link a {font-size: 16px;}

            #headings__main-menu .menu__link a:hover {

                border-bottom: 1px solid hsl( var(--clr__brd--h) var(--clr__brd--s) var(--clr__brd--l) );
            }


            #check:checked ~ #headings__main-menu__nav {


                opacity: 1;
            }
    
            #check:checked ~ #headings__main-menu__hamburger .hamburger--opened picture   {
                opacity: 1;
                display: block;
    
                transition: all .5s ease-in-out;
            }
    
            #check:checked ~ #headings__main-menu__hamburger .hamburger--closed picture {
                opacity: 0;
                transition: all .5s ease-in-out;
            }


        /* set up for desktop and tablet */
        @media (width >= 800px) {
            

            #headings__main-menu {
                justify-self: flex-end;
                
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;
            }

                #headings__main-menu__hamburger {
                    width: 0px;
                    height: 0px;
                    display: none;
                }

                #headings__main-menu__nav{
                    all: initial;

                    display: flex;
                    flex-direction: row;
                    align-content: space-evenly;
                    justify-content: space-evenly;
                    gap: 1rem;

                    margin-block: auto;

                    background-color: transparent;
                    border-radius: 0 ;
                }

                    #headings__main-menu__nav .menu__link a {
                        text-decoration: none;            
                        color: hsl( var(--clr__txtAccent--h) var(--clr__txtAccent--s) var(--clr__txtAccent--l) ); 
                        transition: all .2s  ease-in;

                        font-size: 14px;

                    }

                    #headings__main-menu__nav .menu__link  a:visited,
                    #headings__main-menu__nav .menu__link  a:hover,
                    #headings__main-menu__nav .menu__link  a:active  {
                        text-decoration: none;
                        transition: all .2s ease-in;
                    }

                    #headings__main-menu__nav .menu__link  a:visited {
                        color: hsl( var(--clr__txtAccent--h) var(--clr__s--200) var(--clr__l--600) ); 

                    }


                    #headings__main-menu__nav  .menu__link  a:hover  {
                        color: hsl( var(--clr__txtAccent--h) var(--clr__s--200) var(--clr__l--800) ); 
                        border-color: hsl( var(--clr__txtAccent--h) var(--clr__s--200) var(--clr__l--800) ); 
                    }

                    #headings__main-menu__nav .menu__link  a:active  {
                        color: hsl( var(--clr__txtAccent--h) var(--clr__s--200) var(--clr__l--800) ); 
                        border-color: hsl( var(--clr__txtAccent--h) var(--clr__s--200) var(--clr__l--800) ); 
                    }          
        }

/* ---------------------------------------------------------- */
/*                        -   FOOTER  -                       */
/* ---------------------------------------------------------- */

footer .footerSeparator{
    --footerSepartorHeight: 25px;
    height: var(--footerSepartorHeight, 25px) ; 
    width: 100%; 
    margin-top: calc(var(--footerSepartorHeight, 25px)  * -1);
    background-image: linear-gradient(  hsla(0, 0%, 100%, 0), hsl(var(--clr-main1)));

}
.footer__content {
    align-self: center;
    justify-self: center;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

}


footer  .navbar__logo {
    width: 50px;
    height: 50px;

    display: grid;
    grid-template-areas: 'overlay';
}
    footer  .navbar__logo > * { grid-area: overlay;}

@media (width <= 700px) {
    footer  .navbar__logo {
        display: none;
        width: 0;
        height: 0;
    }
}

footer .menu_navigation  {

    max-width: 40rem;
    gap: 1rem;

    transition: all .5s ease-in;
}
footer .menu_navigation .menu__link a {
    --fs-local: .8rem;
}    


footer .menu__link a,
footer .menu__link a:visited,
footer .menu__link a:hover,
footer .menu__link a:active  {
    text-decoration: none;
    transition: all .5s ease-in;
    color: hsl( var(--clr__txt--h) var(--clr__txt--s) var(--clr__txt--l) ); 
}   

footer .menu__link a:hover {

    border-bottom: 1px solid hsl( var(--clr__brd--h) var(--clr__brd--s) var(--clr__brd--l) );
}

    #separtorFooter  {
        --clr__article__bg2: var(--clr-main1);
        background: linear-gradient(hsl(var(--clr__article__bg)) 30%,hsl(var(--clr__article__bg2)) 70%);
        height: 100px;
        width: 100vw;
    }

footer address {
    text-align: center;
}    
footer address a {

    font-style: var(--fs-local, 1rem);
    color: hsl( var(--clr__txt--h) var(--clr__txt--s) var(--clr__txt--l) ); 
}    
/* ---------------------------------------------------------- */
/*                         -   MAIN  -                        */
/* ---------------------------------------------------------- */

/* seperate css for each page*/
main {
   width: 100vw;
}


























/* Stay at the bottom, do not delete !!! */

.reset, 
.reset > * {
    all: unset;
}

.displayNone {
    display: none;
    
    width: 0;
    height: 0;
}

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