/*<!--Web Dev Tutorials-->
<!-- How to Create and Display a Loading Spinner on Page Load (without JQuery) - HTML, CSS & JavaScript -->
<!--https://www.youtube.com/watch?v=q76TexbMXJg&t=11s&ab_channel=WebDevTutorials -->
*/

/*------------------------------------------------------*/
:root{
    --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--main2: 	       103;    --clr__s--main2: 	    19%;     --clr__l--main2: 	      62%;  /* #96B08C main2 */
}

.clr1--A, .clr2--B{
    --clrBg: hsl(var(--clr__h--main1), var(--clr__s--main1),  95%);
    --clrTxt: hsl(var(--clr__h--main1), var(--clr__s--main1),  var(--clr__l--main1));
    --clrOutl: hsla(var(--clr__h--main1), var(--clr__s--main1),  20%, .5);
    --clrWht: hsl(var(--clr__h--main1), var(--clr__s--main1),  98%);
    --svgBg: url("data:image/svg+xml,%3csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.small %7b font: italic 48px alegreya%3b fill: %23691d82%3b stroke: hsl(285%2c 30%25%2c 80%25)%3b stroke-width: 2%3b %7d%3c/style%3e%3ctext x='25' y='60' class='small'%3eC%3c/text%3e%3ctext x='15' y='55' class='small'%3eS%3c/text%3e%3c/svg%3e");
}

.clr2--A, .clr2--B{
    --clrBg: hsl(var(--clr__h--main2), var(--clr__s--main2),  95%);
    --clrTxt: hsl(var(--clr__h--main2), var(--clr__s--main2),  var(--clr__l--main2));
    --clrOutl: hsl(var(--clr__h--main2), var(--clr__s--main2),  20%, .5);
    --clrWht: hsl(var(--clr__h--main2), var(--clr__s--main2),  98%);
    /*
    --svgBg: url("data:image/svg+xml,%3csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.small %7b font: italic 48px alegreya%3b fill: %2396b08C%3b stroke: hsl(103 64%25 95%25)%3b stroke-width: 2%3b %7d%3c/style%3e%3ctext x='25' y='60' class='small'%3eC%3c/text%3e%3ctext x='15' y='55' class='small'%3eS%3c/text%3e%3c/svg%3e");*/
    --svgBg: url("data:image/svg+xml,%3csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.small %7b font: italic 48px alegreya%3b fill: hsl(103 30%25 40%25)%3b  stroke: hsl(103 30%25 80%25)%3b stroke-width: 2%3b %7d%3c/style%3e%3ctext x='25' y='60' class='small'%3eC%3c/text%3e%3ctext x='15' y='55' class='small'%3eS%3c/text%3e%3c/svg%3e");
}

.loader{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;

    transition: opacity 0.75s, visibility 0.75s;
    background-color: var(--clrBg);
    background-color: var(--clrBg);
    background-image: var(--svgBg);
    background-size: 100px 100px;
    background-repeat: no-repeat;
    background-position: 51% 51%;

    margin: auto;

    z-index: 9000;
}


.loader-hidden{
    opacity: 0;
    visibility: hidden;

}

.loader::before{
    content: "";
    width: clamp(75px, 33%, 150px);
    aspect-ratio: 1/1;

    
    border: 15px solid var(--clrTxt);
    border-top-color: var(--clrWht);
    border-radius: 50%;
    


    outline-offset: -30px;
    outline: 5px double ;
    outline-color: var(--clrOutl);



    
    animation: loading 0.75s ease infinite ;

    z-index: 100000;


}

@keyframes loading {
    from {
        transform: rotate(0turn) ;
    }
    to {
        transform: rotate(1turn) ;
    }
}