body { font-family: 'Manrope', sans-serif; }

.container { max-width: 50em; }
.readable { max-width: 34em; }

.bg-coral { background: #da604a }

.text-faint { color: #888; }

.min-width-200 { min-width: 200px; }
.max-width-280 { max-width: 280px; }
.min-height-200 { min-height: 200px; }

.mt-neg-medium { margin-top: -2rem }

.clickable { cursor: pointer; transition: opacity 200ms ease-in-out; }
.clickable:hover { opacity: 0.6; }

.red { display:block; width: 2rem; height: 2rem; background: #ff4c4c; }
.blue { display:block; width: 2rem; height: 2rem; background: #0099e5; }
.green { display:block; width: 2rem; height: 2rem; background: #34bf49; }

.sticky-if-not-ie { position: sticky; top: 2rem; }

.demo-spacing .row > * { transition: margin-right 200ms ease-in-out }
.demo-padding .row { transition: padding 200ms ease-in-out }

/* making highlight.js atom dark accessible */
pre { color: #abb2bf; background: #282c34; }
.hljs { padding: 1rem; line-height: 1.4; }
hljs-pre code { white-space: pre; }
.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
  color: #e4737c;
}

/* responsive font scaling */
@media screen and (min-width: 641px) { html { font-size: 18px; } }
@media screen and (min-width: 1281px) { html { font-size: 20px; } }