/* 
  ========================================================================
  ======================= Table of Contents: Page ========================
  ======================================================================== 
*/
#toc-page {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

#toc-page ul {
  list-style: none;
  padding-left: 0px;
}

#toc-page a,
#toc-page a:hover,
#toc-page a:focus {
  /* 
      So that a-tag envelops the entire container in which it is located.
      This means that the entire container is a link
      and not just the text of the a tag ==> Better Usability.
    */
  display: block;


  padding: 12px 42px 12px 42px;
  text-decoration: none;
  color: var(--md-sys-color-primary-container);
}

#toc-page>ul>li {
  /* For better readability. Space after one "section" ended */
  margin-bottom: 48px;
}




/* 
  ========================================================================
  ================= Containers / Buttons for ToC-Headings ================
  ======================================================================== 
*/
.btn-toc-heading,
.btn-toc-heading:hover,
.btn-toc-heading:focus,
.btn-toc-subheading,
.btn-toc-subheading:hover,
.btn-toc-subheading:focus {
  border-radius: 8px;
  margin: 18px;
}

.btn-toc-heading:hover,
.btn-toc-heading:focus,
.btn-toc-subheading:hover,
.btn-toc-subheading:focus {
  background-color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-primary-container);
}



/* 
  ========================================================================
  =========================== ToC-Heading Button =========================
  ======================================================================== 
*/
.btn-toc-heading,
.btn-toc-heading:hover,
.btn-toc-heading:focus {
  font-size: 2rem;
}

.btn-toc-heading {
  background-color: var(--md-sys-color-on-surface-variant);
}




/* 
  ========================================================================
  ======================== ToC-Subheading Button =========================
  ======================================================================== 
*/
.btn-toc-subheading,
.btn-toc-subheading:hover,
.btn-toc-subheading:focus {
  font-size: 1.3rem;
}

.btn-toc-subheading {
  background-color: var(--color-on-surface-variant2);
}



/* 
  ========================================================================
  ======================== Button to jump to ToC =========================
  ======================================================================== 
*/
.btn-jump-to-toc {
  font-size: 1.2rem;
  display: flex;
  justify-content: flex-end;
  margin: 12px 0px 12px 0px;
}

.btn-jump-to-toc a {
  color: var(--md-sys-color-on-surface);
}

.btn-jump-to-toc a:hover,
.btn-jump-to-toc a:focus {
  color: var(--md-sys-color-custom-color-1);
}


/* 
  ========================================================================
  ====================== Mobile Responsiveness ===========================
  ======================================================================== 
*/
/* 
  Media Query Breakpoints are based on the sizes of the devices 
  in Google developer tools. 
*/
@media (max-width: 425px) {

  .btn-toc-heading,
  .btn-toc-heading:hover,
  .btn-toc-heading:focus {
    font-size: 1.8rem;
  }

  .btn-toc-subheading,
  .btn-toc-subheading:hover,
  .btn-toc-subheading:focus {
    font-size: 1.3rem;
  }
}