@font-face { font-family: 'Gotham'; src: url('../fonts/Gotham-Book.woff2') format('woff2'), url('../fonts/Gotham-Book.woff') format('woff'), url('../fonts/Gotham-Book.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } * { box-sizing: border-box; } /* Black lives on only. It propagates to the canvas and paints beneath everything, so it is a fallback while the video loads. Putting it on too would paint over the video, which sits at z-index: -9999. */ html { background-color: #000; } html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; color: #fff; font-family: 'Gotham', "Helvetica Neue", Helvetica, Arial, sans-serif; } /******************* ** Video Background *******************/ video { margin: 0; padding: 0; position: fixed; top: 0; left: 0; z-index: -9999; width: 100vw; height: 100vh; height: 100dvh; object-fit: cover; object-position: center center; } /*Header ========*/ header { padding: 0 15px; text-align: right; } .logo h2 { font-size: 33px; font-weight: 500; margin: 20px 0 10px; } .logo img { max-width: 160px; width: 100%; height: auto; } /*Footer ========*/ footer { position: fixed; right: 0; bottom: 0; padding: 0 15px; text-align: right; } .copyright p { color: black; font-size: 22px; margin: 0 0 10px; } .copyright p a { font-size: 22px; color: rgba(43, 230, 242, 1); text-decoration: none; } /*Small screens ===============*/ @media (max-width: 767px) { .logo h2 { font-size: 22px; } .logo img { max-width: 120px; } .copyright p, .copyright p a { font-size: 18px; } }