.floating-window {
  position: fixed;
  top: 2rem;
  right: 2rem;
  /* width: 18rem; */
  width: 33%;
  padding: 0.5rem 1rem;
  opacity: 0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: block;
  transition: opacity 0.5s ease-out;
}
.floating-window-menu {
  color: var(--col-foreground-floating-window-menu);
  font-weight: bold;
  background-color: var(--col-background-floating-window-menu);
  border: 4px solid var(--col-border-floating-window-menu);
  z-index: 1000;
}
.floating-window-notice {
  color: var(--col-foreground-floating-window-notice);
  font-weight: bold;
  background-color: var(--col-background-floating-window-notice);
  border: 4px solid var(--col-border-floating-window-notice);
  z-index: 1001;
}
.floating-window-error {
  color: var(--col-foreground-floating-window-error);
  font-weight: bold;
  background-color: var(--col-background-floating-window-error);
  border: 4px solid var(--col-border-floating-window-error);
  z-index: 1002;
}
.table-of-contents {
  color: var(--col-foreground);
  text-decoration: underline;
}
.table-of-contents:hover {
  color: var(--col-highlight);
  font-weight: bold;
  cursor: pointer;
  font-size: 1.1rem;
}
.toc0 { margin-left: 0em; }
.toc1 { margin-left: 2em; }
.toc2 { margin-left: 4em; }
.toc3 { margin-left: 6em; }
.toc4 { margin-left: 8em; }
.toc5 { margin-left: 10em; }
.toc6 { margin-left: 12em; }

menu {
  /* The program should hide the original menu content that you defined and generate new menu content. If that doesn't happen, then
  something went very wrong and the program didn't run. We want this error to be noticable */
  color: var(--col-foreground-floating-window-error); 
  background: var(--col-background-floating-window-error);
  border: 4px solid var(--col-border-floating-window-error);
  font-family: "Work Sans", "Cursive";
  line-height: 1.7rem;
  width: fit-content;
  margin: 0rem;
  gap: 0rem;
  padding: 0.5rem;
}
.menu-selected {
  color: var(--col-header-selected);
}
menu-name:hover {
  color: rgb(255, 255, 255);
  font-weight: bold;
  cursor: pointer;
}
menu-generated {
  margin: 0rem;
  gap: 0rem;
  padding: 0rem;
  display: grid;
  width: fit-content;
  grid-template-rows: auto;
  grid-template-columns: auto auto;
}
menu-generated > h0 {
  grid-column: span 2;
}
menu-generated > h1 {
  grid-column: span 2;
}
menu-generated > h2 {
  grid-column: span 2;
}
menu-generated > h3 {
  grid-column: span 2;
}
menu-generated > h4 {
  grid-column: span 2;
}
menu-generated > h5 {
  grid-column: span 2;
}
menu-generated > h6 {
  grid-column: span 2;
}
menu-generated > menu-name {
  color: var(--col-menu-name-foreground);
  padding: 0.2rem 1rem 0.2rem 0.2rem;
  background: linear-gradient(to right, var(--col-menu-name-1), var(--col-menu-name-2), var(--col-menu-name-description));
  /* background-color: var(--col-menu-name-1); */
  font-family: "Work Sans", "Cursive";
  line-height: 1.7rem;
}
menu-generated > menu-description {
  color: var(--col-menu-description-foreground);
  padding: 0.2rem 1rem 0.2rem 1rem;
  background: linear-gradient(to right, var(--col-menu-name-description), var(--col-menu-description-1), var(--col-menu-description-2));
  /* background-color: var(--col-menu-description-1); */
  font-family: "Work Sans", "Cursive";
  line-height: 1.7rem;
}
