unitCommonStyles.css

:root {

}

* {
    box-sizing: border-box;
    /* line-height: 1.1rem; */
}

h3, h4, div {
    padding: 4px;
}

#unitName {
    text-align: center;
    width: 100%;
}

#readTimeDiv {
    background: #ebe1e1;
    padding: 4px;
    border-radius: 4px;
}

h2 {
    background: linear-gradient(#aa96f3, #fac6d5, #aa96f3);
}

h3 {
    text-transform: uppercase;
    background: linear-gradient(#f396b2, #fac6d5, #f396b2);
}

h4 {
    text-decoration: underline;
}

dt {
    font-weight: bold;
    border-left: 4px groove orange;
    border-radius: 6px;
    padding: 4px;
}

dd {
    font-style: italic;
    margin-left: 4ch;
    border-left: 4px groove rgb(200, 255, 0);
    border-radius: 6px;
    padding: 4px;
}

.example {
    border: 1px solid greenyellow;
    padding: 2px 12px;
}

.question {
    color: red;
    font-weight: bold;
}

.answer {
    color: blue;
    font-weight: bold;
}

table {
    border: 1px solid black;
    border-collapse: collapse;
    max-width: 100%;
}

tr, td {
    border: 1px solid black;
    padding: 4px 8px;
}

th {
    border: 2px solid black;
    padding: 4px 8px;
    background-color: #f8c6d5;
}

tr:nth-child(even) {
    background-color: #faeff2;
}

li {
    margin: 12px 4px;
}

pre {
    white-space: pre-wrap;
    overflow-x: auto;
}

.srcFile > pre > .language-javascript,
.srcFile > pre > .language-json {
    max-height: 400px;
    overflow-y: auto;
    width: 90%;
    border-right: 2px solid red;
}

@media print {
    pre {
        white-space: pre-wrap;
        overflow-x: auto;
    }

    .srcFile > pre .language-javascript,
    .srcFile > pre > .language-json {
        max-height: 100%;
        width: 98%;
    }
}


mjx-math,
.calculation {
    border: 1px dotted green;
    padding: 2px 8px;
    background-color: #f8eee3;
}
mjx-math > * {
    margin: 4px 0px;
}

mjx-math > *:first-child {
    margin-left: 4px;
}

mjx-math > *:last-child {
    margin-right: 4px;
}

.calculation {
    /* line-height: 1.1rem; */
}

.calculation > mjx-container > mjx-math {
    border: unset;
}

.formula {
    border-left: 8px inset blue;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

.formula:hover {
    border-left: 8px inset red;
}