@import url('https://fonts.googleapis.com/css2?family=Neuton:ital,wght@0,200;0,300;0,400;0,700;0,800;1,400&family=Playpen+Sans:wght@100..800&display=swap&family=Simonetta:ital,wght@0,400;0,900;1,400;1,900&display=swap');

:root {
    --color-bg: rgb(40, 42, 54);
    --color-text: rgb(248, 248, 243);
    --color-yellow: rgb(221, 155, 81);
    --color-purple: rgb(187, 175, 244);
    --color-accent: var(--color-purple);
    --color-math: var(--color-accent);
    --color-highlight-bg: rgba(255, 255, 255, 0.2);
    --color-highlight: unset;
    --font-size: 22px;
    --font-weight: 300;

    --math-font-size: 1;
    --small-font-size: 0.67;
    --large-font-size: 1.17;
    --DM-font-size: 1;
    /* fira */
    /* --IM-font-size: 1.1; */
    /* stix-2 */
    --IM-font-size: 1.05;
    --IM-editing-font-size: 1.15;
    --line-height: 1.2;

    /* CSS HEX */
    --baby-blue-ice: #94b1ffff;
    --shadow-grey: #272838ff;
    --light-gold: #f3de8aff;
    --muted-olive: #a2be8aff;
    --sea-green: #5c946eff;

    --color-accent: var(--baby-blue-ice);
    --color-bg: var(--shadow-grey);
    --color-math: var(--light-gold);
}

.dim {
    /* --color-text: rgb(200, 200, 200); */
}

.dim .IM {
    filter: brightness(0.8);
}

*:not(.dcg-dom-change-wrapper *) {
    /* text-decoration-thickness: initial; */
    text-shadow: none;
}

/* @font-face { */
/*     font-family: 'avenir'; */
/*     src: url("../fonts/Avenir/Avenir\ Regular/Avenir Regular.ttf"); */
/*     src: url("../fonts/avenir-lt-pro/AvenirLTProMedium.otf"); */
/* } */

/* @font-face { */
/*     font-family: 'feijoa'; */
/*     src: url("../fonts/Feijoa-Font/Feijoa\ Medium.otf"); */
/* } */

.DM mjx-container[display] {
    margin-top: 0.5em;
}

#editor .DM:not(:has(+ p + p)) mjx-container[display] {
    /* not last display math */
    margin-bottom: 0;
}

#editor .DM:has(+ p + p) mjx-container[display] {
    margin-bottom: 1.5em;
}

.h1 {
    font-size: calc(var(--font-size) * 1.46) !important;
    line-height: calc(var(--font-size) * 1.75) !important;
    /* text-transform: uppercase; */
    font-weight: var(--Bold-weight);
    color: var(--color-accent);
    text-align: center;
}

.h1 .content {
    text-decoration: underline;
}

.subtitle {
    font-size: calc(var(--font-size) * 0.75) !important;
    line-height: calc(var(--font-size) * 0.83) !important;
    font-size: calc(var(--font-size) * var(--small-font-size));
    text-align: center;
    font-weight: var(--bold-weight);
    color: var(--color-accent);
}

.h2 {
    font-size: calc(var(--font-size) * 1.25) !important;
    line-height: calc(var(--font-size) * 1.5) !important;
    font-weight: var(--bold-weight);
    color: var(--color-accent);
}

.h2 .content {
    text-decoration: underline;
}

.h3 {
    font-size: calc(var(--font-size) * 1.15) !important;
    line-height: calc(var(--font-size) * 1.4) !important;
    font-weight: var(--bold-weight);
    color: var(--color-accent);
}

.h4 {
    font-size: calc(var(--font-size) * 1.15) !important;
    line-height: calc(var(--font-size) * 1.4) !important;
    font-weight: var(--bold-weight);
}

.noisy::before {
    content: unset;
}

/* .textarea .DM:has(+ p + .DM) mjx-container[display] { */
/* not last display math */
/*     margin-bottom: 0.2em; */
/* } */