h1{
  text-align: center;
}
h2{
  text-align: center;
}
#media-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-evenly;
}


footer {
  background-color: #f5f5f5;
  padding: 20px;
}

#downloaded-files {
  display: flex;
    list-style-type: none;
    padding: 0;
    flex-direction: row;
    
    flex-wrap: wrap;
}

.downloaded-files-row {

  margin-bottom: 10px;
}

.downloaded-item {
  margin-right: 10px;
}

.delete-button {
  display: block;
  margin-top: 5px;
}

/* Reduce the size of the displayed media */

.media-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.media-row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
video {
  width:200px;
  margin: 10px;
}

button {
  display: block;
  margin-top: 5px;
}

.progress-bar {
  width: 50%;
  height: 20px;
}

/* Container for the progress bar */
.progress-container {
  position: fixed;
  /* Fixed position to keep it in the viewport */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  /* Use flexbox for centering */
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  z-index: 1000;
  /* High z-index to ensure it's above other content */
  background-color: rgba(255, 255, 255, 0.9);
  /* Optional: background to make progress bar visible on any underlying content */
}

.progress-bar::-webkit-progress-bar {
  background-color: #f5f5f5;
}

.progress-bar::-webkit-progress-value {
  background-color: #007bff;
}

.progress-bar::-moz-progress-bar {
  background-color: #007bff;
}

/* Style for the progress text, if you have one */
.progress-text {
  text-align: center;
  display: block;
  /* Make it a block to fill the container */
  color: #000;
}