section.home {
  justify-content: center;
  cursor: crosshair;
  z-index: 5;
  position: relative;
  height: 100vh;
}

section.home::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50px;
  z-index: 1;
  bottom: 0;
}

#bg-video {
  width: 100%;
  max-height: 90vh;
  animation: blur 0 18s ease infinite;
}

.audio-controls {
  position: absolute;
  bottom: 0px;
  left: 30px;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;

  width: fit-content;
}

#audio-player {
  display: none;
}

.volume-slider {
  width: 80px;
  cursor: pointer;
}

.audio-btn {
  background: none;
}

.audio-btn img {
  filter: invert(1);
  width: 40px;
  height: auto;
}

#mute-btn,
#play-btn {
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

@media screen and (min-width: 950px) {
}

@media screen and (min-height: 600px) {
  section.home::after {
    height: 100px;
  }

  .audio-controls {
    position: absolute;
    bottom: 20px;
    left: 15%;
    padding: 10px;
  }
}

@keyframes blur {
  start {
    filter: blur(7px);
    transform: scale(0.8);
  }
  20% {
    filter: blur(0px), invert(1);
    transform: scaleZ(1.2);
  }
  end {
    filter: invert(1);
  }
}