/* css/style.css */

/* General body styling for dark theme */
body {
    background-color: #121212;
    color: #ffffff;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  /* Video.js player styling */
  .video-js {
    height: 100vh; /* Make the video take up the full viewport height */
    width: 100vw; /* Ensure video takes up full viewport width */
  }
  
  /* Optional: styling the video container */
  #video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    width: 100vw;  /* Full viewport width */ 
  }
  
  /* Ensure video controls are correctly sized and visible */
  .vjs-control-bar {
    font-size: 16px; /* Adjust the font size as needed */
  }
  
  .vjs-control-bar .vjs-button,
  .vjs-control-bar .vjs-slider {
    height: 2.5em; /* Ensure controls are easily clickable */
  }
  
  .vjs-control-bar .vjs-progress-holder,
  .vjs-control-bar .vjs-volume-control {
    width: auto; /* Ensure controls take up available space */
  }
  
  /* Prevent controls from disappearing */
  .vjs-control-bar.vjs-fade-out {
    opacity: 1 !important;
  }