.stop-button {
    background-color: red;
    color: white;
    border: none;
    padding: 20px 40px; /* Adjust size */
    font-size: 36px; /* Bigger font */
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s ease;
  }
  .stop-button:hover {
    background-color: darkred;
    transform: scale(1.1); /* Slight enlargement */
  }

  .volume-container {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #volume-slider {
    width: 200px;
  }


  .video-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 20%;  /* Adjust the width to take up the left half of the screen */
    height: 100vh; /* Make it take the full height of the viewport */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Video Styles */
  #my-video {
    width: 100%;  /* Makes the video take the full width of the container */
    height: auto;  /* Maintains the aspect ratio */
  }

  .top-right-image {
    position: absolute;
    top: 10px;      /* Adjust the distance from the top */
    right: 10px;    /* Adjust the distance from the right */
    width: 100px;    /* Set the width to make the image small */
    height: auto;   /* Maintain the aspect ratio */
    border-radius: 10px;  /* Optional: Adds rounded corners */
  }