:root {

  --text-color: #090404;
  --text-color-2: black;
  --back-color: #fbfdf2;
  --back-color-2: #eedeee;
  --link-color: #111177;
  --link-color-2: #1314b9;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #eee0d7;
        --text-color-2: #efefdf;
        --back-color: #222;
        --back-color-2: #111;
        --link-color: #5566ff;
        --link-color-2: #5263f4;
      }      
}

body {
  color: var(--text-color);
  background: var(--back-color);
  font-family: 'Open Sans',Arial,sans-serif;
  margin: 3px;
}

h1 {
  text-align: center;
}

code {
  font-size: 1.25em;
}

pre > code,
ul > li,
p {
  white-space: pre-wrap;
  /* in case the word makes more than 100% width break it*/
  word-wrap: break-word;
}

p {
  white-space: initial;
  max-width: 900px;/*easier to read ?*/
  margin-left: 4px;
  font-size: 1.05em;
}

a, a:visited {
  color: var(--link-color);
}

main > nav > a {
  display: block;
  margin-left: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
  font-size: 1.62em;
  text-decoration: none;
  background-color: var(--back-color-2);
}
.nav-ext {
    margin-bottom: 1em;
    color: var(--link-color-2);
}

main > nav > a:hover,
main > nav > a:focus {
  text-decoration:underline;
  color: var(--back-color-2);
  background-color: var(--text-color-2);
}

main > article {
  padding: 0.6em;
  border-bottom: 2px solid var(--text-color-2);;
}

@media screen and (min-width: 960px) {

  main > nav > a {
    padding-top: 1px;
    padding-bottom: 1px;
    text-align: left;
    font-size:1.4em;
  }

  main > nav {
    position: fixed;
    width:16em;
    float:left;
    padding-top: 2.3em;
    margin-right:1em;
  }

  main > article {
    border-left: 2px solid #444;
    margin-left: 16em;
    padding-left: 1.3em;
    padding-right: 1.7em;
  }
}



d-htmljsresult {
  border: 1px solid;
  display: block;
}

/* .htmljsandoutput {
} */

.htmljsandoutput > section {
  display: inline-block;
  max-width: 100%;
  min-height: 150px;
  border: 1px solid;
  vertical-align: top;
}

.htmljsandoutput > section > pre {
    padding: 4px;
}

.htmljsandoutput > section > h4 {
  border: 1px solid;
  text-align: center;
}

d-htmljsresult * {
  margin-bottom:1px;
  margin-top:1px;
}


.user {
    background-color: #6293a6;  /* fallback */
    background-image: linear-gradient(0, #f3a0a0, #427090);
}

.user-picture {
    border-radius: 50%;


}

.user-bio {
    text-indent: 2;
    font-style: italic;
}