:root {
  --step--2: clamp(0.5208rem, 0.433rem + 0.4392vi, 0.96rem);
  --step--1: clamp(0.625rem, 0.51rem + 0.575vi, 1.2rem);
  --step-0: clamp(0.75rem, 0.6rem + 0.75vi, 1.5rem);
  --step-1: clamp(0.9rem, 0.705rem + 0.975vi, 1.875rem);
  --step-2: clamp(1.08rem, 0.8273rem + 1.2638vi, 2.3438rem);
  --step-3: clamp(1.296rem, 0.9693rem + 1.6337vi, 2.9297rem);
  --step-4: clamp(1.5552rem, 1.1338rem + 2.1069vi, 3.6621rem);
  --step-5: clamp(1.8662rem, 1.324rem + 2.7114vi, 4.5776rem);
  --space-2xs: clamp(6px, 5.2px + 0.25cqi, 10px);
  --space-xs: clamp(9px, 7.8px + 0.375cqi, 15px);
  --space-s: clamp(12px, 10.4px + 0.5cqi, 20px);
  --space-m: clamp(18px, 15.6px + 0.75cqi, 30px);
  --space-l: clamp(27px, 23.4px + 1.125cqi, 45px);
  --space-xl: clamp(33px, 28.6px + 1.375cqi, 55px);
  --space-2xl: clamp(48px, 41.6px + 2cqi, 80px);
  --space-2xs-xs: clamp(6px, 4.2px + 0.5625cqi, 15px);
  --space-xs-s: clamp(9px, 6.8px + 0.6875cqi, 20px);
  --space-s-m: clamp(12px, 8.4px + 1.125cqi, 30px);
  --space-m-l: clamp(18px, 12.6px + 1.6875cqi, 45px);
  --space-l-xl: clamp(27px, 21.4px + 1.75cqi, 55px);
  --space-xl-2xl: clamp(33px, 23.6px + 2.9375cqi, 80px);
  --space-s-l: clamp(12px, 5.4px + 2.0625cqi, 45px);
}

:root {
  --site-image-size: min(8rem, 11vw);
  /* We are calculating this here because grid cannot calculate the row heights properly with staggered rows. It always wants to make the first and second rows too big due to the image being in one and the generated TOC being in the other. */
  --search-bar-height: 50px;
  --min-column-gap: 15px;
  --main-column-max-width: 1000px;
  --main-column-fraction: 4;
  --side-column-fraction: 1;
  --standard-column-width: calc(
    (
        100vw - var(--min-column-gap) *
          (var(--main-column-fraction) + var(--side-column-fraction) - 1)
      ) / (var(--main-column-fraction) + var(--side-column-fraction) * 2)
  );
  --side-column-width: max(
    240px,
    calc(var(--standard-column-width) * var(--side-column-fraction))
  );
  --main-column-width: min(
    var(--main-column-max-width),
    min(
      calc(var(--standard-column-width) * var(--main-column-fraction)),
      calc(100vw - var(--side-column-width) * 2 - var(--min-column-gap) * 5)
    )
  );
  --column-gap-width: max(
    var(--min-column-gap),
    calc(
      (
          100vw - var(--main-column-width) - (var(--side-column-width) * 2) -
            (var(--min-column-gap) * 3)
        ) / 2
    )
  );
  --second-grid-row-height: calc(
    var(--side-column-width) - var(--search-bar-height) - var(--min-column-gap)
  );
  --hamb-menu-color: blue;
  --navbar-bg: white;
}

html {
  --header-fonts: "Source Sans Pro", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
}

body #site-picture {
  grid-area: site-picture;
}
body #site-picture img {
  width: 100%;
}
body #search {
  grid-area: search;
}
body #title {
  grid-area: title;
}
body #generated-toc {
  grid-area: generated-toc;
}
body #content {
  grid-area: content;
}
body #site-index {
  grid-area: site-index;
}
body #footer {
  grid-area: footer;
}
body #content {
  margin-left: auto;
  margin-right: auto;
}
body #content img {
  /* prevent images from expanding past available horizontal space */
  max-width: 100%;
}
body #generated-toc {
  width: min(max-content, 90vw);
  margin: 0 auto;
}
body #generated-toc > ol.toc > li > ol.toc {
  padding-left: 1em;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: var(--header-fonts);
  font-weight: 300;
  margin: var(--space-s-m) 0;
  scroll-margin-top: var(--min-column-gap);
}
body .license {
  background: var(--secondary-lighter);
  color: var(--secondary);
  display: inline-block;
  font-family: monospace, monospace;
  font-size: 1em;
  font-weight: var(--font-weight-bold);
  padding: 0 1em;
}
body #footer p {
  max-width: var(--main-column-max-width);
  margin: auto;
  text-align: center;
}
body .pagefind-ui__drawer {
  position: relative;
  background-color: white;
  z-index: 1;
}
body main {
  display: grid;
  margin: 0;
  padding: var(--min-column-gap);
  row-gap: var(--min-column-gap);
  column-gap: var(--column-gap-width);
  grid-template-areas: "site-picture   search        menu" "site-picture   title         title" "generated-toc  generated-toc generated-toc" "content        content       content" "site-index     site-index    site-index" "footer         footer        footer";
  grid-template-columns: calc(var(--site-image-size) * 2) auto calc(15px + var(--min-column-gap));
  grid-template-rows: var(--search-bar-height) min-content repeat(4, auto);
}
body main div#title {
  height: fit-content;
  margin: auto;
}
body main div#title #title-header {
  font-size: var(--step-5);
  text-align: center;
  color: var(--primary);
  font-weight: var(--font-weight-normal);
  margin: var(--heading-margin);
}
body main div#title p {
  font-size: var(--step-0);
  margin: var(--space-m-l) 0.3em;
  line-height: var(--space-m);
}
body main h1 {
  font-size: var(--step-5);
}
body main h2 {
  font-size: var(--step-4);
}
body main h3 {
  font-size: var(--step-3);
}
body main h4,
body main h5,
body main h6 {
  font-size: var(--step-2);
}
body main p {
  font-size: var(--step-1);
  margin: var(--space-s) 0;
  line-height: 1.2;
}
body main ul,
body main ol {
  list-style-position: outside;
}
body main ul li,
body main ol li {
  margin: var(--space-xs) 0;
  font-size: var(--step-1);
  line-height: 1.2;
}
body main nav#menu.nav > ul.menu,
body main div#generated-toc > ul.menu {
  margin-top: var(--space-m);
}
body main nav#menu.nav > ul.menu,
body main nav#menu.nav > ul.menu > ul.menu,
body main div#generated-toc > ul.menu,
body main div#generated-toc > ul.menu > ul.menu {
  padding-left: var(--space-m);
}
body main nav#menu.nav li,
body main div#generated-toc li {
  color: var(--primary);
  margin: var(--space-s) 0;
  line-height: var(--space-m);
  font-size: var(--step-2);
}
body main nav#menu.nav li :any-link,
body main div#generated-toc li :any-link {
  text-decoration: none;
}
body main nav#menu.nav li :hover,
body main div#generated-toc li :hover {
  color: var(--primary-dark);
  text-decoration: underline;
}
body main #content {
  padding: 0 0.5em;
}
body main #content > h1:first-child {
  margin-top: 0;
}
body main #content ul {
  padding-left: var(--space-s-m);
}
body main #site-index > ul.toc,
body main #site-index > ul.toc > ul.toc {
  padding-left: var(--space-s-m);
}
body main div#title p#title-header {
  margin: 0.25em 0;
}
body main #site-index > ul.toc,
body main #site-index > ul.toc > ul.toc,
body main #content ul {
  padding-left: var(--space-s);
}
body main .nav {
  max-height: 0;
  z-index: 9;
  transition: max-height 0.5s ease-out;
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: scroll;
  scrollbar-width: none;
  background-color: var(--navbar-bg);
  padding: 0;
}
body main .nav > ul.menu {
  justify-content: space-around;
  width: unset;
  list-style: none;
  top: unset;
  background-color: transparent;
}
body main .nav > ul.menu a {
  display: block;
  color: var(--link-color);
}
body main .nav > ul.menu a:hover {
  background-color: var(--navbar-menu-highlight-bg);
  color: var(--navbar-menu-highlight-fg);
}
body main .nav > ul.menu > li,
body main .nav > ul.menu > li.essential-links {
  padding: revert;
}
body main .nav > ul.menu > li:hover {
  background-color: transparent;
}

#side-menu {
  display: none;
}

.side-menu:checked ~ main nav {
  max-height: 100%;
  overflow: scroll;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.side-menu:checked ~ main nav > ul.menu {
  height: calc(100vh + 4px - var(--space-m) * 2);
  display: revert;
}
.side-menu:checked ~ main nav > ul.menu > li > ul.sub-menu li {
  padding: 0.25em 0.5em;
  margin: 1em 0;
}
.side-menu:checked ~ main nav > ul.menu > li > ul.sub-menu li a {
  margin: 0;
  padding: revert;
}
.side-menu:checked ~ main nav > ul.menu > li:hover > ul.sub-menu {
  position: static;
}
.side-menu:checked ~ main nav > ul.menu > li:hover > ul.sub-menu > li a {
  background-color: var(--navbar-menu-bg);
  color: var(--link-color);
}
.side-menu:checked ~ main nav > ul.menu > li:hover > ul.sub-menu > li a:hover {
  background-color: var(--navbar-menu-highlight-bg);
  color: var(--navbar-menu-highlight-fg);
}
.side-menu:checked ~ main nav > ul.menu li {
  display: block;
  list-style: none;
  padding: revert;
}

.side-menu:checked ~ .hamb .hamb-line {
  background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
  transform: rotate(-45deg);
  top: 0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
  transform: rotate(45deg);
  top: 0;
}

.hamb {
  display: initial;
  z-index: 10;
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 0;
  --hamb-menu-size: 15px;
  padding: calc(var(--min-column-gap) * 1.5) var(--hamb-menu-size);
}
.hamb .hamb-line {
  background: var(--hamb-menu-color);
  display: block;
  height: calc(var(--hamb-menu-size) / 5);
  position: relative;
  width: calc(var(--hamb-menu-size) * 2);
}
.hamb .hamb-line::before,
.hamb .hamb-line::after {
  background: var(--hamb-menu-color);
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}
.hamb .hamb-line::before {
  top: calc(var(--hamb-menu-size) / 2);
}
.hamb .hamb-line::after {
  top: calc(var(--hamb-menu-size) / -2);
}

@media screen and (min-width: 1070px) {
  body .hamb,
  body .side-menu {
    display: none;
  }
  body p {
    line-height: 1;
  }
  body ul li,
  body ol li {
    margin: var(--space-2xs) 0;
    font-size: var(--step-1);
    line-height: 1;
  }
  body main {
    grid-template-areas: "site-picture  title    search" "site-picture  title    generated-toc" "site-index    content  generated-toc" "footer        footer   footer";
    grid-template-columns: var(--side-column-width) var(--main-column-width) var(--side-column-width);
    grid-template-rows: var(--search-bar-height) var(--second-grid-row-height) 1fr min-content;
  }
  body main nav#menu.nav {
    max-height: initial;
    width: initial;
    height: initial;
    position: initial;
  }
  body main nav#menu.nav > ul.menu {
    margin: 0;
    padding-left: 0.1em;
  }
  body main nav#menu.nav > ul.menu > ul.menu {
    padding-left: 1.5em;
  }
  body main nav#menu.nav li,
  body main div#generated-toc li {
    font-size: var(--step-0);
    margin: var(--space-2xs) 0;
  }
  body #generated-toc {
    width: initial;
  }
  body #generated-toc > ol.toc {
    position: sticky;
    top: 20px;
    padding-left: 1.2em;
  }
  body #generated-toc > ol.toc > li > ol.toc {
    padding-left: 1em;
  }
}

/*# sourceMappingURL=eliogrieco.css.map */