@font-face {
    font-family: "hack";
    src: url("../fonts/hack-regular-subset.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    text-rendering:optimizeLegibility
}

@font-face {
    font-family: "hack";
    src: url("../fonts/hack-italic-subset.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    text-rendering:optimizeLegibility
}

body {
    font-family: "hack", monospace;
    font-size: 16px;
    font-weight: 400;
    background-color: var(--oc-gray-9);
    color:var(--oc-green-4)
}

main {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* text-transform:lowercase */
}

@media (min-width: 576px) {
    main {
        font-size: 18px;
        width:80%
    }
}

@media (min-width: 768px) {
    main {
        font-size: 20px;
        width:60%
    }
}

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: "}"
}

.block {
    margin-left: 1.5rem;
    margin-top: 1rem;
    margin-bottom:1rem
}

.key:after {
    content: ": "
}

.attr:before, .list-attr:before {
    content: '"'}.attr:after,.list-attr:after{content:'",'
}

.array-key:after {
    content: ": ["
}

.array-attr {
    margin-left:1.5rem
}

.array-attr:before {
    content: '"'}.array-attr:after{content:'",'
}

.array:after {
    content: "],"
}

.list-key:after {
    content: ": {"
}

.list:after {
    content: "},"
}

.list-subkey {
    margin-left:1.5rem
}

.list-subkey:after {
    content: ": "
}