* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 1vw;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

.header {
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  padding: 20px;
}

/*floating image*/
.spacer {
    height: 0px;
    width: 0px;
    float: right;
}
.logo {
    width: 30%;
    height: auto;
    /*height: 200px;*/
    float: right;
    clear: right;
}

/*MENU*/
.menu {
  position: absolute;
  bottom: 20px;
  /*width: calc(100% - 450px);*/
  width: 65%;
  
  max-height: 50px;
  
  font-family: Courier, Arial, Helvetica, sans-serif;
  font-size: calc(14px + 0.9vw);
  
  border:0px solid black;
}



@media (max-width: 800px) {
  .menu {
    position: absolute;
    top: 20px;
    /*width: calc(100% - 450px);*/
    width: 60%;

    /*max-height: 50px;*/

    font-family: Courier, Arial, Helvetica, sans-serif;
    font-size: calc(14px + 1.5vw);

    border:0px solid black;
   
  }
  
  .menuItem {
    display: block;
    white-space: nowrap;
  }

  .menuSpacer {
    display: none; 
  }
}

a:link {
  color: white;
  text-decoration: none;
}

a:visited {
  color: white;
  text-decoration: none;
}
a:hover {
  color: white;
  text-decoration: underline;
}

.contentBox {
  position: fixed;
  width: 75%;
  left: 50%;
  margin-left: -37.5%;
  top: 150px;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  padding: 20px;
  z-index:300000;
  color: white;
  height: calc(100% - 300px);
  overflow:auto;
  font-family: Courier, Arial, Helvetica, sans-serif;
  font-size: calc(12px + 0.7vw);
}

.responsiveImage {
  max-width: 100%;
  height: auto;
}

.footer {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  font-family: Courier, Arial, Helvetica, sans-serif;
  font-size: calc(14px + 1vw);
}