:root {
  /*LAYOUT*/
  --nav-left-width: 11rem;
  --nav-right-width: 9rem;
  --margin-left: max(4vw, 2rem);
  --margin-right: max(4vw, 2rem);
  --margin-top: 2rem;
  --margin-bottom: 6rem;
  --margin-nav-left: 2rem;
  --margin-nav-right: 0.4rem;

  --media-max-width: 40vw;
}


html {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    color: var(--color-font-main);
    font-family: var(--font-family);
    scrollbar-color: #00000040 #00000000;
    scrollbar-width: thin;
}
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding:0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.main-content {
  position: relative;
  margin-left: calc(var(--margin-left) + var(--nav-left-width) + var(--margin-nav-left));
  margin-right: calc(var(--margin-right) + var(--nav-right-width) + var(--margin-nav-right));
  width: calc(100vw - (var(--margin-right) + var(--nav-right-width) + var(--margin-nav-right) + var(--margin-left) + var(--nav-left-width) + var(--margin-nav-left)));
  height: fit-content;
}
aside {
  z-index: 0;
  position: fixed;
  top: 0;
  height: 100vh;
  overflow-y: scroll;
  hyphens: manual;
}
aside::-webkit-scrollbar {
  width: 0rem;
  height: 0rem;
}

.menuitem.highlight {
}

.main-nav {
  margin-left: var(--margin-nav-left);
  left:0;
  padding:1em;
  width: var(--nav-left-width);
}
.nav-parent-item {
  font-weight: 600;
}
.nav-child-item {
  margin-left: .2rem;
}
.main-nav ul {
  list-style: none;
  line-height: 1.5em;
  font-size: 0.8rem;
}
.main-nav a:hover {
  text-decoration: underline;
}
.active a {
  /* color: var(--contrast-inverse);
  font-weight:700; */
  background-color: var(--primary-focus);
  /* border: .1em solid var(--primary); */
}
nav > ul > li > details {
  margin-bottom: 0;
  padding-bottom: 0.15em;
}
nav > ul > li > details[open] > summary {
  margin-bottom: 0;
}
nav > ul > li > details > summary::after {
  margin-top: -0.9rem;;
}

.main-content {
  max-width: 45rem;
  margin: auto;
  padding: var(--spacing);
}
.main-content > * {
  max-width: 100%;
}

nav > ul > form {
  margin-bottom: var(--spacing);
}
#search_input {
  height: 1rem;
  margin-bottom: 0;
  font-size: 0.8rem;

  padding-inline-start: var(--nav-link-spacing-horizontal);
  background-position: center right .6rem;
}
.nav-contents {
  margin-right: var(--margin-nav-right);
  right:1em;
  padding:1em;
  width: var(--nav-right-width);
}
.nav-contents ul {
  list-style:none;
  margin:0 1em;
  padding:0;
  font-size: 0.6rem;
}
.nav-contents ul li:first-child {
  font-weight: 600;
  border-bottom: var(--border-width) solid var(--accordion-border-color);
  padding-bottom: 0.15em;
}
.nav-contents:hover {
  opacity:1;
}
.layer2 {
  margin-left: .5em;
  font-weight: 200;
}
.nav-contents a:hover {
  text-decoration:underline;
}
.nav-contents > nav > ul > li:only-child {
  display: none;
}

@media only screen and (max-width: 60rem) {
  :root {
    --media-max-width: 80vw;
  }
  .main-content {
    margin-right: var(--margin-right);
    margin-left: var(--margin-left);
    width: calc(100vw - (var(--margin-right) + var(--margin-left)));
  }
  .nav-contents {
    display: none;
  }
  .main-nav {
    position: relative;
    height: fit-content;
    width: calc(100vw - (var(--margin-right) + var(--margin-left)));
    border-bottom: .2rem solid var(--accordion-border-color);
    padding-bottom:0.2em;
    margin-bottom:0.6em;
  }
}

body > footer {
  width: auto;
  bottom: 0;
  margin-left: calc(var(--margin-nav-left) + var(--nav-left-width) + var(--spacing));
  margin-right: calc(var(--margin-nav-right) + var(--nav-right-width) + var(--spacing));
  margin-top: 6rem;
}
footer > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
footer > div > a {
  color: var(--primary);
}
footer > img {
  margin: auto;
  margin-bottom: var(--spacing);
  display: block;
  position: sticky;
  bottom: 0;
  left: 0;
}


h1.main-title {
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 2rem;
}
h1,h2,h3,h4,h5,h6 {
  margin-bottom: .5rem;
}
h2 {
  margin-left: 1rem
}
h3 {
  margin-left: 2rem
}
h4 {
  margin-left: 3rem
}
h5 {
  margin-left: 4rem
}
h6 {
  margin-left: 5rem
}
/*
em {
  text-align: left;
  text-justify: inter-word;
} */

.fa, .fa-regular, .fa-solid {
  color: var(--primary);
  stroke: var(--primary);
  fill: var(--primary);
}
p:has(.fa-lg) {
  color: var(--primary);
}
blockquote > p {
  margin-bottom: 0;
}
blockquote > p > .fa {
  margin-bottom: var(--spacing);
  margin-right: var(--spacing);
}

img, video {
  max-width: var(--media-max-width);
  max-height: calc(100vh - 10rem);
  border-radius: .4rem;
  margin-bottom: var(--spacing);
  background-color: white;
}
img {
  cursor: zoom-in;
}
p:has(img,video) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
p:has(video, img + em) > em {
  margin-top: -0.5em;
  font-size: calc( var(--font-size) - .3);
  max-width: var(--img-max-width);
}
/* p:has(img + em) > img {
  margin-bottom: 0;
} */