:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: #fefefe;
    --text-color: #122111;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #122111;
    --text-color: #efe;
  }
}

html {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  color: var(--text-color);
  background-color: var(--background-color);
  height: 100%;
  display: flex;
  flex-direction: row;
}
input {
  font: inherit;
}
body {
  flex: 1;
  padding: 1em;
}
h1 {
  margin: 0 1rem 0 1rem;
}
h2 {
  margin: 0 1rem 3ex 1rem;
}
h3 {
  font-size: 1.2em;
  margin: 0 0 2ex 0;
  padding: 0;
}
h4 {
  margin: 3ex 0 0 0;
  padding: 0;
}
#elstatusDiv {
  display: flex;
  flex: 1;
  gap: 1em;
  flex-direction: row;
}
#elstatusDiv > div {
  display: flex;
  flex-direction: row;
  gap: 1em;
}
section {
  display: flex;
  flex: 1;
  flex-direction: column;
}
article {
  border: 1px solid var(--text-color);
  padding: 1em;
  border-radius: 6px;
  margin-bottom: 2ex;
}
#elstatusDiv section:has(h1.disabled) + div,
section:has(h2.disabled),
article:has(h3.disabled) {
  opacity: 0.5;
}
h1.disabled::after,
h2.disabled::after,
h3.disabled::after {
  content: '🔴';
  font-size: 0.5em;
  float: right;
}
h1:not(.disabled)::after,
h2:not(.disabled)::after,
h3:not(.disabled)::after {
  content: '🟢';
  font-size: 0.5em;
  float: right;
}
article.parent {
  border: none;
}
article.parent h3,
article.parent h4 {
  display: none;
}
article p {
  display: flex;
  align-items: baseline;
  margin: 1ex 0 0 0;
}
article p:first-child {
  margin-top: 0;
}

@media (max-width: 1200px) {
  article p {
    flex-direction: column;
  }
}
@media (max-width: 1024px) {
  #elstatusDiv {
    flex-direction: column;
  }
  article p {
    flex-direction: row;
  }
  #elstatusDiv > div article p {
    flex-direction: column;
  }
}
@media (max-width: 800px) {
  #elstatusDiv > div {
    flex-direction: column;
  }
  #elstatusDiv > div article p {
    flex-direction: row;
  }
}