body {
  letter-spacing: 0.0625em;
}

#video_container {
  /*object-fit: cover;*/
  position: absolute;
  z-index: 1;
  top: 120px;
  bottom: 0;
  width: 100%;
  height: 730px;
  /*height: 100%;*/
  overflow: hidden;
  min-height: 300px;
  /*min-height: 35rem;*/
}

#video_cover {
  position: absolute;
  z-index: 21;
  top: 207px;
  left: 0;
  width: 100%;
  height: 730px;
  /*height: 100%;*/
  filter: blur(6px);
  -webkit-filter: blur(6px);
  background: url('https://d0tm0t.github.io/background-video/img/video_cover.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  /*min-height: 35rem;*/
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 100%;*/
  background: rgba(0, 0, 0, 0.5);
  min-height: 300px;
  /*min-height: 35rem;*/
}


/*
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 35rem;
}

h1 {
  font-family: Karla, Aria, sans-serif;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.8rem;
  background: rgba(255, 255, 255, 0.3);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

h2 {
  max-width: 20rem;
  font-size: 1rem;
}*/

/* Style the video container to control its size */
.video-mobile {
  width: 100%; /* Set the width of the container to 100% */
  max-width: 100%; /* Ensure the container does not exceed the screen width */
  overflow: hidden; /* Hide the overflow to clip the video */
  position: relative; /* Set the position to relative for absolute positioning of video */
  /*padding-top: 56.25%; !* Set the aspect ratio (16:9) of the video container *!*/
  height: 270px
}

/* Style the video to position it within the container */
.video-mobile video {
  position: absolute; /* Position the video absolutely */
  top: 0;
  left: 0; /* Adjust the left position to show the left 40% of the video */
  width: 180%; /* Adjust the width to cover the left 40% */
  /*height: 300px; !* Set the height to 100% to maintain the aspect ratio *!*/
}

.cropped-video {
  width: 100%;
  height: 100%;
  /*object-fit: cover; !* Crop and cover the container *!*/
}

@media (min-width: 701px) {
  .video-mobile {
    display: none;
  }
}
@media (max-width: 701px) {
  #video_container {
    display: none;
  }
  #video_cover {
    display: none;
  }
}

.video-background {
  position: absolute;
  width: 100%;
  /*height: 100%;*/
  overflow: hidden;
  height: 730px;
  /*height: 100%;*/
  min-height: 300px;
}

.video-background video {
  position: absolute;
  z-index: 1;
  /*top: 120px;*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}