@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Allan&family=Rammetto+One&display=swap");
body {
  font-family: "Rammetto One", cursive;
  text-transform: uppercase;
  overflow-x: hidden;
  background-color: #000000;
}

h1 {
  color: #ffffff;
}
button {
  border: none;
  background-color: #9370db;
  border-radius: 2px;
  height: 2em;
  color: #ffffff;
  text-transform: uppercase;
}
/* video styles */
video {
  /* width: 100vw; */
  height: 100vh;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 50vw;
  /*margin-left: 50vw;*/
  transform: translate(-50vw);
}

.header {
  position: relative;
  height: 100vh;
  text-align: center;
  justify-content: center;
}

#audio-control {
  cursor:pointer;
  padding: 20px 40px;
  background:#000;
  color: #fff;
  border-radius: 4px;
  display: inline-block;
}

/* In case you want to disable the video 
@media screen and (max-width: 400px) {
  html {
    background: url("https://images.unsplash.com/photo-1620222071550-a5c7f8b600ed?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMDY4NDIyNA&ixlib=rb-1.2.1&q=80&w=400");
    background-size: cover;
  }
  .video-container {
    display: none;
  }
}