@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 {
  width: 98%;
  margin: 0;
}
@media (min-width: 576px) {
  main {
    font-size:18px;
    width:90%;
    margin: 5%;
  }
}
@media (min-width: 768px) {
  main {
    font-size:20px;
    width:80%;
    margin: 10%

  }
}
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:lowercase
}
.error,
.value {
  color:var(--oc-green-4);
  text-transform:lowercase
}