body {
  background-color: lightblue;
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  justify-content: center; /* Center vertically */
  align-items: center; /* Center horizontally */
  min-height: 100vh; /* Ensure body takes up full viewport height */
  margin: 0; /* Remove default body margins */
}
section {
  width: 100%;
}

header {
  background-color: #92338b;
  width: 100%;
  display: flex;
  justify-content: space-around; /* Center vertically */
  align-items: center; /* Center horizontally */
}

header h1 {
  color: #fff;
}

.divLogo {
  display: flex;
  justify-content: center; /* Center vertically */
  align-items: center; /* Center horizontally */
  background-color: #fff;
  border-radius: 100%;
  margin: 10px;
}

.logo {
  margin: 10px;
  width: 50px; /* Adjust width as needed */
  height: auto; /* Maintain aspect ratio */
}

#sectionLogin {
  display: flex;
  flex-direction: column; /* Arrange elements vertically */
  align-items: center; /* Center horizontally */
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

button:hover {
  background-color: #0056b3;
  color: #fff;
}

/* CSS for styling */
.header-container {
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center logo and title */
  /* Add any other container styling you need (e.g., margin, padding) */
}

.container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 350px;
  padding: 20px;
}

.tabButtons {
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}

.tabButton {
  padding: 10px 15px;
  border: none;
  background-color: transparent;
  color: black;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.tabButton.active {
  background-color: #007bff;
  color: white;
}

.tabContent {
  display: none;
}

.tabContent.active {
  display: block;
}

#btnLogout {
  display: none;
}

#btnLogout.active {
  display: block;
}

#sectionLogin {
  display: none;
}

#sectionLogin.active {
  display: flex;
}

#sectionUploads {
  display: none;
}

#sectionUploads.active {
  display: block;
}

.upload {
  display: flex;
  flex-direction: column; /* Arrange elements vertically */
  align-items: center; /* Center horizontally */
  padding: 20px;
  border: 2px dashed #ccc; /* Dashed border for visual appeal */
  border-radius: 10px; /* Rounded corners */
  width: fit-content; /* Adjust as needed */
  margin: 20px auto; /* Center the upload area on the page */
}

.upload h2 {
  margin-bottom: 10px;
}

.upload p {
  margin-bottom: 20px;
  text-align: center; /* Center the text */
}

.upload form {
  display: flex;
  flex-direction: column; /* Stack form elements */
  align-items: stretch; /* Make input and button stretch to fill width */
  width: 100%; /* Ensure form takes full width of container */
}

#fileInput {
  width: 100%; /* Make the input fill the container width */
  padding: 150px 0; /* Add top/bottom padding to make the area bigger */
  border: 2px dashed #ccc; /* Optional: Add border to the input area */
  border-radius: 5px;
  background-color: gray; /* Light background color */
  text-align: center; /* Center the file name or placeholder text */
  cursor: pointer; /* Make it look clickable */
  position: relative; /* For positioning the label */
  overflow: hidden; /* Hide the file input's overflow */
}

.upload input[type="name"] {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.upload button[type="submit"] {
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.upload button[type="submit"]:hover {
  background-color: #45a049;
}

#display {
  display: flex;
  align-items: center;
  flex-direction: column;
}

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

#gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.media_container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: auto;
  min-height: 60px;
  height: auto;
  margin: 5px 10px 5px 10px;
  border: 1px solid #ccc;
  background-color: lightgray;
  border-radius: 5px;
}
.media_container p {
  margin: auto;
}

.media-info {
  width: fit-content;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.1);
  min-width: 100px;
  max-width: 400px; /* Set a fixed width */
  word-break: break-all;
}

.media-info form {
  display: flex;
  flex-direction: row;
}

.media-info form.inactive {
  display: none;
}

.media-element {
  width: 150px;
  height: 100%;
  object-fit: cover;
}

.media-element-div {
  height: 60px;
}

.media-buttons {
  display: flex;
  width: auto;
  align-items: center;
}

.media-button {
  width: 35px;
  height: 35px;
  padding: 0;
  margin: 2px;
}

.icon {
  object-fit: contain;
}

#renameForm {
  display: flex;
  flex-direction: row;
}

@media (max-width: 500px) {
  .media_container {
    width: auto;
    height: auto;
    margin: 5px 10px 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .media-element {
    width: 150px;
    height: 65px;
  }
}

.btnEdit {
}

.btnDelete {
  background-color: red;
}