.azusa-cream [layout=bullets] {
    background-color: #3F4056;
}
.azusa-cream [layout=code] {
    background: none;
}
.azusa-cream:not([body-bg=code]) {
    background: #3F4056;
}
.azusa-cream * {
    color: #FFF5E3;
}
.azusa-cream h1,
.azusa-cream h2,
.azusa-cream h3,
.azusa-cream h4,
.azusa-cream h5,
.azusa-cream h6,
.azusa-cream [layout][invert] a {
    color: #1ABC9C;
}
[body-bg=cover].azusa-cream h1,
[body-bg=cover].azusa-cream h2,
[body-bg=cover].azusa-cream h3,
[body-bg=cover].azusa-cream h4,
[body-bg=cover].azusa-cream h5,
[body-bg=cover].azusa-cream h6,
[body-bg=title].azusa-cream h1,
[body-bg=title].azusa-cream h2,
[body-bg=title].azusa-cream h3,
[body-bg=title].azusa-cream h4,
[body-bg=title].azusa-cream h5,
[body-bg=title].azusa-cream h6 {
    color: #fff;
}
[layout=title]:not([backface]) h1,
[layout=title]:not([backface]) h2,
[layout=title]:not([backface]) h3,
[layout=title]:not([backface]) h4,
[layout=title]:not([backface]) h5,
[layout=title]:not([backface]) h6 {
    color: #1ABC9C;
}

#backface:before {
    content: "";
    transition: opacity 200ms linear;
    opacity: 0;
    width: 100%;
    height: 440px;
    background-color: rgba(0, 0, 0, .8);
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -220px 0 0 -50%;
}

[body-bg=cover] #backface:before,
[body-bg=title] #backface:before {
    opacity: 1;
}
[body-bg=title] #backface:not([style*=background]):before {
    opacity: 0;
}