/*

*         { outline: 1px solid hsl(  0 100%  70% ); }
* *       { outline: 1px solid hsl(120 100%  30% ); }
* * *     { outline: 1px solid hsl(180 100%  30% ); }
* * * *   { outline: 1px solid hsl(240 100%  30% ); }
* * * * * { outline: 1px solid hsl(300 100%  30% ); }



*         { background: hsla(300 100%  70% / .2);   }
* *       { background: hsla(240 100%  70% / .2);  }
* * *     { background: hsla(180 100%  70% / .2);  }
* * * *   { background: hsla(120 100%  70% / .2); }
* * * * * { background: hsla(  0 100%  70% / .2);  }
*/

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





.testOpacity20{
    opacity: .2;
} 


.border{
    border: 20px solid green;
}

.borderBG {
    border: 5px solid slateblue;
    background: red;
}

.borderBG2 {
    border: 5px solid green;
    background: whitesmoke;
}

.borderBG3 {
    border: 5px solid yellow;
    background: orangered;
}

.border-background {
    border: 2px solid green;
    --sl__local: 30%, 60%;
    --sl__local-accent: 30%, 90%; 

}
.border-background:nth-of-type(1){
    background: hsl(30, var(--sl__local));
    color: hsl(30, var(--sl__local-accent));
}
.border-background:nth-of-type(2){
    background: hsl(60, var(--sl__local));
    color: hsl(60, var(--sl__local-accent));
}

.border-background:nth-of-type(3){
    background: hsl(90, var(--sl__local));
    color: hsl(90, var(--sl__local-accent));
}
.border-background:nth-of-type(4){
    background: hsl(120, var(--sl__local));
    color: hsl(120, var(--sl__local-accent));
}



.somethingelse{
    display: flex;
    flex-direction: row;
}

.test{ fill: black; }


.something2 {
    --size: 300px;
    width: var(--size);
    height: var(--size);
}



.box {
    padding: 5px;
    margin: auto;
 
    background-repeat: no-repeat;
    background-size: 100%;

    aspect-ratio: 1/1; border-radius: 5px; opacity: 1; outline: white solid thick; overflow: hidden;
}

.box_st--sm{
    width: 50px ;
    height: auto;
}

.box_st--lrg{
    width: 100px ;
    height: auto;
}

.box_st--xl{
    width: 200px ;
    height: auto;
}

.box--tall{
    aspect-ratio: 4/6;
}

.box--wide{
    aspect-ratio: 6/4;
}

/*---*/
.box_flex--sm{
    width: clamp(50px, 10%, 100px );
    height: auto;
}

.box_flex--lrg{
    width: clamp(100px , 20%, 200px );
    height: auto;
}

.box_flex--xl{
    width: clamp(200px , 30%, 300px );
    height: auto;
}