@import url('https://fonts.googleapis.com/css?family=Muli:400,400i,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300&display=swap');

/*    font-family: 'Source Serif Pro', serif;

 /*------------- Whole Document---------------- */

body {
  font-family: 'Muli';
  font-size: 16px;
  margin-top: 3em !important;
  margin-bottom: 1em;
}

img {
    display: block;
}
tr:hover {background-color:#f5f5f5;}

/*----------------ADDING WHITE SPACE-------------*/

title {
  margin-top: 2em !important;
  margin-bottom: 1em;
}

.section h1,
.section h2, 
.section h3, 
.section h4, 
.section h5 { 
  padding-top: 3em !important; /*adding so much padding because theme adds a margin-top: -65px by default */
  margin-bottom: 0.75em;
}

.vid_container {
    position: relative;
    margin: auto;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

  /* Space Between TOC and 
  Righthand side content on large screens */

 @media (min-width: 992px) {
    .col-md-9 {
      width: 75%;
      padding-left: 5em !important;
      padding-top: 2em !important;
    }
 }

/* links */
a { 
  color: #FF00FF; /*magenta*/
}

a:hover {
 color: #8b008b; /* darker color when hovering */
}

/*-----------------TOC----------------*/

#TOC {
  position: fixed;
  left: 30px;
  width: 220px;
  max-width:100%;
  overflow:auto;
}

   /* TOC links */

.list-group-item {
    color: black;
    font-size: 16px;
}

.list-group-item.active {
    color: black;
    background-color: white;
    border: none;
}

.list-group-item:hover, 
.list-group-item.active:hover {
    color: black;
    background-color: white;
}

/* NO TOC on mobile */
@media screen and (max-width: 767px){

  .col-xs-12.col-sm-4.col-md-3 {
    display: none;
  }
  
  .top-text {
    font-size: 25px;
  }

  .bottom-text {
    font-size: 40px;
  }
}


/*----------------NAVBAR ---------------*/
.navbar-default {
    color: #FF00FF;
    background-color: white;
    font-size: 16px;
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}

.navbar-default .navbar-nav>.open>a, 
.navbar-default .navbar-nav>.active>a, 
a.dropdown-toggle:hover {
  color: #FF00FF;
  background-color: WHITE !important;
}

/* Dropdown menu color */
.navbar-default .dropdown-menu {
    color: #FF00FF;
    background-color: WHITE;
}

/* Dropdown menu hover color */
  .navbar-default .dropdown-menu>li>a:hover {
    color: #FF00FF;
    background-color: WHITE;
  }

/* Navbar Links when hovered*/
.navbar-default .dropdown-menu>.active>a
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav:hover, 
.navbar-default .navbar-nav>li>a:hover, 
a.navbar-brand:hover {
  color: #FF00FF; !important;
  background-color: WHITE;
}