body {
  background-color: #323232;
    
}

/* Use a flexible layout for the container */
.container {
    display: flex;
    align-items: center;
  }
  
  /* Use relative units for the image size */
  img.nav_icons {
    max-width: 15%;
    max-height: 15%;
    padding-right: 10px;
  }
  
/* Video Player Styles */

.video-js {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;  /* For a 16:9 aspect ratio */
  background-color: black; /* Background for the video container */
  overflow: hidden;        /* Hide any overflowing elements, like controls */
}
.video-js > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-js .vjs-big-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  border: none;
  display: none;
  cursor: pointer;
}
.video-js.vjs-playing .vjs-big-play-button {
  display: none;
}

/* Hide the progress control (seek bar) */
.video-js .vjs-progress-control {
  display: none;
}

/* Hide the remaining control components except play/pause, fullscreen, and live display */
.video-js .vjs-control:not(.vjs-play-control):not(.vjs-fullscreen-control):not(.vjs-live-control) {
  display: none;
}

/* Style the live display */
.video-js .vjs-live-control {
  color: white;   /* Text color */
  font-size: 14px;
  background-color: rgba(255, 0, 0, 0.7);  /* Slight red background for visibility */
  padding: 5px 10px;  /* Padding around the text */
  border-radius: 3px; /* Rounded corners */
  margin-left: 60%;  /* Push it to the right side of the control bar */
}

/* Hide the poster */
.video-js .vjs-poster {
  display: none;
}

/* Hide the loading spinner */
.video-js .vjs-loading-spinner {
  display: none;
}

/* Remove text for the play and fullscreen buttons */
.video-js .vjs-play-control, .video-js .vjs-fullscreen-control {
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-align: center;
}

/* Ensure that the pseudo-elements (icons) still show */
.video-js .vjs-play-control:before, .video-js .vjs-fullscreen-control:before {
  font-size: 20px; /* Or whatever size you prefer */
  line-height: normal;
  color: white;
}



.video-js .vjs-big-play-button:before {
  content: '\25B6';  /* Play symbol */
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
/* Play button */
.video-js .vjs-play-control {
  position: absolute;
  top: 50%;
  left: 15px;  /* Adjust as needed */
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  margin-right: 20px; /* Space between buttons */
}

.video-js .vjs-play-control:before {
  content: '\25B6';  /* Play symbol */
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

/* Change the button to a pause symbol when the video is playing */
.video-js.vjs-playing .vjs-play-control:before {
  content: '\2590\2590'; /* Pause symbol (two vertical bars) */
  font-size: 20px;
}
/* Fullscreen button */
.video-js .vjs-fullscreen-control {
  position: absolute;
  top: 50%;
  right: 15px;  /* Adjust as needed */
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.video-js .vjs-fullscreen-control:before {
  content: '\26F6';  /* Fullscreen symbol */
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

/* Change the button to a different symbol when in fullscreen mode */
.video-js.vjs-fullscreen .vjs-fullscreen-control:before {
  content: '\24E2'; /* Exit fullscreen symbol (this is just an example, choose an appropriate symbol or use an icon font) */
}

.video-js .vjs-control-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /* Adjust height as needed */
  background-color: rgba(0, 0, 0, 0.7); /* Slight transparency */
  display: none; /* Hidden by default */
  align-items: center;
  padding: 0 10px; /* Some padding on the sides */
  box-sizing: border-box;
}

.video-js:hover .vjs-control-bar {
  display: flex;
}


/* Move the control bar to the top of the player */
#videojs-player .vjs-control-bar {
  bottom: auto;
  top: 0;
}

/* Alternatively, you can move the control bar to the bottom of the player */
/*
#videojs-player .vjs-control-bar {
  top: auto;
  bottom: 0;
}
*/

/* Ensure the control bar remains visible */
#videojs-player .vjs-control-bar {
  opacity: 1;
}

.videocontainer {
width: 100%;
height: auto;
}



/* End Video Player Styles */













  /* Additional button styles */
   button {
    background-color: #007bff; /* Blue background color */
    color: #fff; /* White text color */
    padding: 10px 20px; /* Padding around the button text */
    border: none; /* Remove border */
    cursor: pointer; /* Add pointer cursor on hover */
}
button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.fish_inventory {
  display: flex;
  max-width: 100%;
  color: rgb(255,255,255);
  background-color: rgb(42,42,42);
}

.fish_item {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.fish_image {
  width: 100%;

  
  }

.textbox {
  width: 100%;
  height: 300px;
  overflow: auto;
  border: 1px solid black;
}
.fishcontainer {
display: flex;
flex-direction: column;
max-width: 15%;

}
.fishbutton {
display: flex;
height: 300px;
align-items: center;
justify-content: center;
margin: 1px;
padding-right: 10px;
padding-left: 10px;

}