body {
  min-height: 100vh;
  background-color: #282c34;
  color: #B9B8D6;
}

.Header {
  display: flex;
  flex-direction: row;

  padding: 1em;
}

.Contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: pre-wrap;
}

.GalleryItem {
  display: flex;
  flex-direction: column;
  text-align: center;

	background-color: #3B3E49;

  border-radius: 10px 10px 0px 0px;
  margin: 0 0 1em 0;
  padding: 0em;
  max-width: calc(100vw - 2em);
}

.GalleryItem > a {
  color: inherit;

  margin: 0.5em;
  overflow: clip;
}

.GalleryItem > img,
.GalleryItem > video {
  object-fit: contain;
  max-height: 80vh;
}

.DirectoryItem > button {
	background-color: #44655D;
  color: #B9B8D6;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none; /* No underline for text */
  display: inline-block;
  font-size: 16px;
  margin: 0px 4px 0px 0px;
  cursor: pointer;
  border-radius: 10px; /* Slightly rounded corners for a modern feel */
  transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.DirectoryItem > button:hover {
  background-color: #0056b3;
}

.PlaceholderItem {
  animation: loading 1.5s infinite;
}

.PlaceholderItem > button,
.ParentDirectoryItem > button {
	background-color: #4D4F5D;
}

.PlaceholderItem > a {
  height: 1em;
}

.PlaceholderItem > button {
  height: calc(18px + 10px * 2);
  min-width: 4em;
}

@keyframes loading {
  0%, 100% {
    filter: brightness(80%);
  }
  50% {
    filter: brightness(100%);
  }
}