html, body {
        margin: 0;
        padding: 0;
        height: 100%; /* gives room to scroll */
        width: 100%;
        color: #ffffff;
}

/* Fullscreen video container */
.video-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        transition: filter 0.2s ease-out;
        z-index: -1;                
}

.video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter:brightness(70%);  /* video effect control */
}

/* Example content so you can scroll */
.content {
        position: relative;
        z-index: 10;
        padding: 40px;
        color: white;
        font-size: 2rem;
}

.fade-overlay {
    position: absolute;
    top: 0;
    left: 0;
    left:0;
    right:0;
    width: 100%;
    height: 100%;
 /*   background: black;   /* black */
 /*   background: #001a33; /* deep blue */
    background-color: #191919; /* Dark Grey */
 /*   background: #f3f4f5; /* Off White */
    opacity: 0;           /* starts invisible */
    transition: opacity 0.3s ease-out;
}