/* -------- non-core visual styling -------- */
html {
    /* border: 2px solid #ffffff; */
    font-size: 11.5px;
    font-size: 11px;
    font-size: 12px;
    border: 1px dashed #000000;
    background-color: #a8b0ff;
    background-color: #b2b8f7;
    background-color: #b5bbff;

    background-color: #b5c0ff;
    font-size: 14px;
    font-size: 15px;
}

body {
    /* background-color: #6470db; */
    /* background-color: #7d88e8; */
    /* background-color: #939dff; */
    /* background-color: #8c97f0; */
    /* border: 2px solid #cac6b4; */
    background-color: #939dff;

    background-color: #9aa3ff;
    background-color: #9ca3ef;
    background-color: #9ba3f6;
    background-color: #9fa7ff;

    background-color: #9fafff;

    border: 2px solid #000000;
    border: 2px solid #d0c7c7;
    border: 2px solid #b3a49e;
    border: 2px solid #b19695;
    border: 2px solid #8990be;
    border: 2px solid #7f8ad2;
    border: 2px solid black;

    padding: 3em;
    padding: 2em;
}

.layout {
    display: flex;
    /* gap: 30px; */
}

.left {
    width: 70%;
    width: 66%;
}

.right {
    width: 30%;
    width: 34%;
    display: flex;
    flex-direction: column;
    /* padding: 2em; */
    /* background-color: rgb(255 255 255 / 20%); */
    /* border-radius: 20px; */
    margin-left: 3em;
    margin-left: 2em;
}

.right > *:first-child {
    margin-top: 0;
}

.right > *:last-child {
    margin-bottom: 0;
}

img {
    width: 140px;
}

h2 {
    font-size: 18px;
    margin-bottom: .625em;
    margin-bottom: .75em;
    margin-top: 0;
    /* color: #111; */
}

h3 {
    font-size: 18px;
    margin-bottom: .625em;
    /* color: #111; */
}

p {
    line-height: 1.3;
    /* color: #111; */
}

.mp0 {
    margin: 0 !important;
    padding: 0 !important;
}

.content-details {
    margin-bottom: 1.75em;
}

h1.web-title {
    font-size: 2em;
    font-size: 1.875em;
    margin-top: 0;
    margin-bottom: 0.375em;
}

p.learning-objective {
    margin: 0;
}

.code-sandbox {
    background-color: #454968;
    /* border: 3px solid #2f324a; */
    background-color: #454b79;
    /* border: 3px solid #363a59; */
    background-color: #4e537d;
    /* border: 3px solid #404462; */

    background-color: #464b70;
    border: 3px solid #3b4063;
    padding: 1em 2em;

    background-color: transparent;
    border: none;
    padding: 0;

    /* margin-top: 1.75em; */
    padding: 2em;
    padding: 1em 2em;

    background-color: #464b70;
    border: 2px solid #3b4063;
    /* background-color: #454965;
            border: 2px solid #343956; */

    background-color: #414564;
    border: 2px solid #343855;

    font-family: monospace;
    font-size: 11px;
    font-size: 11.5px;

    /* color: #1818b6; */
    /* color: #18188f; */
}

.code-sandbox p {
    line-height: 1.2;
}

/* .code-sandbox > *:first-child {
    margin-top: 0;
}

.code-sandbox > *:last-child {
    margin-bottom: 0;
} */

.element-types {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 1.75em;
    padding-top: 1.375em;
    margin-top: 1.425em;
    padding-top: 1.25em;
    border-top: 1px solid #868edb;
}

.element-types p {
    margin: 0;
    padding: 0;
}

.css-insights {
    margin-bottom: 1.5em;
}

.css-insights > *:first-child {
    margin-top: 0;
}

.css-insights > *:last-child {
    margin-bottom: 0;
}

.css-insights p:first-of-type,
.summary p:first-of-type  {
    margin-top: 0;
}

/* -------- identifying visual styling -------- */
.inline-element {
    background-color: rgb(255 129 11 / 30%);
    border: 2px dashed #bc5007;

    background-color: #fbc0b8;
    background-color: #f4b7af;
    border: 2px dashed #ff7416;

    background-color: #e5a9a1;
    border: 2px dashed #ed680f;

    background-color: rgba(219, 154, 145, 0.75);
    border: 2px dashed #e5630c;

    background-color: rgb(226 165 156 / 75%);
    background-color: rgb(226 165 156 / 80%);
    background-color: rgba(244, 173, 159, 0.8);
    background-color: rgb(238 166 152 / 80%);
    background-color: rgb(238 169 152 / 80%);
    border: 2px dashed #d45806;

    margin: 20px;
    padding: 10px;

    margin: 10px;
    padding: 5px;
}

.replaced-element {
    background-color: rgba(177, 107, 205, 0.65);
    border: 3px dotted #991cd8;

    background-color: #b16bcd;
    border: 3px dotted #a02fac;

    background-color: rgb(194 113 226 / 90%);
    background-color: rgb(177 107 205 / 90%);
    background-color: rgba(184, 110, 214, 0.9);
    border: 3px dotted #a02fac;

    margin: 20px;
    padding: 10px;
}

.block-element {
    background-color: rgb(111 123 235 / 60%);
    border: 2px solid #3f3cd7;

    background-color: #8e9aff;
    border: 2px solid #3f3cd7;
    border: 2px solid #4f4cff;

    background-color: rgb(117 130 243 / 60%);
    border: 2px solid #4340e5;

    background-color: #8893f2;
    background-color: #808bf1;

    background-color: #7682ef;
    background-color: rgb(118 130 239 / 90%);
    background-color: rgba(123, 136, 247, 0.9);
    background-color: rgb(132 144 252 / 90%);
}