.navbar {
  display: flex;
  justify-content: center;
  align-items: stretch; /* makes children fill full navbar height */
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 1000; /* ensures nothing overlaps it */
}

.navbar a {
  display: flex; /* makes link a flex container */
  align-items: center; /* centers text inside link vertically */
  padding: 0 16px; /* horizontal padding */
  height: 100%; /* clickable & hover area fills navbar height */
  color: #f2f2f2;
  text-decoration: none;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

/* Main content */
.main {
  margin-top: 50px; /* Add a top margin to avoid content overlay */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
  padding-bottom: 40px; /* adjust to match footer height */
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  opacity: 1; /* keep background video solid */
  z-index: -2;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5); /* white overlay */
  z-index: -1;
}

.largeLogo img {
  position: relative;
  z-index: 1; /* bring image above overlay */
  opacity: 0.7; /* semi-transparent image */
}

.content {
  #position: relative;
  bottom: 1;
  background: rgba(255, 255, 255, 0);
  color: #000000;
  width: 100%;
  padding: 20px;
}

#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}

.footer {
  background-color: #333; /* same as navbar */
  color: #fff; /* white text */
  text-align: right; /* aligns text to the right */
  padding: 10px 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 14px;
}

@media (max-width: 600px) {
  .footer {
    padding: 6px 12px;
    font-size: 12px;
  }
}