.lsow-project-image { --angle: 0deg; border: 6px solid; border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1; animation: 10s rotate linear infinite; } @keyframes rotate { to { --angle: 360deg; } } @property --angle { syntax: ''; initial-value: 0deg; inherits: false; } #myVideo { min-width: 100%; min-height: 100%; } /* Add some content at the bottom of the video/page */ .content { position: fixed; bottom: 0; background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; padding: 20px; } /* Style the button used to pause/play the video */ #myBtn { width: 200px; font-size: 18px; padding: 10px; border: none; background: #000; color: #fff; cursor: pointer; } #myBtn:hover { background: #ddd; color: black; } .header-filter { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background-position: center center; background-size: cover; } #myGIF { padding: 0; z-index: 10; width: 100%; margin: 0; display:none; } @media (pointer: coarse) and (hover: none) { #myGIF { display: block; } #myVideo { display: none; } }
en_CAEnglish (Canada)