/* CMU Serif Fonts */
@font-face {
  font-family: 'Computer Modern Serif';
  src: url('fonts/cmunti.eot');
  src: url('fonts/cmunrm.eot?#iefix') format('embedded-opentype'),
      url('fonts/cmunrm.woff') format('woff'),
      url('fonts/cmunrm.ttf') format('truetype'),
      url('fonts/cmunrm.svg#cmunrm') format('svg');
  font-weight: normal;
  font-style: normal;
  }


  @font-face {
  font-family: 'Computer Modern Serif';
  src: url('fonts/cmunbx.eot');
  src: url('fonts/cmunbx.eot?#iefix') format('embedded-opentype'),
      url('fonts/cmunbx.woff') format('woff'),
      url('fonts/cmunbx.ttf') format('truetype'),
      url('fonts/cmunbx.svg#cmunbx') format('svg');
  font-weight: bold;
  font-style: normal;
  }


  @font-face {
  font-family: 'Computer Modern Serif';
  src: url('fonts/cmunti.eot');
  src: url('fonts/cmunti.eot?#iefix') format('embedded-opentype'),
      url('fonts/cmunti.woff') format('woff'),
      url('fonts/cmunti.ttf') format('truetype'),
      url('fonts/cmunti.svg#cmunti') format('svg');
  font-weight: normal;
  font-style: italic;
  }


  @font-face {
  font-family: 'Computer Modern Serif';
  src: url('fonts/cmunbi.eot');
  src: url('fonts/cmunbi.eot?#iefix') format('embedded-opentype'),
      url('fonts/cmunbi.woff') format('woff'),
      url('fonts/cmunbi.ttf') format('truetype'),
      url('fonts/cmunbi.svg#cmunbi') format('svg');
  font-weight: bold;
  font-style: italic;
  }


/* THEME */
[data-theme="dark"] {
  background-color: #000 !important;
  color: #fff;
}

/* OPPOSITE */
.opposite {
  background-color: #000;
  color: #fff;
}
[data-theme="dark"] .opposite {
  background-color: #fff;
  color: #000;
}



[data-theme="dark"] hr {
  color: white;
}

[data-theme="dark"] a {
  color: #fff;
}

[data-theme="dark"] a.dropdown-item {
  color: white
}

[data-theme="dark"] .dropdown-menu {
  background-color: black;
  border-color: gray;
}

[data-theme="dark"] .custom-control-label {
  color: white;
}

[data-theme="dark"] img {
  filter: invert();
}




[data-theme="dark"] .btn-default {
  color: #fff;
  background-color: #000;
  border-color: #fff;
}

[data-theme="dark"] .btn-outline-dark {
  color: white;
  border-color: white;
}

#titledesktop {
  margin-top: 15px;
  text-decoration:none;
}

#titlemobile {
  text-decoration:none; 
  text-align: center;
  margin-top: 8px;
  
}

#containermobile {
  width:200px;
}

#instrumentdropdown {
  position:absolute;
  top: 14px;
  left: 2vw;
  width:10%;
}

#navmobile {
  width: 100%; 
  display: Flex; 
  align-items: center; 
  justify-content: center;
}

#footernav {
  width: 100%;
  display: Flex; 
  align-items: center; 
  justify-content: center;
  padding-bottom: 16px;
}

#themetoggle { /* LIGHT/DARK THEME TOGGLE */
  position: absolute;
  right: 4vw;
  top: 30px;
}

#togglemobile {
  padding-left: 16px;
}


#headerline {
  margin-top: 0px;
  margin-bottom: 0px;
}

#footerline {
  margin-top: 0px;
  margin-bottom: 25px;
}


#maincontainer {
  margin: 0 0 0 0;
}

body {
  background-color: white;
  color: black;
  font-family: 'Computer Modern Serif',serif;
  font-size: 16px;
}

hr {
  color: black;
}


a {
  color: black;
  text-decoration: none;
}


ul {
  list-style-type: none;
}

.nav-link {
  color: black;
}

a.nav-link:hover {
  color: #aaa;
}


.footer {
  padding: 2px .75vw 3px;
}


/* EXCERPT FORMATTING */

.instrument {
  text-align: center;
  margin-top: 26px;
}

.subinstrument {
  text-align: center;
  font-style: italic;
  margin-bottom: 15px;
}

.unorderedlist {
  font-size:125%;
  text-align: center; 
  margin-right:50px;
}

.titleexcerpt {
  text-align: center;
  margin-top: 48px;
}

.composerexcerpt {
  text-align: center;
  margin-bottom: 32px;
}

.excerpt {
  width:100%;
}

.numberexcerpt {
  text-align: left;
}

.excerptbreak {
  margin-top: 64px;
  margin-bottom: 64px;
}

.excerptend {
  margin-top: 128px;
  margin-bottom: 128px;
}

.navbar {
  padding-top: 0px;
}



a:hover {
  color: #aaa;
  text-decoration:none;
}
.logo {
  text-align: center;
  text-decoration: none;
}

.container > h3 {
  margin-bottom: 0px;
}

.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 0.8vw;
}

.row > h2 {
  margin-bottom: 16px;
}

.headingtitle {
  margin-top: 18px;
}

/** HEADER **/

/* END HEADER */

/********** Large devices only **********/
@media (min-width: 1200px) {
  .logo h1 {
    font-size: 2.5em;
  }
}

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    max-width: 90vw;
  }
}

/********** Small devices only **********/
@media (min-width: 900) and (max-width: 991px) {
  .logo h1 {
    font-size: 2.1em;
  }
  .container {
    max-width: 90vw;
  }
}

/********** Extra small devices only **********/
@media (max-width: 899px) {
  .logo h1 {
    font-size: 2em;
  }
  .container {
    max-width: 90vw;
  }
  .composer {
    padding-left: 10vw;
   }
}