/* in text link styling general
on all pages*/
.in-text-link {
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  color: black;
}

/*color change when hovering over links*/
.in-text-link:hover {
  color: gray;
}

/* style of floating menu wrapper, includes button (on buttons stylesheet) and menu (below)
on all pages*/
nav.toc {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: auto;
  font-size: 0.85rem;
  background: transparent;
  padding: 0;
  border-radius: 0.5rem;
  box-shadow: none;
  z-index: 1000;
  font-family: inherit;
  display: inline-block;
}

/*style of the menu that opens up from the button*/
nav.toc ul {
  margin-top: 0;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  /*box-shadow: 0 4px 10px rgba(0,0,0,0.1);*/
  background: #6db989;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: absolute;
  width: 7rem;
  border: 8px solid transparent;
  background-clip: padding-box;
}

/*styling of the menu list*/
nav.toc li {
  list-style: none;
  margin: 0.4rem 0;
}

/*individual menu items*/
nav.toc li a {
  display: block;
  color: #555;
  text-decoration: none;
  margin: 0.25rem 0;
  transition: color 0.2s;
  text-transform: uppercase;
  font-weight: bold;
  text-align: right;
}

/* change colour of menu item when hovering over*/
nav.toc li a:hover {
  color: #25D366;
}

/*open menu when clicking*/
nav.toc ul:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* open menu when hovering on desktop*/
 nav.toc:hover ul, nav.toc ul:hover {
  opacity:1;
  pointer-events: auto;
  transform: translateY(0);
 }

/* short intro at the top ove page, just below title, wrapper for text and TOC
same style for all pages*/
.page-intro {
  width: 100%;
  box-sizing: border-box;
  background: rgb(203, 219, 203);
  justify-content: center;
  justify-self: center;
  display: flex;
  gap: 5vw;
  padding: 0 5vw;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/*intro TOC wrapper style*/
.page-toc {
  text-align: right;
  width: 20vw;
}


/*intro TOC style*/
.page-toc ul {
  list-style: none;
}

/*intro TOC list items*/
.page-toc li a {
  text-decoration: none;
  color: #555;
  font-weight: bold;
  text-transform: uppercase;
}

/*intro TOC change color when hover*/
.page-toc li a:hover {
  color: #25D366;
}

/*intro text*/
.page-txt {
  width: 40vw;
  text-align: left;
  font-style: italic;
}

/*intro adjsut to mobile, text below TOC*/
@media (max-width: 768px) {
  .page-intro {
    flex-direction: column;
    align-items: center;
  }

  .page-toc, .page-txt {
    width: 100%
  }

  .page-text p {
    text-align: center;
  }
}