.video-looper{position:relative;transition:opacity var(--video-fadetime)}.video-looper video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.video-looper video.hiding{opacity:0;transition:opacity var(--video-fadetime)}:root{font-family:Monaco,monospace;line-height:1.5;font-weight:500;color-scheme:light dark;color:#dee;background-color:#322}body{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:320px;min-height:90vh}a{color:orange}h1,p{margin:0}h1{margin-block-end:.5em}main{margin:5em 0 0;position:relative;width:500px;height:300px}main>div{position:absolute;width:100%;height:100%}.video-looper{border-radius:4px;overflow:hidden;box-shadow:0 0 60px #fff4}