* {
    font-family: var(--serif-stack);
}

header { 
	position: sticky; 
	top: 0;
	background-color: var(--color-background); 
	max-width: 100ch; 
    margin: auto; 
    padding-left: 2rem; 
    padding-right: 2rem; 
} 

body {
    background-color: #264072;
}

#wrapper {
    max-width: 100ch;
    margin: auto;
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
	background-color: var(--color-background);
	/* border-image: source | slice | width | outset | repeat */
    border-image: url("./border-image.png") 0 30 / 30px / 6rem repeat
}

nav {
    border-bottom: 1px dotted darkgray;
    padding-bottom: 1rem;
}

nav ul {
    list-style-type: none;
}

nav ul, nav li {
    margin: 0;
    padding: 0;
}

nav li {
    display: inline;
    font-weight: bold;
}

nav li::after {
    content: "|";
    padding-left: calc(var(--gap) / 2);
}

nav li:last-of-type::after {
    display: none;
} 

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

h1 {
    margin-bottom: 0;
}

small, small a {
    font-size: 0.9rem;
}

footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px dotted darkgray;
}

#logline {
    margin-bottom: 0.6rem;
}

#logline em {
}

button, input[type="submit"] {
    font-family: inherit;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    border: 1px solid grey;
    background-color: rgb(231, 229, 229);
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: .1rem .3rem .2rem;
    border-radius: .2rem;
}

button:hover, input[type="submit"]:hover {
    background-color: var(--color-secondary-lighter);
    border: 1px solid grey;

}

hr {
    margin: 1rem;
}

:root {
  /* Background Definition */
  --color-background: #EFC66E;
  
  /* Primary Definition */
  --color-primary-chroma: 0.0345;
  --color-primary-hue: 260;

  --color-primary: oklch(55% var(--color-primary-chroma) var(--color-primary-hue));

  --color-primary-lighter: oklch(90% calc(1 * var(--color-primary-chroma)) var(--color-primary-hue));
  --color-primary-light: oklch(70% calc(1 * var(--color-primary-chroma)) var(--color-primary-hue));
  --color-primary-dark: oklch(40% calc(1 * var(--color-primary-chroma)) var(--color-primary-hue));
  --color-primary-darker: oklch(25% calc(1 * var(--color-primary-chroma)) var(--color-primary-hue));

  /* Secondary Definition */
  --color-secondary-chroma: 0.1249;
  --color-secondary-hue: 22.69;

  --color-secondary: oklch(55% var(--color-secondary-chroma) var(--color-secondary-hue));

  --color-secondary-lighter: oklch(90% calc(1 * var(--color-secondary-chroma)) var(--color-secondary-hue));
  --color-secondary-light: oklch(70% calc(1 * var(--color-secondary-chroma)) var(--color-secondary-hue));
  --color-secondary-dark: oklch(40% calc(1 * var(--color-secondary-chroma)) var(--color-secondary-hue));
  --color-secondary-darker: oklch(25% calc(1 * var(--color-secondary-chroma)) var(--color-secondary-hue));

  /* Alert Definition */
  --color-alert-chroma: 0.1508;
  --color-alert-hue: 23.42;

  --color-alert: oklch(0.4846 var(--color-alert-chroma) var(--color-alert-hue));

  --color-alert-lighter: oklch(90% calc(1 * var(--color-alert-chroma)) var(--color-alert-hue));
  --color-alert-light: oklch(70% calc(1 * var(--color-alert-chroma)) var(--color-alert-hue));
  --color-alert-dark: oklch(40% calc(1 * var(--color-alert-chroma)) var(--color-alert-hue));
  --color-alert-darker: oklch(25% calc(1 * var(--color-alert-chroma)) var(--color-alert-hue));

  /* Highlight Definition */
  --color-highlight-chroma: 0.1922;
  --color-highlight-hue: 106.77;

  --color-highlight: oklch(55% var(--color-highlight-chroma) var(--color-highlight-hue));

  --color-highlight-lighter: oklch(97% calc(1 * var(--color-highlight-chroma)) var(--color-highlight-hue));
  --color-highlight-lighter: var(--color-secondary-lighter);
  --color-highlight-light: oklch(70% calc(1 * var(--color-highlight-chroma)) var(--color-highlight-hue));
  --color-highlight-dark: oklch(40% calc(1 * var(--color-highlight-chroma)) var(--color-highlight-hue));
  --color-highlight-darker: oklch(25% calc(1 * var(--color-highlight-chroma)) var(--color-highlight-hue));}

.primary {
    color: var(--color-primary);
}

.primary-lighter {
    color: var(--color-primary-lighter);
}

.primary-light {
    color: var(--color-primary-light);
}

.primary-dark {
    color: var(--color-primary-dark);
}

.primary-darker {
    color: var(--color-primary-darker);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-primary-lighter {
    background-color: var(--color-primary-lighter);
}

.bg-primary-light {
    background-color: var(--color-primary-light);
}

.bg-primary-dark {
    background-color: var(--color-primary-dark);
}

.bg-primary-darker {
    background-color: var(--color-primary-darker);
}

/* Secondary */

.secondary {
    color: var(--color-secondary);
}

.secondary-lighter {
    color: var(--color-secondary-lighter);
}

.secondary-light {
    color: var(--color-secondary-light);
}

.secondary-dark {
    color: var(--color-secondary-dark);
}

.secondary-darker {
    color: var(--color-secondary-darker);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-secondary-lighter {
    background-color: var(--color-secondary-lighter);
}

.bg-secondary-light {
    background-color: var(--color-secondary-light);
}

.bg-secondary-dark {
    background-color: var(--color-secondary-dark);
}

.bg-secondary-darker {
    background-color: var(--color-secondary-darker);
}

/* Alert */

.alert {
    color: var(--color-alert);
}

.alert-lighter {
    color: var(--color-alert-lighter);
}

.alert-light {
    color: var(--color-alert-light);
}

.alert-dark {
    color: var(--color-alert-dark);
}

.alert-darker {
    color: var(--color-alert-darker);
}

.bg-alert {
    background-color: var(--color-alert);
}

.bg-alert-lighter {
    background-color: var(--color-alert-lighter);
}

.bg-alert-light {
    background-color: var(--color-alert-light);
}

.bg-alert-dark {
    background-color: var(--color-alert-dark);
}

.bg-alert-darker {
    background-color: var(--color-alert-darker);
}

/* Highlight */

.highlight {
    color: var(--color-highlight);
}

.highlight-lighter {
    color: var(--color-highlight-lighter);
}

.highlight-light {
    color: var(--color-highlight-light);
}

.highlight-dark {
    color: var(--color-highlight-dark);
}

.highlight-darker {
    color: var(--color-highlight-darker);
}

.bg-highlight {
    background-color: var(--color-highlight);
}

.bg-highlight-lighter {
    background-color: var(--color-highlight-lighter);
}

.bg-highlight-light {
    background-color: var(--color-highlight-light);
}

.bg-highlight-dark {
    background-color: var(--color-highlight-dark);
}

.bg-highlight-darker {
    background-color: var(--color-highlight-darker);
}


.dark-mode {
    --color-primary: #FFFFFF;
    --color-background: #262626;
    --color-accent: purple;
    --color-highlight: cyan;
    --color-alert: orange;
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-background {
    background-color: var(--color-background);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-highlight {
    background-color: var(--color-highlight);
}

.bg-alert {
    background-color: var(--color-alert);
}

.background {
    color: var(--color-background);
}

.accent {
    color: var(--color-accent);
}

.highlight {
    color: var(--color-highlight);
}

.alert {
    color: var(--color-alert);
}

/* Couleurs du PFF 
:root{--color-primary: #000000;--color-secondary: #360086;--color-accent: #FE6D01;--color-highlight: #FFFFFF}
*/
/*

What I need for colors
Expressing in a semantic way

primary
background
accent
highlight
*/

/* Fonts */
* {
    color:  red;
}

    :root {
    --sans-stack: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --serif-stack: 'Charter', 'Bitstream Charter', Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
    }

.sans, .sans * {
      font-family: var(--sans-stack);
}

.serif, .serif * {
    font-family: var(--serif-stack);
}

.sans-and-serif, .sans-and-serif * {
    font-family: var(--sans-stack);
}

.sans-and-serif h1, .sans-and-serif h2, .sans-and-serif h3, .sans-and-serif h4, .sans-and-serif h5, .sans-and-serif h6 {
    font-family: var(--serif-stack);
}

.serif-and-sans, .serif-and-sans * {
    font-family: var(--serif-stack);
}

.serif-and-sans h1, .serif-and-sans h2, .serif-and-sans h3, .serif-and-sans h4, .serif-and-sans h5, .serif-and-sans h6 {
    font-family: var(--sans-stack);
}

/* Typography 
Sources:  https://imperavi.com/blog/vertical-rhythm-in-typography/;
*/
* {
    color: var(--color-primary-darker);
}

:root {
    --line-height: 1.4;
}

p {
    line-height: 1.5;
    font-size: var(--size-0);
    margin-block-end: var(--gap);
}

ol, ul {
    padding: 0;
    margin: 0;
    font-weight: bold;
    list-style-position: inside;
}

ol, ul, li {
    font-size: var(--size-0);
    line-height: 1.3;
    margin: 0;
    padding: 0;
    margin-block-end: calc( var(--size-base) / 2);
    margin-left: min(4vw, var(--gap));
    margin-right: min(4vw, var(--gap));
}

li {
    font-weight: normal;
}

li > p {
    display: inline;
    margin: 0;
    padding: 0;
  }
/* */

/* */

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-block-start: calc( var(--size-base) * 3);
    margin-block-end: calc( var(--size-base) / 2);
}


h1, h1 a {
    font-size: var(--size-1);
    font-weight: bold;
}    


h2, h2 a {
    font-size: var(--size-2);
    font-weight: bold;
}


h3, h3 a {
    font-size: var(--size-3);
    font-weight: bold;
}

h4, h4 a {
    font-size: var(--size-4);
    font-weight: bold;
}

h5, h5 a {
    font-size: var(--size-5);
    font-weight: bold;
}

h6, h6 a {
    font-size: var(--size-6);
    font-weight: bold;
}

figure, img {
    display: block;
    margin: 0;
    padding: 0;
    margin: var(--space-base) 0;
    max-width: 100%;
}

figcaption {
    margin: 1em 0;
    font-size: calc(var(--size-0) * 0.8);
    font-weight: bold;
    text-align: center;
}

figure img {
    margin: 0;
}

strong, .strong {
    font-weight: bold;
}

a, a em, a strong {
    color: var(--color-secondary);
    font-size: var(--size-0);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.1em;
}

a:hover, a:hover em, a:hover strong {
    color: var(--color-alert);
    text-decoration-line: underline;
    text-decoration-style: solid;
}

mark, code {
    border: 1px solid grey;
    background-color: rgb(231, 229, 229);
    font-family: monospace;
    font-size: 0.8rem;
    padding: .1rem .3rem .2rem;
    border-radius: .2rem;
}

pre code {
    display: block;
    white-space: pre;
    width: fit-content;
}
body.dark-mode mark, body.dark-mode code {
    background-color: var(--color-primary);
    color: var(--color-background);
}

blockquote {
    margin: max(calc( var(--gap) / 2 ), 3vw) 0;
    padding: 0;
    border-top: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);

}


blockquote p {
    display: block;
    padding: calc(var(--gap) / 2) max(2vw, calc(var(--gap) * 1)); 

    /* border-left: calc(var(--gap) /  2) solid var(--color-primary-light); */
    font-size: var(--size-4);
    /* background-color: var(--color-primary-lighter); */
}

blockquote cite {
    display: block;
    text-align: right;
    margin: var(--gap) 0;
}

blockquote cite::before {
    content: "—";
    margin-right: calc(var(--gap) / 2);
}

.dark-mode blockquote {
    background-color: var(--color-primary-lighter-dm-2);
}

.serif-and-sans blockquote {
    font-family: sans-serif;
}

.sans-and-serif blockquote {
    font-family: serif;
}


button {
    cursor: pointer;
}

button span {
    color: var(--color-secondary);
}

button:hover {
    background-color: var(--color-secondary);
    border: solid 2px var(--color-variant-4);
}

button:hover span {
    color: var(--color-primary);
}

strong, .bold {
    font-weight: bold;
}

em, .italic {
    font-style: italic;
}

/* Tables */

table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-primary-lighter);

    table-layout: fixed;
    width: 100%;

    margin: 0;
    padding: 0;
    margin-block-end: calc(1.5em * 1.3);

    line-height: 1.4;
    font-size: var(--size-0);
}

th, tr, td {
    text-align: left;
    margin: 0;
    padding: 0;

}

th {
}

th, td {
    padding: calc( var(--gap) / 2);
    border-bottom: 1px solid var(--color-primary-lighter);
    border-right: 1px solid var(--color-primary-lighter);
}

td:last-child, th:last-child  {
    border-right: none;
}


tr:last-child td {
    border-bottom: none;
}


hr {
    height: 1px;
    color: var(--color-primary-lighter);
    background: var(--color-primary-lighter);
    font-size: 0;
    border: 0;
}

/* Vars
*/

:root {

    --size-base: 0.8rem;
    --size-0: clamp(var(--size-base), calc(var(--size-base) + 0.3vw), calc( var(--size-base) * 1.8 ));
    --size-1: clamp(calc( 2 * var(--size-base) ), calc(2 * var(--size-base) + 10vw), calc( var(--size-base) * 3.5 ));
    --size-2: clamp(calc( 1.6 * var(--size-base) ), calc(1.6 * var(--size-base) + 3vw), calc( var(--size-base) * 2.5 ));
    --size-3: clamp(calc( 1.3 * var(--size-base) ), calc(1.3 * var(--size-base) + 1vw), calc( var(--size-base) * 2.4 ));
    --size-4: clamp(calc( 1.1 * var(--size-base) ), calc(1.1 * var(--size-base) + 0.8vw), calc( var(--size-base) * 1.8 ));
    --size-5: clamp(calc( 1 * var(--size-base) ), calc(1 * var(--size-base) + 0.5vw), calc( var(--size-base) * 1.4 ));
    --size-6: clamp(calc( 1 * var(--size-base) ), calc(1 * var(--size-base) + 0.1vw), calc( var(--size-base) * 1.2 ));
}

:root {
     --space-base: 1rem;
     --space-md: 1.4rem;
     --space-lg: 3rem;
     --space-xl: 4rem;
     --space-xxl: 7rem;

     --gap: var(--space-base);
}


/* UTILITIES
*/

img {
    max-width: 100%;
    height: auto;
}

.wfull, .w-full {
    width: 100%;
}

.whalf, .w-half  {
    width: 50%;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

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

.shrink {
    flex-wrap: nowrap;
}
.shrink > * {
    display: block;
    min-width: 0;    /* Add this */
    flex-shrink: 1;
}

/* Layout */
.centered {
    margin-left: auto;
    margin-right: auto;
}

.fixed-top {
    position: fixed;
    top: 0;
    z-index: 999;
}


.fixed-bottom {
    position: fixed;
    bottom: 0;
    z-index: 999;
}

/* Containers */
.container-xxl {
    max-width: 80em;
}

.container-xl {
    max-width: 60em;
}

.container-lg {
    max-width: 52em;
}

.container-md {
    max-width: 40em;
}

.container-sm {
    max-width: 28em;
}

.container-xs {
    max-width: 18em;
}
/* Flex multi-column layout */

[class*="duo"], [class*="trio"], [class*="quadri"]  {
    display: flex;
    flex-wrap: wrap;

    justify-content: space-between;
    gap: var(--gap);
}

[class*="duo"] > * , [class*="trio"] > * , [class*="quadri"] > * {
    /* display: block; */
    width: 100%;
}

@media (min-width: 80em) {
    .duo-xxl > *{
        width: calc(50% - calc( var(--gap) / 2 ) );
    }
    
}

@media (min-width: 60em) {
    .duo-xl *{
        width: calc(50% - calc( var(--gap) / 2 ) );
    }
    
}

@media (min-width: 52em) {
    .duo-lg > *{
        width: calc(50% - calc( var(--gap) / 2 ) );
    }
    
}

@media (min-width: 40em) {
    .duo-md > *{
        width: calc(50% - calc( var(--gap) / 2 ) );
    }  
}

@media (min-width: 28em) {
    .duo-sm > *{
        width: calc(50% - calc( var(--gap) / 2 ) );
    }  
}

@media (min-width: 18em) {
    .duo-xs > *{
        width: calc(50% - calc( var(--gap) / 2 ) );
    }  
}

@media (min-width: 40em) {
    .duo-md > *{
        width: calc(50% - calc( var(--gap) / 2 ) );
    }  
}

@media (min-width: 80em) {
    .trio-xxl > *{
       width: calc( calc( 100% - var(--gap) * 2) / 3 );
    }
}

@media (min-width: 60em) {
    .trio-xl > *{
       width: calc( calc( 100% - var(--gap) * 2) / 3 );
    }
}

@media (min-width: 52em) {
    .trio-lg > *{
       width: calc( calc( 100% - var(--gap) * 2) / 3 );
    }
}

@media (min-width: 40em) {
    .trio-md > *{
       width: calc( calc( 100% - var(--gap) * 2) / 3 );
    }
}

@media (min-width: 28em) {
    .trio-sm > *{
       width: calc( calc( 100% - var(--gap) * 2) / 3 );
    }
}

@media (min-width: 18em) {
    .trio-xs > *{
       width: calc( calc( 100% - var(--gap) * 2) / 3 );
    }
}

@media (min-width: 40em) {
    .trio-md > *{
       width: calc( calc( 100% - var(--gap) * 2) / 3 );
    }
}

@media (min-width: 80em) {
    .quadri-xxl > *{
        width: calc( calc( 100% - var(--gap) * 3) / 4 );
    }
}

@media (min-width: 60em) {
    .quadri-xl > *{
        width: calc( calc( 100% - var(--gap) * 3) / 4 );
    }
}

@media (min-width: 52em) {
    .quadri-lg > *{
        width: calc( calc( 100% - var(--gap) * 3) / 4 );
    }
}

@media (min-width: 40em) {
    .quadri-md > *{
        width: calc( calc( 100% - var(--gap) * 3) / 4 );
    }
}

@media (min-width: 28em) {
    .quadri-sm > *{
        width: calc( calc( 100% - var(--gap) * 3) / 4 );
    }
}

@media (min-width: 18em) {
    .quadri-xs > *{
        width: calc( calc( 100% - var(--gap) * 3) / 4 );
    }
}

.gap-0 {
    --gap: 0rem;
}

.gap-1 {
   --gap: 1rem;
}

.gap-2 {
    --gap: 2rem;
 }

 .gap-3 {
    --gap: 3rem;
 }

 .gap-4 {
    --gap: 4rem;
 }


/* Text */
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

/* Height */

.h-base {
    height: var(--space-base);
}

.h-md {
    height: var(--space-md);
}

.h-lg {
    height: var(--space-lg);
}

.h-xl {
    height: var(--space-xl);
}

.h-xxl {
    height: var(--space-xxl);
}

.h-auto {
    height: auto;
}

/* Width */
.w-base {
    width: var(--space-base);
}

.w-md {
    width: var(--space-md);
}

.w-lg {
    width: var(--space-lg);
}

.w-xl {
    width: var(--space-xl);
}

.w-xxl {
    width: var(--space-xxl);
}

.w-auto {
    width: auto;
}

/* Margins */

.m-0 {
    margin: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-base {
    margin-bottom: var(--space-base);
}

.mb-md {
    margin-bottom: var(--space-md);
}

.mb-lg {
    margin-bottom: var(--space-lg);
}

.mb-xl {
    margin-bottom: var(--space-xl);
}

.mb-xxl {
    margin-bottom: var(--space-xxl);
}


.mt-0 {
    margin-top: 0;
}

.mt-base {
    margin-top: var(--space-base);
}

.mt-md {
    margin-top: var(--space-md);
}

.mt-lg {
    margin-top: var(--space-lg);
}

.mt-xl {
    margin-top: var(--space-xl);
}

.mt-xxl {
    margin-top: var(--space-xxl);
}

.ml-auto {
    margin-left: auto;
}

.ml-0 {
    margin-left: 0;
}

.ml-base {
    margin-left: var(--space-base);
}

.ml-md {
    margin-left: var(--space-md);
}

.ml-lg {
    margin-left: var(--space-lg);
}

.ml-xl {
    margin-left: var(--space-xl);
}

.ml-xxl {
    margin-left: var(--space-xxl);
}

.mr-auto {
    margin-right: auto;
}

.mr-0 {
    margin-right: 0;
}

.mr-tiny {
    margin-right: calc( var(--space-base) / 2);
}

.mr-base {
    margin-right: var(--space-base);
}

.mr-md {
    margin-right: var(--space-md);
}

.mr-lg {
    margin-right: var(--space-lg);
}

.mr-xl {
    margin-right: var(--space-xl);
}

.mr-xxl {
    margin-right: var(--space-xxl);
}

.mh-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.mh-base {
    margin-top: var(--space-base);
    margin-bottom: var(--space-base);
}

.mh-md {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);

}

.mh-lg {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);

}

.mh-xl {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);

}

.mh-xxl {
    margin-top: var(--space-xxl);
    margin-bottom: var(--space-xxl);

}

.mw-0 {
    margin-left: 0;
    margin-right: 0;
}

.mw-base {
    margin-left: var(--space-base);
    margin-right: var(--space-base);
}

.mw-md {
    margin-left: var(--space-md);
    margin-right: var(--space-md);

}

.mw-lg {
    margin-left: var(--space-lg);
    margin-right: var(--space-lg);

}

.mw-xl {
    margin-left: var(--space-xl);
    margin-right: var(--space-xl);

}

.mw-xxl {
    margin-left: var(--space-xxl);
    margin-right: var(--space-xxl);

}

/* Paddings */
.p-0 {
    padding: 0;
}

.pb-base {
    padding-bottom: var(--space-base);
}

.pb-md {
    padding-bottom: var(--space-md);
}

.pb-lg {
    padding-bottom: var(--space-lg);
}

.pb-xl {
    padding-bottom: var(--space-xl);
}


.pt-base {
    padding-top: var(--space-base);
}

.pt-md {
    padding-top: var(--space-md);
}

.pt-lg {
    padding-top: var(--space-lg);
}

.pt-xl {
    padding-top: var(--space-xl);
}

.pt-xxl {
    padding-top: var(--space-xxl);
}




.ph-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.ph-base {
    padding-top: var(--space-base);
    padding-bottom: var(--space-base);
}

.ph-md {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);

}

.ph-lg {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);

}

.ph-xl {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);

}

.ph-xxl {
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xxl);

}

.pw-0 {
    padding-left: 0;
    padding-right: 0;
}

.pw-base {
    padding-left: var(--space-base);
    padding-right: var(--space-base);
}

.pw-md {
    padding-left: var(--space-md);
    padding-right: var(--space-md);

}

.pw-lg {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);

}

.pw-xl {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);

}

.pw-xxl {
    padding-left: var(--space-xxl);
    padding-right: var(--space-xxl);

}


/* corners */

.rounded-sm {
    border-radius: 8px;
}

.rounded-md {
    border-radius: 1em;
}

.rounded-lg {
    border-radius: 2em;
}

/* Round the top-left corner of the first header cell */

table.rounded-sm {
        border-radius: 6px;
}

table.rounded-sm thead th:first-child {

        border-top-left-radius: 6px;
}

table.rounded-sm thead th:last-child {
    border-top-right-radius: 6px;
}

table.rounded-md {
        border-radius: 1em;
        -moz-border-radius: 1em;
}

table.rounded-lg {
        border-radius: 2em;
        -moz-border-radius: 2em;
}
*


/* typography */

.text-justify {
    text-align: justify;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto; /* optional fallback */
    overflow-wrap: break-word; /* safer line breaking */

    /* Nonstandard, safe to include */
    hyphenate-limit-chars: 6 3 2;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;

    text-align-last: left; 
    text-wrap: balance;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

/* lists */


ul.list-style-type-none {
  list-style-type: none;
}

/* tables */

table.table-head-shaded thead {
    background-color: var(--color-primary-lighter);
}

.dark-mode table.table-head-shaded thead {
    background-color: var(--color-primary-lighter-dm);
}


table.alternate tr:nth-child(even) * {
    background-color: var(--color-primary-lighter-2);
}

.dark-mode table.alternate tr:nth-child(even) * {
    background-color: var(--color-primary-lighter-dm-2);
}