html, body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    overflow: hidden;
}

.nav {
    position:fixed;
    right:0;
    backdrop-filter: blur(10px);
}

.nav::before {
    content: '';
    background: rgba(0,3,3,.25);
    display:block;
    position:fixed;
    top:-8em;
    right:-8em;
    width:16em;
    height:16em;
    transform:rotateZ(45deg);
}

.video-container {
    overflow: hidden;   
    background-color: #e4eee9;
    background-image: linear-gradient(315deg, #e4eee9 0%, #93a5ce 74%);    
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

.video-foreground {
    position: absolute;    
    top: 0; right: 0; bottom: 0; left: 0;        
}
.video-foreground > *{ 
    backdrop-filter: blur(10px);
}
#embedIframe {        
    width: 100%;
    height: 100%;
    pointer-events: none;    
    #clip-path: circle(13.7% at 36% 55%);
    #transition: clip-path 1s ease;
}