/* PUBWRITER
=============================================================================*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,400italic,700,700italic&subset=latin);

.dark-mode {
  -webkit-filter: invert(1);
  filter: invert(1);
}

.dark-mode {
  background-color: white;
  -webkit-filter: invert(1);
  filter: invert(1);
}

.dark-mode .embed-responsive {
  background-color: #0A0A0A;
  -webkit-filter: invert(1);
  filter: invert(1);
}

.dark-mode img {
  /*  background-color: white;  */
  -webkit-filter: invert(1);
  filter: invert(1);
}

.dark-mode #toc {
  /*  background-color: white;  */
  -webkit-filter: invert(1);
  filter: invert(1);
}

#toc {
  color: limegreen;
  position: fixed;
  overflow-y: scroll;
  height: 95vh;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 60%;
  background-color: rgba(0, 0, 0, .8);
  padding-right: 1%;
  z-index: 3;
}

#toc a {
  color: limegreen;
}

#toc h5 {
  color: white;
  text-align: center;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
}

.dropdown-menu {
  position: absolute;
}

/*--Nav Bar Customization--*/

.pcolor {
  color: #27A2D5;
}
.top-nav {
  border:none;
}

/*--Nav Bar Icon--*/

.top-nav.navbar .navbar-brand  {
  background:url(https://arnique.net/demos/assets/logo-icon.png) 15px center no-repeat;
  padding-left: 55px;
  color: #fff;
}
.top-nav .navbar-right li {
  border-left:1px solid rgba(255,255,255,0.1);
}
.top-nav .navbar-nav .marked > a {
  background:#27A2D5;
  color: #fff;
}

footer {
  text-align:center;
  margin:60px auto 0 auto;
  padding:20px 0;
  border-top: 1px solid #ddd;
}
/* .content {
  max-width:750px;
} */

header {
  text-align:center;
  margin:60px 0;
}

#slider {
  width: 400px;
  margin:15px auto 0 auto;
}

#val {
  color: #C21D2E;
  font-weight:bold;
}

.live-gutter >div:after {
  content: "";
  background: #ddd;
  height:150px;
  width:100%;
  display: block;
}

#css-box{
  width:100%;
  padding: 20px;
  border: 2px solid #ddd;
  height:300px;
  margin:30px 0;
}

/** RESPONSIVE YOUTUBE **/

.video-container {
	position: relative;
	padding-bottom: 25em;
	padding-top: 35px;
	height: 0;
	overflow: hidden;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/*height: 100%*/
}
