style.css

html {
     scroll-behavior: smooth;
}
.navbar{
     z-index: 3;
}
 header {
     position: relative;
     background-color: black;
     height: 75vh;
     min-height: 25rem;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
}
 header video {
     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%);
}
 header .overlay {
     position:absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background-color: black;
     opacity: 0.7;
     z-index: 1;
}
 form {
     z-index:2;
     justify-content: center;
}
/*image is taken from google */
 @media (pointer: coarse) and (hover: none) {
     header {
         background: url('media/vr_bed.jpg') black no-repeat center center scroll;
    }
     header video {
         display: none;
    }
}