:root {
  font-family: Arial, helvetica, sans-serif;
  scroll-behavior: smooth;
  --logo-height: 96px;
  --logo-width: var(--logo-height);
  --logo-vertical-margins: .5rem;
  --logo-horizontal-margins: .7rem;
  --header-height: calc(var(--logo-height) + 2 * var(--logo-vertical-margins));
  --logo-section-width: calc(var(--logo-width) + 2 * var(--logo-horizontal-margins));
  --footer-height: 1.3rem;
  --toc-width: 10rem;
  --toc-gap: 1.7rem;
}
body {
  margin: 0;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  src:
  url("../app/material-symbols-outlined-OUZOYCEU.woff2") format("woff2")
}

.icon {
  font-family: 'Material Symbols Outlined';
  height: 1.6125em;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.iconWrapper {
  position: relative;
  top: .1em;
  display: inline-block;
  height: calc(1em - 1px);
  overflow-y: hidden;
}


kbd {
  border: 1px solid hsl(210, 0%, 30%);
  border-radius: .2em;
  background-color: hsl(210, 0%, 90%);
  margin: 0 .1em;
  padding: .2em;
}

.page_header {
  background: linear-gradient(to top, hsl(210, 90%, 45%), hsl(240, 20%, 80%));
  width: 100%;
  height: var(--header-height);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  display: grid;
  grid: "logo title" auto
  "logo subtitle" 1fr
  / var(--logo-section-width) 1fr;
  z-index: 10;
}
.page_header > * {
  margin: 0;
  padding: 0;
}
.page_header .title {
  font-size: 3.5em;
  grid-area: title;
}
.page_header .subtitle {
  font-size: 1em;
  font-weight: normal;
  grid-area: subtitle;
}
.page_header .logo {
  grid-area: logo;
  margin: var(--logo-vertical-margins) var(--logo-horizontal-margins);
}
.page_header a {
  color: unset;
  text-decoration: unset;
}
.page_header .logo a img {
  width: var(--logo-width);
  height: var(--logo-height);
  aspect-ratio: 1;
}

.page_content {
  margin-top: calc(var(--header-height) + .7em);
  margin-bottom: calc(var(--footer-height) + .7em);
  margin-left: 8px;
  margin-right: 8px;
  width: 100%;
  display: grid;
  grid-template: [row1-start] ". mainbody ." auto [row1-end]
  [row2-start] ". toc ." auto [row2-end]
  / 1fr min(calc(100% - 16px), 800px) 1fr;
}

.mainbody {
  grid-area: mainbody;
}

@media (min-width: calc(816px + 10rem /* toc width */ + 1.7rem /*toc gap*/)) {
  .page_content {
    grid-template: [row1-start] ". toc . mainbody ." auto [row1-end]
    / 1fr minmax(0, var(--toc-width)) var(--toc-gap) minmax(0, 800px) 1fr;
  }
}

.page_content > .mainbody > div > p > img, .page_content > .mainbody > p > img {
  width: 80%;
  margin: .7em 10%;
  border: 1px solid hsl(210, 90%, 45%);
  border-radius: 1em;
}

.page_footer {
  background-color: white;
  width: 100%;
  height: var(--footer-height);
  overflow: hidden;
  position: fixed;
  box-sizing: border-box;
  z-index: 10;
  bottom: 0;
  left: 0;
  padding: .1em .7em;
  display: grid;
  grid: "dev_info version" 1fr
  / 1fr auto;
  border-top: 1px solid hsl(210, 90%, 45%);
}
.page_footer .dev_info {
  grid-area: dev_info;
  font-size: .8rem;
}
.page_footer .version {
  font-size: .6rem;
  text-align: right;
  grid-area: version;
}

.centeredButtons {
  display: flex;
  gap: .3em;
  justify-content: center;
}
.centeredButtons a {
  display: block;
  padding: .7em;
  background: linear-gradient(to top, hsl(210, 90%, 45%), hsl(240, 20%, 80%));
  border-radius: .7em;
  border: 1px solid white;
  text-decoration: none;
  color: black;
}
.centeredButtons a:hover {
  border-color: hsl(210, 90%, 20%);
}
.centeredButtons a:active {
  border-color: hsl(210, 90%, 80%);
}


.toc_menu {
  grid-area: toc;
  list-style-type: none;
  padding: 0;
}

.toc_menu  > li {

}

.toc_menu .toc_app {
  list-style-type: none;
  padding: 0;
}
.toc_menu .toc_app a {
  display: block;
  padding: .7em;
  margin: 1.3em 0;
  background: linear-gradient(to top, hsl(210, 90%, 45%), hsl(240, 20%, 80%));
  border-radius: .7em;
  border: 1px solid white;
  text-decoration: none;
  color: black;
  width: 8rem;
}

.toc_menu .toc_app a:hover {
  border-color: hsl(210, 90%, 20%);
}
.toc_menu .toc_app a:active {
  border-color: hsl(210, 90%, 80%);
}


.note_information {
  background-color: hsl(210, 90%, 80%, .3);
  border: .1em solid hsl(210, 90%, 30%);
  padding: .5em 1.3em .5em 3.3em;
  margin: .7em 0;
  min-height: 2.5em;
  box-sizing: content-box;
  position: relative;
  left: 0;
  &::before {
    content: "\2757";
    position: absolute;
    left: 10px;
    font-size: 2em;
  }
}