/* || General setup */

html, body {
  margin: 0;
  padding: 0;
}

body {
  width: 70%;
  min-width: 400px;
  margin: 0 auto;
}

.active{border: 2px solid; border-left-style: none;border-right-style: none; border-top-style: none;}
.visuallyhidden{ display: none }
/* colors  */
header a {
color: #2a2a2a; 
text-decoration: none
}

nav li details ul, html {
  background-color: #E2E2E2;
}

h1, h2, h3, h4, p, input, li,figure,figurecaption,dl,dt {
  color: #2a2a2a;
}

body > * {
  background-color: #19747E;
}

main, header,article, aside, footer, section {
  background-color: #A9D6E5;
}

@media (prefers-color-scheme: dark) {
header a {
color: #E4E4E4; 
text-decoration: none
}
nav li details ul, html {
  background-color: #2C2C2C;
}

h1, h2, h3, h4, p, input, li,figure,figurecaption,dl,dt {
  color: #E4E4E4;
}

body > * {
  background-color: #A8DADC;
}
main a {color: pink}
main a:visited{color: #C68D93}
main, header,article, aside, footer, section {
  background-color: #822659;
}
}

/* || typography */

html {
  font-size: 10px;
}

h1, h2, h3, p, input, li {
  font-family: "Georgia", serif;
}

h1 {
  font-size: 4rem;
  text-align: center;
  font-variant: small-caps;
  font-stretch: ultra-condensed;
}

h2 {
  font-size: 3rem;
  text-align: center;
}

h3 {
  font-size: 2.2rem;
}

figure,figurecaption {
  text-align: center;
}

dt {
  font-size: 2rem;
}

p, li, dl {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* || header layout */

header {
  margin-bottom: 10px;
}

body > * {
  padding: 1%;
}

main, header, nav ul, article, aside, footer, section, figure,figurecaption {
  padding: 1%;
}

nav {
  font-size: 2rem;
  line-height: 1.7;
  text-decoration: none;
  color: black;
}

nav ul {
  list-style-type: none;
  align-items: start;
  justify-content: space-around;
  text-align: left
}

nav li {
  min-width: 220px;
  z-index: 1;
}

nav li:hover {
  background-color:#19747E;
}

nav li details ul {
  padding: 1%;
  display: block;
}

/* || main layout */


footer {
  margin-top: 10px;
}

@media (min-width: 950px) {
  nav {
    height: 50px;  }
  nav li {
  min-width: 220px;
}
nav ul {
  display: flex;
  text-align: center
}
} 
 pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#2d2b57;color:#e3dfff;font-weight:400}.hljs-subst{color:#e3dfff}.hljs-title{color:#fad000;font-weight:400}.hljs-name{color:#a1feff}.hljs-tag{color:#fff}.hljs-attr{color:#f8d000;font-style:italic}.hljs-built_in,.hljs-keyword,.hljs-section,.hljs-selector-tag{color:#fb9e00}.hljs-addition,.hljs-attribute,.hljs-bullet,.hljs-code,.hljs-deletion,.hljs-quote,.hljs-regexp,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-string,.hljs-symbol,.hljs-template-tag{color:#4cd213}.hljs-meta,.hljs-meta .hljs-string{color:#fb9e00}.hljs-comment{color:#ac65ff}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-selector-tag,.hljs-strong{font-weight:400}.hljs-literal,.hljs-number{color:#fa658d}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}