@font-face { font-family: "hack"; font-display: swap; font-style: normal; font-weight: 400; src: url("../webfonts/hack-regular-subset.woff2") format("woff2"); }
@font-face { font-family: "hack"; font-display: swap; font-style: italic; font-weight: 400; src: url("../webfonts/hack-italic-subset.woff2") format("woff2"); }
body { font-family: "hack", monospace; font-size: 16px; font-weight: 400; background-color: var(--oc-gray-9); color: var(--oc-green-9); }

main { position: absolute; width: 98%; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media (min-width: 576px) { main { font-size: 18px; width: 90%; } }
@media (min-width: 768px) { main { font-size: 20px; width: 80%; } }
h1, p { margin: 0; }

a { color: inherit; font-style: italic; }

a:hover, a:active { color: var(--oc-green-5); }

#json { white-space: nowrap; }

#json:before { content: "{"; }

#json:after { content: "}"; }

.my { margin-top: 1rem; margin-bottom: 1rem; }

.mt { margin-top: 1.5rem; }

.ms { margin-left: 1.5rem; }

.key { color: var(--oc-green-4); text-transform: none; }

.error, .value { color: var(--oc-green-4); text-transform: none; }