// 
// Global
// 

html {
    height: 100%;
}

body {
    height: 100%;
    position: relative;

    // Overlay for the body element
    //
    // This overlay will add a colored transparent overlay
    // to the background video

    &:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: $primary;
        opacity: 0.7;
        z-index: 1;
    }
}

// Styling for the background video element

video.bg-video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 0;
}

// Mobile fallback for touch screen devices which typically
// do not load HTML video

@media (pointer: coarse) and (hover: none) {
    body {
        background: url('../assets/img/bg-mobile-fallback.jpg') $primary no-repeat center center scroll;
        background-size: cover;
    }

    body video {
        display: none;
    }
}