@media only screen and (min-width: 1601px) {

#tableOfContentContainer{

  }

  #TOC {

    position: fixed;
    font-family: "PT Serif";
    font-size: 14px;
    color: #CC6633cc;
    opacity: 70%;
    line-height: 3.25rem;
    top: 52.5%;
    right: 6%;
    width: 20%;
    transform: translateY(-50%);
    background-color: #3f8f9b0cc;
    border: solid .1px #c9c9c9;
    border-radius: 5px;
    padding-bottom: 1rem;
    padding-top: 2rem;
    padding-left: 0.25rem;
    padding-right: 1rem;

}


  #TOC ul li a:hover {
    color: #d46c5b;
     opacity: 20%;
background-color: #3f8f9bcc;
padding: 3px 5px;
    border-radius: 3px 3px 3px 3px;
    border: .1px solid;

  }

  #TOC a:hover {
    color: #d46c5b;
     opacity: 20%;
     background-color: #3f8f9b0cc;
     padding: 3px 5px;
    border-radius: 3px 3px 3px 3px;
    border: .1px solid;
  }

  #TOC .page-header {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  #TOC-nav ul {
    overflow: scroll;
    width: 80%;
    white-space: nowrap;
    line-height: 15rem;
    opacity: 0.75;
  }

  /* ignore h1 header */
  #TOC-nav ul ul ul {
    margin-left: 2rem;
    opacity: 0.75;
  }

  #TOC-nav .nav-link {
    text-overflow: ellipsis;
    overflow: hidden;
    color: #CC6633;
    opacity: 70%;
  }

#TOC li a.active {
  font-weight: bold;
  background-color: orange;
}



#TOC li a.active {
  font-weight: bold;
  background-color: orange;
}


  /* Media Queries */


  }

@media only screen and (max-width: 1600px) {

#tableOfContentContainer{
position:relative;
    background-color: #3f8f9b0cc;

    background-clip: padding-box;
    z-index: 999;
    cursor: pointer;
    font-family: "PT Serif";
    font-size: 12px;
    padding: 5px 10px;
    color: #CC6633;
     opacity: 70%;
  }

    #TOC {
      font-size: 12px;
       line-height: 2.25rem;
      color: #CC6633cc;
      background-color: #3f8f9b0cc;
    opacity: 70%;
    }

  #TOC ul li a:hover {
    color: #d46c5b;
font-size: 12px;
background-color: #3f8f9bcc;
padding: 3px 5px;
    border-radius: 3px 3px 3px 3px;
    border: .1px solid;
opacity: 40%;
  }

  #TOC .page-header {
font-size: 12px;
opacity: 70%;
  }

  #TOC-nav ul {
font-size: 12px;
opacity: 70%;
  }


#TOC li a.active {
  font-weight: bold;
  background-color: orange;
}



#TOC li a.active {
  font-weight: bold;
  background-color: orange;
}
#table-of-contents li a.active {
  font-weight: bold;
  background-color: orange;
}

  /* ignore h1 header */
  #TOC-nav ul ul ul {
font-size: 12px;
opacity: 70%;
  }

  #TOC-nav .nav-link {
    text-overflow: ellipsis;
    overflow: hidden;
    color: #CC6633cc;
    opacity: 70%;
  }


html, body {
    scroll-padding-top: 100px;
}

html {
	scroll-behavior: smooth;
}

}

#TOC li a.active {
  font-weight: bold;
  background-color: orange;
}



#TOC li a.active {
  font-weight: bold;
  background-color: orange;
}