body{
  background-color: black;
}
#mainNav {
  min-height: 56px;
}

#mainNav .navbar-toggler {
  font-size: 80%;
  padding: 0.75rem;
  color: #64a19d;
  border: 1px solid #64a19d;
}

#mainNav .navbar-toggler:focus {
  outline: none;
}

#mainNav .navbar-brand {
  color: #161616;
  font-weight: 700;
  padding: .9rem 0;
}

#mainNav .navbar-nav .nav-item:hover {
  color: fade(white, 80%);
  outline: none;
  background-color: transparent;
}

#mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus {
  outline: none;
  background-color: transparent;
}

#mainNav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 992px) {
  #mainNav {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    background-color: transparent;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
  }
  #mainNav .navbar-brand {
    padding: .5rem 0;
    color: rgba(255, 255, 255, 0.5);
  }
  #mainNav .nav-link {
    -webkit-transition: none;
    transition: none;
    padding: 2rem 1.5rem;
    color: rgba(255, 255, 255, 0.5);
  }
  #mainNav .nav-link:hover {
    color: rgba(255, 255, 255, 0.75);
  }
  #mainNav .nav-link:active {
    color: white;
  }
  #mainNav.navbar-shrink {
    background-color: #fff;
  }
  #mainNav.navbar-shrink .navbar-brand {
    color: #161616;
  }
  #mainNav.navbar-shrink .nav-link {
    color: #161616;
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 0.25rem solid transparent;
  }
  #mainNav.navbar-shrink .nav-link:hover {
    color: #64a19d;
  }
  #mainNav.navbar-shrink .nav-link:active {
    color: #467370;
  }
  #mainNav.navbar-shrink .nav-link.active {
    color: #64a19d;
    outline: none;
    border-bottom: 0.25rem solid #64a19d;
  }
}
.whole{
  background-image: linear-gradient(black,#B6B6B6);
  padding: 20px;
  color: white;
}
header {
  position: relative;
  background-color: black;
  height: 55vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

footer{
  padding-top: 30px;
}

.toolbar{
  padding-right: 20px;
  font-size: 20px;
  color: white;
}


#code{
  overflow-wrap: unset;
  word-wrap: break-word;
  max-height: 600px;
}

#code::-webkit-scrollbar { height: 0 !important }

/* width */
#code::-webkit-scrollbar {
  width: 10px;
}

/* Track */
#code::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px white;  
  border-radius: 8px;
}
 
/* Handle */
#code::-webkit-scrollbar-thumb {
  background: white; 
  border-radius: 8px;
}

/* Handle on hover */
#code::-webkit-scrollbar-thumb:hover {
  background: ; 
}