body, html {
  height: 100%;
  margin: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  /*font-family: "Times New Roman", Times, serif;*/
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("Capture.PNG");
  height: 25%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.active {
  /*background-color: #555;*/
   background-color: rgba(0, 0, 0, 0.4)
   
}
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}

.navbar {
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.hero-text button:hover {
  background-color: #555;
  color: white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*overflow: hidden;*/
  /*background-color: #333;*/

}

.hero-text li {
  float: left;
}

.hero-text li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.hero-text li a:hover {
  background-color: #111;
}

.menu  li {
  float: left;
}

.menu  li a {
  display: block;
  color: black;
  /*text-align: center;*/
  /*padding: 14px 16px;*/
  text-decoration: none;
}

.menu  li a:hover {
  /* background-color: #111; */
font-weight: bold
}


.menu ul{
padding-left: 25px;
 background-color: rgba(0, 0, 0, 0);
/*font-weight: bold*/

/* <li><span style= "font-weight: bold">Header</span></li></br></br>  */
}

.menu {
 height: 100%;
  width: 18%;
  float: left;
  padding: 20px;
  /*border: 1px solid red;*/
  
}
.main {
  width: 43%;
  padding-left: 30%;

  /*float: left;*/
  /*height: 100%;*/
  /*padding: 30px;*/
  /*border: 1px solid red;*/
}


#vidframe{
/*justify-content: center;*/
}