/*
tests :
light-green 94bcae #70a38d #79c3b1

6/10 jungle: 29ab87
5/10 pine: 01796f
5/10 persian: 01a573 peut remplacer pine ou jungle
4/10 hunter: 3f714c

3/10 sage: 9fc087
3/10 mint: 99fa99
3/10 emerald: 53c877

2/10 fern: 517a42
1/10 jade: 03a86e
0/10 olive: 708238

merdunord: 236d73
pine/jungle
pine/merdunord
*/

.light-green {color:#075055;background-color:white}
.light-blue, .button-cta {color:floralwhite; background-color:#38a4d0}
body{color:#282828}
footer {color:floralwhite;background-color: #3c3c40;}

/*
not used :
.dark-green {color:floralwhite;background-color:#075055} 
.red? {color:#BB2649;background-color:whitesmoke}
*/

.wrapper {
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

.give-me-space {
    padding-block: 5rem;    
}
.extra-top-space {
    padding-top: 2rem;
}
.less-top-space {
    margin-top: -3rem;
}
.extra-bottom-space {
    padding-bottom: 2rem;
}
.less-bottom-space {
    margin-bottom: -3rem;
}

.flat {    
    --background: linear-gradient(
        30deg, 
        #12c2e9, 
        #9e5c80                );    
  position: relative;
  isolation: isolate;
}
.diagonal {    
    --skew-angle: -3deg;
--background: linear-gradient(
        30deg, 
        #12c2e9, 
        #9e5c80
                );    
  position: relative;
  isolation: isolate;
}
/* previous colors: #12c2e9,#94bcae,#075055
*/


.diagonal::after {
  content: '';
  background: var(--background);
  position: absolute;
  z-index: -1;
  inset: 0;
  transform: skewY(var(--skew-angle));
}