div not displaying in nextjs project

I have a very basic NextJS app that has a fullscreen video playing and some text overlaid on it.

Here is the index.js:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import React, { useState, useRef } from "react";
import dynamic from "next/dynamic";

// https://docs.referlist.co/#/?id=install-in-react-or-nextjs-via-npm

export default function Home() {
  const Referlist = dynamic(
    () =>
      import("referlist").then((referlist) =>
        referlist.initialize({ domain: "tokenchamplaunch" })
      ),
    { ssr: false }
  );
  return (
    <div className={styles.container}>
      <Head>
        <title>TokenChamp</title>
        <meta name="description" content="Casual web3 games" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

    <div className="bg-video-wrap">
    <video autoPlay muted loop className={styles.video}>         
      <source src={`/CABINETS_BG.mp4`} type="video/mp4"/>       
    </video>
    <div className="overlay">
    </div>
    <h1>Join the waitlist
    </h1>
    <div className="waitlist">
          <Referlist />
          <div>
            <input type="text" id="referlistemail" />
            <input className="waitlistbutton" type="button" id="referlistbutton" value="LFG" />
          </div>
        </div>
  </div>
    </div>
  )
}

Here is the global.css:

html,
body {
  background-image: url(/bg.png);
  padding: 0;
  margin: 0;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

.bg-video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: url(https://designsupply-web.com/samplecontent/vender/codepen/20181014.png) no-repeat center center/cover;
}
video {
  min-width: 100%;
  min-height: 100vh;
  z-index: 1;
}
.overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  /* background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%); */
  background-size: 3px 3px;
  z-index: 2;
}
h1 {
  text-align: center;
  color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  max-width: 400px;
  width: 100%;
  height: 50px;
}

.waitlistbutton {
  background-color: gold;
  padding: 1.3em 3em 1.3em 3em;
  border-radius: 5px;
  margin-left: 1em;
}

input[type=text] {
  border: 2px solid white;
  border-radius: 4px;
  background-color: black;
  color: white;
  padding: 1em;
  font-size: 1em;
}

input[type=text]:focus {
  border: 2px solid white;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
  width: 100%; 
  /* remove the above to offset the animation */
}

The waitlist input fields are not visible and I don't understand why. The h1 text is visible, but the waitlist/input fields are not.

When I have tried nesting the waitlist div in other places, it's always either stuck at the absolute top of the page or it completely disappears.