header { position: relative; background-color: black; height: 55vh; min-height: 25rem; width: 100%; overflow: hidden; } header video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-40%); } header .container { position: relative; z-index: 2; } header .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #000078; opacity: 0.5; z-index: 1; border-bottom: solid; border-bottom-color: white; } @media (pointer: coarse) and (hover: none) { header { background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll; } header video { display: none; } } body { background-image: url(/static/assets/images/background.png); background-repeat: all; background-size: 40%; } @font-face { font-family: 'Hoxton'; src: url(/static/assets/fonts/WHHoxtonWeb-Regular.ttf); } .hoxton-font { font-family: Hoxton; color: white; } hr { border-top: 1px solid rgb(255, 255, 255) !important; } div.container-fluid { padding-top: 10px; } .display-5 { font-size: 2.5rem !important; font-weight: 300 !important; line-height: 1.2; } h4#first-favourite { animation-delay: 2s; animation-iteration-count: infinite; animation-duration: 3s; } .font-gold { color: gold; }