:root {
    --light-blue: #02a6f2;
    --transparent-blue: #cee4ee;
    --transparent-brown: #ece3df;
    --red: #ef5552;
    --black: #000000;
    --white: #ffffff;
    --brown: #795649;
    --orange-beamer: #ff8800;
    --cyan-beamer: #0088ff;
    --cyan-beamer-alpha: #0088ff88;
    --bleu-beamer: #3333b2;
    --purple-beamer: #bf0040;
    --violet-50-beamer: #bf80bf;
    --violet-beamer: #8f00ff;

    --couleur-pnsi: #ff9800;
    --couleur-pnsi-transparente: #ff880011;
    --couleur-pnsi-sombre: #f57c00;
    --couleur-pnsi-claire: #ffe0b2;
    --couleur-pnsi-accentuee: #7c4dff;
    --couleur-pnsi-accentuee-claire: #b194ff;
    --couleur-pnsi-accentuee-transparente: #7c4dff11;


    --couleur-snt: #3333b2;
    --couleur-snt-light: #3333b211;
    --couleur-tnsi: #8f00ff;
    --couleur-tnsi-light: #8f00ff11;

    --architecture: #ff9800;
    --langage: #673AB7;
    --donnees: #0088ff;
    --algo: #795649;
    --web: #8f00ff;
    --bdd: #b194ff;

    --md-primary-fg-color: #191959;
    --md-primary-fg-color--light: #3333b2;
    --md-primary-fg-color--dark: #2C3E50;
    --md-primary-bg-color: #ffffff;
    --md-primary-bg-color--light: #ffffff;

    /* --md-accent-fg-color: #3333b2; */
    --md-accent-fg-color: #0088ff;
    --md-accent-fg-color--transparent: #0088ff80;
    --md-accent-bg-color: #ff8800;
    --md-accent-bg-color--light: #ff880080;
}


.mot-cle{
    font-family: monospace;
}

.center {
    display: block;
    margin: 0 auto;
}


/* Couleur de fond*/
.md-container {
    background-color: var(----md-sys-color-surface);
}

/* Police par défaut : page et titre*/
.md-typeset {
    color: var(--md-sys-color-on-surface)
}

h2 {
    color: var(--md-sys-color-primary)
}

h3 {
    color: var(--md-sys-color-secondary)
}

/* Couleur de surlignement des liens*/
.md-typeset .headerlink:hover, .md-typeset a:hover,  .md-typeset .headerlink:focus, .md-typeset .headerlink:hover, .md-typeset :target > .headerlink, .md-path__link:hover {
    color: var(--md-sys-color-error)
}


/* Titre de la page principale */
#__skip {
    animation: shadowMove 20s infinite linear;
    font-size: xxx-large;
}

#__skip,
h1.titre-n1 {
    background-color: var(--bleu-beamer);
    color: white;
    font-variant-caps: small-caps;
    text-align: center;
    font-weight: 800;
    /* text-shadow:
    4px 5px 0 var(--violet-beamer); */
    border-radius: 3rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding: 1rem;

    /* box-shadow: 0 0.2rem 0.5rem #00000050, 0 0 0.05rem #0000001a; */
}


h1.titre-n1 {
    font-size: 1.5rem;
}


@keyframes shadowMove {
    0% {
        text-shadow: 0px 0px 0px var(--cyan-beamer);
        /* État initial */
        color: white;
        box-shadow: 0 0 0 white, 0 0 0 white;
    }

    10% {
        text-shadow: 0px 0px 0px var(--cyan-beamer);
        /* État initial */
        color: white;
        box-shadow: 0 0 0 white, 0 0 0 white;
    }

    20% {
        text-shadow: 0px 0px 10px var(--cyan-beamer);
        color: var(--cyan-beamer);
        box-shadow: 0 0 .5rem var(--cyan-beamer);
    }

    30% {
        text-shadow: 0px 0px 0px var(--cyan-beamer);
        color: white;
        box-shadow: 0 0 0 white, 0 0 0 white;
    }

    40% {
        text-shadow: 0px 0px 0px var(--cyan-beamer);
        color: white;
        box-shadow: 0 0 0 white, 0 0 0 white;
    }

    50% {
        text-shadow: 0px 0px 10px var(--orange-beamer);
        color: var(--orange-beamer);
        box-shadow: 0 0 .5rem var(--orange-beamer);
    }

    60% {
        text-shadow: 0px 0px 0px var(--orange-beamer);
        color: white;
        box-shadow: 0 0 0 white, 0 0 0 white;
    }

    70% {
        text-shadow: 0px 0px 0px var(--orange-beamer);
        color: white;
        box-shadow: 0 0 0 white, 0 0 0 white;
    }

    80% {
        text-shadow: 0px 0px 10px var(--violet-beamer);
        color: var(--violet-beamer);
        box-shadow: 0 0 .5rem var(--violet-beamer);
    }

    90% {
        text-shadow: 0px 0px 0px var(--violet-beamer);
        color: white;
        box-shadow: 0 0 0 white, 0 0 0 white;
    }

    100% {
        text-shadow: 0px 0px 0px var(--violet-beamer);
        color: white;
        box-shadow: 0 0 0 white, 0 0 0 white;
    }
}


h1.titre-n1 {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

/* h1.titre-n1 {
  background-color: var(--md-accent-fg-color);
  color: white;
  border: 2px solid var(--md-accent-fg-color);
  font-weight: 100;
  text-align: center;
  font-variant-caps: small-caps;

  border-radius: 1.5rem;
  padding-left: .75rem;
  padding-right: .75rem;  
} */


.md-typeset h2 {
    font-size: xx-large;
}

.logo-dyn {
    color: var(--couleur-pnsi-claire);
    animation: logo 10s infinite ease-in-out;
}

@keyframes logo {
    0% {
        color: var(--md-sys-color-on-primary-container);
    }

    50% {
        color: var(--md-sys-color-on-error-container);
    }

    100% {
        color: var(--md-sys-color-on-primary-container);
    }

}

h2.titre-n2 {
    /* background-color: var(--md-accent-fg-color--transparent); */
    /* color: var(--md-primary-fg-color); */
    color: var(--cyan-beamer);
    padding: .5rem;
    padding-left: 0;
    font-variant-caps: small-caps;
    /* box-shadow: inset 0 0.2rem 0.5rem #0000000d, inset 0 0.05rem #0000001a; */
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
}


h2.titre-n2::after {
    content: "";
    background-color: var(--cyan-beamer);
    display: block;
    padding-top: 4px;
    width: 100%;
    /* box-shadow: inset 0 0.2rem 0.5rem #0000000d, inset 0 0.05rem #0000001a; */
}


h3.titre-n3 {
    padding: .5rem;
    padding-left: 0;
    font-weight: 400;
    color: var(--violet-beamer);
}


/* Configuration des boutons */
.md-typeset .md-button--primary {
    background-color: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);

}

.grille-contour {
    border: .05rem solid var(--md-default-fg-color--lightest);
    border-radius: .4rem;
    display: block;
    margin: 0;
    padding: .8rem;
    transition: background-color .25s, border .25s, box-shadow .25s
}


.grille-titre {
    /* color: var(--violet-beamer); */
    /* text-decoration-line: underline; */
}


/************************* Thèmes et séquences *************************/

.capsule {
    align-items: center;
    border-radius: 1rem;
    border: 1px solid black;
    display: inline-flex;
    font-size: min(.8em, .64rem);
    font-weight: 400;
    gap: .5em;
    letter-spacing: normal;
    line-height: 1.6;
    padding: .1em .5em;
    margin: 0;
}


a.theme {
    text-decoration: none;
}


.md-typeset a.capsule.theme:hover {
    color: white;
}



/* Capsule*/

.capsule, .md-typeset .grid.cards > ul > li a.capsule {
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-primary);
    text-decoration: none;
    margin-left: 0.25rem;
    
}

.capsule, .md-typeset .grid.cards > ul > li a.capsule:hover {
    color: var(--md-sys-color-inverse-primary);
}

.theme.capsule.langage{
    color: var(--langage);
    border-color: var(--langage);
}

.theme.capsule.langage:hover{
    color: white;    
    background-color: var(--langage);
}

.theme.capsule.architecture{
    color: var(--architecture);
    border-color: var(--architecture);
}

.theme.capsule.architecture:hover{
    color: white;    
    background-color: var(--architecture);
}

.theme.capsule.donnees{
    color: var(--donnees);
    border-color: var(--donnees);
}

.theme.capsule.donnees:hover{
    color: white;    
    background-color: var(--donnees);
}


.theme.capsule.algo{
    color: var(--algo);
    border-color: var(--algo);
}

.theme.capsule.algo:hover{
    color: white;    
    background-color: var(--algo);
}


.theme.capsule.bdd{
    color: var(--bdd);
    border-color: var(--bdd);
}

.theme.capsule.bdd:hover{
    color: white;    
    background-color: var(--bdd);
}




a.lien-passif{
    text-decoration: none;
}


/* Enlève les icônes devant les élélments d'une liste dans une carte*/
.cards ul {
    list-style-type: none;
    /* : url("/ressources/circle-chevron-right.svg");   */
}

/* Liste de tâche */
.md-typeset .task-list-item {
    padding-left: 0.25rem;
}

.md-typeset [type="checkbox"]:checked + .task-list-indicator::before {
    background-color: var(--md-sys-color-error);
}


.conteneur-grille, .boite {
    border-radius: 0.4rem;
    margin-left: 1rem;
    margin-right: 1rem;        
    padding-left: .75rem;

}

.boite {
    padding-top: .75rem;
    padding-bottom: .75rem;    
}

.boite .grille-titre {
    padding-top: 0;
    padding-bottom: 0;
}

.titre-grille {    
    font-weight: 600;
}

.titre-grille.error {
    color: var(--md-sys-color-error);
}

.titre-carte {    
    border-top-left-radius: .4rem;
    border-top-right-radius: .4rem;
    /* padding: 0.5rem; */
    font-variant-caps: small-caps;
    font-size: x-large;
}

/* Titre bandeau carte (lien compris) */
.titre-carte,
a.titre-carte, .titre-grille {    
    text-decoration: none;
    font-weight: 600;
}


a.titre-carte.pnsi {
    color: var(--couleur-pnsi-sombre);
}

a.titre-carte.tnsi {
    color: var(--couleur-tnsi);
}


a.titre-carte.snt {
    color: var(--couleur-snt);
}

/* Facteur de forme des images de carte*/
.cards img {
    object-fit: cover;
    height: 256px;
    border-radius: 0.4rem;
    display: block;
    margin: 0 auto;
}


/*Bandeau des titres des cartes*/

.md-typeset .grid ul li, .boite ul li {
    list-style-type: none;
}


.md-typeset .grid.cards>ul>li:has(.snt) {
    border-color: var(--couleur-snt-light);
    background-color: var(--couleur-snt-light);
}


.md-typeset .grid.cards>ul>li:has(.pnsi) {
    border-color: var(--couleur-pnsi-claire);
    background-color: var(--couleur-pnsi-claire);
}


.md-typeset .grid.cards>ul>li:has(.tnsi) {
    border-color: var(--couleur-tnsi-light);
    background-color: var(--couleur-tnsi-light);
}


/* Couleur de fond des cartes de thème */

.md-typeset .grid.cards>ul>li a:hover {    
    color: var(--md-sys-color-error);
    text-decoration: none;
}

/* Primaire */

.md-typeset .grid.cards.primaire>ul>li, .conteneur-grille.primaire {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.md-typeset .grid.cards.primaire>ul>li a:not(a:hover, .md-button--primary, .capsule), a.conteneur-grille.primaire {    
    color: var(--md-sys-color-on-primary-container);
    text-decoration: none;
}


/* Secondaire */

.md-typeset .grid.cards.secondaire>ul>li, .conteneur-grille.secondaire, .boite.secondaire {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.md-typeset .grid.cards.secondaire>ul>li a:not(a:hover), a.conteneur-grille.secondaire {    
    color: var(--md-sys-color-on-secondary-container);
}

.encadre.secondaire {
    background-color: var(--md-sys-color-secondary);
    color: var(--md-sys-color-on-secondary);
}

/* Tertiaire */

.md-typeset .grid.cards.tertiaire>ul>li, .conteneur-grille.tertiaire {
    background-color: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}

.md-typeset .grid.cards.tertiaire>ul>li a:not(a:hover), a.conteneur-grille.tertiaire {    
    color: var(--md-sys-color-on-tertiary-container);
}


/* Rituel */
.rituel .titre-carte {
    font-size: large;
}


.img-icone-embarquee {
    height: 1rem;
    width: 1rem;
    display: inline;
    vertical-align: middle;

}


.img-icone-embarquee_large {
    height: 1.5rem;
    width: 1.5rem;
    display: inline;
    vertical-align: middle;

}

/* Référence après image alignée à droite */
.reference {
    text-align: right;
    font-size: small;
}

.demi {
    width: 50%;
    height: auto;
    margin: auto;
}

.trois-quart {
    width: 75%;
    height: auto;
    margin: auto;
}

.saut-adaptatif {
    margin-top: 5em;
}

.saut-adaptatif-petit {
    margin-top: 2em;
}

/***************************** Mise à l'échelle ****************************/
@media screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }

    .demi,
    .trois-quart {
        width: 100%;
        height: auto;
        margin: auto;
    }

    #__skip, h1.titre-n1 {        
        font-size: x-large;
    }


    .md-typeset h2 {
        font-size: x-large;
    }

    .saut-adaptatif,
    .saut-adaptatif-petit {
        margin-top: 1em;
    }

}


/******************************** Admonition **********************************/
.md-typeset .sequence>summary::before, .md-typeset .quote > summary::before {
  background-color: var(--md-sys-color-on-tertiary-container);
}

.md-typeset .sequence>summary::before {
    -webkit-mask-image: var(--md-admonition-icon--sequence);
    mask-image: var(--md-admonition-icon--sequence);
}


.md-typeset .sequence > ul > li a, .md-typeset .correction > ul > li a {
    color: var(--md-sys-color-on-tertiary-container);
}

.md-typeset .correction>summary::before {
  background-color: var(--md-sys-color-on-secondary);
  -webkit-mask-image: var(--md-admonition-icon--correction);
  mask-image: var(--md-admonition-icon--correction);
}

.md-typeset .correction {
    background-color: var(--md-sys-color-secondary);
    color: var(--md-sys-color-on-secondary);
}


.md-typeset details:not(.correction) {
    background-color: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container)
}

/* Primaire*/
/* .md-typeset .grid.cards.primaire details:not(.correction){
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
} */

/* .md-typeset .grid.cards.primaire .sequence>summary::before, .md-typeset .grid.cards.primaire .quote > summary::before {
  background-color: var(--md-sys-color-on-primary);
} */



/* secondaire*/
/* .md-typeset .grid.cards.secondaire details:not(.correction){
    background-color: var(--md-sys-color-secondary);
    color: var(--md-sys-color-on-secondary);
} */

/* .md-typeset .grid.cards.secondaire .sequence>summary::before, .md-typeset .grid.cards.secondaire .quote > summary::before {
  background-color: var(--md-sys-color-on-secondary);
} */

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


/******************************** Emoji **********************************/
@keyframes heart {

    0%,
    40%,
    80%,
    100% {
        transform: scale(1);
    }

    20%,
    60% {
        transform: scale(1.15);
    }
}

.heart {
    animation: heart 1000ms infinite;
}


/* Centrer les graphes mermaid */
.mermaid {
    display: flex;
    justify-content: center;
}




.snt {
  --md-sys-color-primary: rgb(93 87 145);
  --md-sys-color-surface-tint: rgb(93 87 145);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(228 223 255);
  --md-sys-color-on-primary-container: rgb(69 64 119);
  --md-sys-color-secondary: rgb(95 92 113);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(228 223 249);
  --md-sys-color-on-secondary-container: rgb(71 68 89);
  --md-sys-color-tertiary: rgb(123 82 102);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(255 216 232);
  --md-sys-color-on-tertiary-container: rgb(97 59 78);
  --md-sys-color-error: rgb(137 80 32);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(255 220 197);
  --md-sys-color-on-error-container: rgb(109 57 10);
  --md-sys-color-background: rgb(252 248 255);
  --md-sys-color-on-background: rgb(28 27 32);
  --md-sys-color-surface: rgb(252 248 255);
  --md-sys-color-on-surface: rgb(28 27 32);
  --md-sys-color-surface-variant: rgb(229 225 236);
  --md-sys-color-on-surface-variant: rgb(71 70 79);
  --md-sys-color-outline: rgb(120 118 128);
  --md-sys-color-outline-variant: rgb(201 197 208);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(49 48 54);
  --md-sys-color-inverse-on-surface: rgb(244 239 247);
  --md-sys-color-inverse-primary: rgb(199 191 255);
  --md-sys-color-primary-fixed: rgb(228 223 255);
  --md-sys-color-on-primary-fixed: rgb(25 18 73);
  --md-sys-color-primary-fixed-dim: rgb(199 191 255);
  --md-sys-color-on-primary-fixed-variant: rgb(69 64 119);
  --md-sys-color-secondary-fixed: rgb(228 223 249);
  --md-sys-color-on-secondary-fixed: rgb(27 25 44);
  --md-sys-color-secondary-fixed-dim: rgb(200 195 220);
  --md-sys-color-on-secondary-fixed-variant: rgb(71 68 89);
  --md-sys-color-tertiary-fixed: rgb(255 216 232);
  --md-sys-color-on-tertiary-fixed: rgb(48 17 34);
  --md-sys-color-tertiary-fixed-dim: rgb(236 184 207);
  --md-sys-color-on-tertiary-fixed-variant: rgb(97 59 78);
  --md-sys-color-surface-dim: rgb(221 216 224);
  --md-sys-color-surface-bright: rgb(252 248 255);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(246 242 250);
  --md-sys-color-surface-container: rgb(241 236 244);
  --md-sys-color-surface-container-high: rgb(235 230 239);
  --md-sys-color-surface-container-highest: rgb(229 225 233);
  --md-extended-color-custom-color1-color: rgb(46 98 140);
  --md-extended-color-custom-color1-on-color: rgb(255 255 255);
  --md-extended-color-custom-color1-color-container: rgb(205 229 255);
  --md-extended-color-custom-color1-on-color-container: rgb(11 74 114);
}


.pnsi {
  --md-sys-color-primary: rgb(137 80 32);
  --md-sys-color-surface-tint: rgb(137 80 32);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(255 220 197);
  --md-sys-color-on-primary-container: rgb(109 57 10);
  --md-sys-color-secondary: rgb(120 79 131);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(250 215 255);
  --md-sys-color-on-secondary-container: rgb(94 56 106);
  --md-sys-color-tertiary: rgb(135 75 109);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(255 216 234);
  --md-sys-color-on-tertiary-container: rgb(107 52 85);
  --md-sys-color-error: rgb(143 73 82);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(255 218 220);
  --md-sys-color-on-error-container: rgb(114 51 59);
  --md-sys-color-background: rgb(255 248 245);
  --md-sys-color-on-background: rgb(34 26 20);
  --md-sys-color-surface: rgb(255 248 245);
  --md-sys-color-on-surface: rgb(34 26 20);
  --md-sys-color-surface-variant: rgb(243 223 210);
  --md-sys-color-on-surface-variant: rgb(82 68 59);
  --md-sys-color-outline: rgb(132 116 106);
  --md-sys-color-outline-variant: rgb(214 195 183);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(56 47 40);
  --md-sys-color-inverse-on-surface: rgb(254 238 228);
  --md-sys-color-inverse-primary: rgb(255 183 129);
  --md-sys-color-primary-fixed: rgb(255 220 197);
  --md-sys-color-on-primary-fixed: rgb(48 20 0);
  --md-sys-color-primary-fixed-dim: rgb(255 183 129);
  --md-sys-color-on-primary-fixed-variant: rgb(109 57 10);
  --md-sys-color-secondary-fixed: rgb(250 215 255);
  --md-sys-color-on-secondary-fixed: rgb(47 10 59);
  --md-sys-color-secondary-fixed-dim: rgb(230 182 241);
  --md-sys-color-on-secondary-fixed-variant: rgb(94 56 106);
  --md-sys-color-tertiary-fixed: rgb(255 216 234);
  --md-sys-color-on-tertiary-fixed: rgb(55 7 40);
  --md-sys-color-tertiary-fixed-dim: rgb(251 176 216);
  --md-sys-color-on-tertiary-fixed-variant: rgb(107 52 85);
  --md-sys-color-surface-dim: rgb(231 215 206);
  --md-sys-color-surface-bright: rgb(255 248 245);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(255 241 233);
  --md-sys-color-surface-container: rgb(251 235 225);
  --md-sys-color-surface-container-high: rgb(245 229 220);
  --md-sys-color-surface-container-highest: rgb(240 223 214);
  --md-extended-color-custom-color1-color: rgb(46 98 140);
  --md-extended-color-custom-color1-on-color: rgb(255 255 255);
  --md-extended-color-custom-color1-color-container: rgb(205 229 255);
  --md-extended-color-custom-color1-on-color-container: rgb(11 74 114);
}



.tnsi {
  --md-sys-color-primary: #6c538b;
  --md-sys-color-surface-tint: rgb(108 83 139);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(238 219 255);
  --md-sys-color-on-primary-container: #543b72;
  --md-sys-color-secondary: rgb(101 90 111);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(236 221 247);
  --md-sys-color-on-secondary-container: rgb(77 67 87);
  --md-sys-color-tertiary: rgb(128 81 89);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(255 217 222);
  --md-sys-color-on-tertiary-container: rgb(101 59 66);
  --md-sys-color-error: rgb(186 26 26);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(255 218 214);
  --md-sys-color-on-error-container: rgb(147 0 10);
  --md-sys-color-background: rgb(255 247 255);
  --md-sys-color-on-background: rgb(29 26 32);
  --md-sys-color-surface: rgb(255 247 255);
  --md-sys-color-on-surface: rgb(29 26 32);
  --md-sys-color-surface-variant: rgb(232 224 235);
  --md-sys-color-on-surface-variant: rgb(74 69 78);
  --md-sys-color-outline: rgb(123 117 127);
  --md-sys-color-outline-variant: rgb(204 196 207);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(51 47 53);
  --md-sys-color-inverse-on-surface: rgb(246 238 246);
  --md-sys-color-inverse-primary: rgb(216 186 250);
  --md-sys-color-primary-fixed: rgb(238 219 255);
  --md-sys-color-on-primary-fixed: rgb(39 13 67);
  --md-sys-color-primary-fixed-dim: rgb(216 186 250);
  --md-sys-color-on-primary-fixed-variant: rgb(84 59 114);
  --md-sys-color-secondary-fixed: rgb(236 221 247);
  --md-sys-color-on-secondary-fixed: rgb(32 24 42);
  --md-sys-color-secondary-fixed-dim: rgb(207 193 218);
  --md-sys-color-on-secondary-fixed-variant: rgb(77 67 87);
  --md-sys-color-tertiary-fixed: rgb(255 217 222);
  --md-sys-color-on-tertiary-fixed: rgb(50 16 24);
  --md-sys-color-tertiary-fixed-dim: rgb(242 183 192);
  --md-sys-color-on-tertiary-fixed-variant: rgb(101 59 66);
  --md-sys-color-surface-dim: rgb(223 216 224);
  --md-sys-color-surface-bright: rgb(255 247 255);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(249 241 249);
  --md-sys-color-surface-container: rgb(243 235 243);
  --md-sys-color-surface-container-high: rgb(237 230 238);
  --md-sys-color-surface-container-highest: rgb(232 224 232);
  --md-extended-color-custom-color1-color: rgb(46 98 140);
  --md-extended-color-custom-color1-on-color: rgb(255 255 255);
  --md-extended-color-custom-color1-color-container: rgb(205 229 255);
  --md-extended-color-custom-color1-on-color-container: rgb(11 74 114);

}

.md-main {
    background-color: var(--md-sys-color-surface-bright);
}

.md-tabs {
    background-color: var(--md-sys-color-surface-dim);
}