body, html {
height: 100%;
background-color: #800000;
margin: 0;
padding: 0;
}

/* The hero image */
#banner-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: url("imgs/background2.png");

/* Set a specific height */
height: 100;

/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

/* Place text in the middle of the image */
#banner-text {
color: rgb(0, 255, 0);
font-size: xx-large;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #aa0000;
text-align: center;
}

li {
background-color: #cc0000;
}

ul li {
/*float: left;*/
display: inline-block;
margin: 3px;
}

ul li a {
display: inline-block;
color: white;
text-align: center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
padding: 14px 16px;
text-decoration: none;
}

ul li a:hover {
background-color: #800000;
}

ul li a.active {
background-color: #ff0000;
}

.main-text {
font-family: Arial, Helvetica, sans-serif;
color: white;
margin: 5px;
}

#music-div {
position: relative;
width: 100%;
display: flex;
justify-content: center;
padding: 10px 0;
margin-top: auto;
background-color: #aa0000;
}

.content {
width: 768px;
height: 100%;
min-height: 100vh;
margin: 0 auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
background-color: #cc0000;
}

#navbar-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}

#navbar-img img {
height: 50px;
vertical-align: middle;
cursor: pointer;
}

#navbar-img a {
pointer-events: auto;
display: inline-block;
}

#navbar-container {
position: relative; 
width: 100%;
}

#shared-footer {
  margin-top: auto;
  width: 100%;
}

.video-div {
background-color: #800000;
padding: 10px;
padding-top: 0px;
margin: 10px auto;
width: max-content;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.video-div h2 {
background-color: #cc0000;
padding: 20px;
margin: 10px 0px;
width: 100%;
box-sizing: border-box;
}

::cue {
background-color: transparent;
color: white;
font-size: large;
}