@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700');
:root {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  --background-color: #fff;
  --border-color: #555753;
  --text-color: #2e3436;
  --text-color-red: #c00;
  --text-color-orange: #c85000;
  --text-color-yellow: #c4a000;
  --text-color-green: #4e9a06;
  --text-color-blue: #06989a;
  --text-color-indigo: #3465a4;
  --text-color-violet: #75507b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #2e3436;
    --text-color: #d3d7cf;
    --text-color-red: #ef2929;
    --text-color-orange: #f6893c;
    --text-color-yellow: #fce94f;
    --text-color-green: #8ae234;
    --text-color-blue: #34e2e2;
    --text-color-indigo: #729fcf;
    --text-color-violet: #ad7fa8;
  }
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-size: 13px;
  line-height: 1.3;
  margin: 2em 2em 2em 1em;
}
@media (min-width: 768px) {
  body {
    font-size: 14px;
  }
}
body, code, kbd, samp, var {
  font-family: 'Roboto Mono', monospace;
}
header {
  text-align: center;
}
footer {
  margin-top: 2em;
  opacity: 0.5;
}
body > div {
  background-color: inherit;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  margin-top: 2em;
  padding: 1em 1em 2em 1em;
}
h1 {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0.5em 0;
  overflow-wrap: anywhere;
}
h1 * {
  color: inherit !important;
}
h2 {
  background-color: inherit;
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  padding: 0 3px;
  position: relative;
  top: -1.65em;
  left: -3px;
  white-space: nowrap;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover, a:hover + .sublinks {
  font-weight: bold;
  text-decoration: underline;
}
#dns-data {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 0 2ch;
  overflow-wrap: anywhere;
}
#dns-data > div {
  display: contents;
}
#dns-data > div > span:first-child {
  text-align: right;
}
#rdap-data {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.error {
  color: var(--text-color-orange);
}
.value {
  color: var(--text-color-yellow);
}
.value.string {
  color: var(--text-color-violet);
}
.value.number {
  color: var(--text-color-indigo);
}
.value.boolean {
  color: var(--text-color-green);
}
.value .ip {
  color: var(--text-color-red);
}
.value .domain {
  color: var(--text-color-blue);
}
