* {
  box-sizing: border-box;
  font-weight: normal;
}

body {
  color: #555;
  background: #222;
  text-align: center;
  font-family: "Roboto Mono";
  padding: 1em;
}

h1 {
  font-size: 2.2em;
}

/* base */
.flip {
  position: relative;
}
.flip > .front,
.flip > .back {
  display: block;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 0.5s;
  transition-property: transform, opacity;
}
.flip > .front {
  transform: rotateY(0deg);

}
.flip > .front h1 {
  font-size: 2.2em;
  text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5); /* Add text shadow */
}
.flip > .back {
  position: absolute;
  opacity: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg);
}
.flip:hover > .front {
  transform: rotateY(180deg);
}
.flip:hover > .back {
  opacity: 1;
  transform: rotateY(0deg);
}
.flip.flip-vertical > .back {
  transform: rotateX(-180deg);
}
.flip.flip-vertical:hover > .front {
  transform: rotateX(180deg);
}
.flip.flip-vertical:hover > .back {
  transform: rotateX(0deg);
}

/* custom */
.flip {
  display: inline-block;
  margin-right: 2px;
  margin-bottom: 1em;
  width: 400px;
}

.flip > .front,
.flip > .back {
  display: block;
  color: white;
  width: inherit;
  background-size: cover !important;
  background-position: center !important;
  height: 400px;
  padding: 1em 2em;
  background: #313131;
  border-radius: 10px;
  draggable: true; /* Add draggable attribute here */
}
.flip > .back p {
  font-size: 0.9125rem;
  line-height: 120%;
  color: #999;
}

.text-shadow {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04),
    3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04),
    0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04),
    7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04),
    9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04),
    11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04),
    13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04),
    0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04),
    17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04),
    19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Button to open the modal */
#addButtonWrapper {
  text-align: center;
}
#addButton {
  width: 200px; /* Same width as the cards */
  height: 120px; /* Same height as the cards */
  font-size: 2.2em; /* Same font size as the card title */
  background-color: #BDB76B;
  border-radius: 10px;
  color: white;
}

#addButton:hover {
    background-color: #45a049;
}

#addButton:active {
    background-color: #F0FFF0;
}

.addButton {
    width: 200px; /* Same width as the cards */
    height: 120px; /* Same height as the cards */
    font-size: 2.2em; /* Same font size as the card title */
    background-color: #6495ED;
    border-radius: 10px;
    color: white;
}

.addButton:hover {
    background-color: #45a049;
}

.addButton:active {
    background-color: #3e8e41;
}

.flip > .back a {
  color: #007bff; /* Soft blue color */
  text-decoration: none; /* Remove default underline */
  transition: color 0.3s; /* Smooth transition for color change */
}

.flip > .back a:hover {
  color: #0056b3; /* Darker blue color on hover */
}
/* Add this CSS for the garbage and modify icons on the back of the card */
.card-icons {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px; /* Adjust the gap to control the spacing between icons */
}

.garbage-icon,
.modify-icon {
  width: 25px;
  height: 25px;
  background-size: cover;
  cursor: pointer;
}
.plus-icon {
  width: 25px;
  height: 25px;
  background-size: cover;
  cursor: pointer;
}

/* ... */

.document-icons-container {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}

.document-icon {
  display: inline-block;
  margin-right: 5px;
  cursor: pointer;
  position: relative;
}

.document-tooltip {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.document-icon:hover .document-tooltip {
  opacity: 1;
}

/* ... */

.garbage-icon {
  background-image: url('garbage.jpg');
  margin-right: 5px;
}

.modify-icon {
  background-image: url('modify.jpg');
}
.plus-icon {
  background-image: url('plus.jpg');
}
/* Add this CSS for the image container and images */
.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 20px;
}

.image-container img {
  width: 60px; /* Adjust the width of each image */
  max-height: 40px;
  margin-right: 5px; /* Adjust the spacing between images */
  margin-bottom: 5px; /* Adjust the spacing between rows of images */
}

/* Directory Card */
.flip.directory-card {
  width: 200px;
  height: 160px;
  perspective: 1000px;
}

.flip.directory-card > .front,
.flip.directory-card > .back {
  width: 200px;
  height: 160px;
  padding: 10px;
  background-color: #b0c4de; /* Folder color */
  border-radius: 5px;
  box-shadow: 0 4px 8px rgb(238,232,170);
  transition: transform 0.8s;
  transform-style: preserve-3d;
  position: relative;
  backface-visibility: hidden;
}

.flip.directory-card > .front {
  transform: rotateY(0deg);
}

.flip.directory-card > .back {
  transform: rotateY(-180deg);
  position: absolute;
  top: 0;
  left: 0;
}

.flip.directory-card:hover > .front {
  transform: rotateY(180deg);
}

.flip.directory-card:hover > .back {
  transform: rotateY(0deg);
}

.flip.directory-card > .front h1 {
  font-size: 1.6em;
  margin-top: 30px;
  text-shadow: none;
}

.flip.directory-card > .back h2 {
  font-size: 1.4em;
  margin-top: 20px;
}

.flip.directory-card > .back .card-icons {
  top: 10px;
  right: 10px;
}

.flip.directory-card > .back .garbage-icon,
.flip.directory-card > .back .modify-icon {
  width: 20px;
  height: 20px;
}

.flip.directory-card > .back .image-container {
  margin-top: 20px;
}

.flip.directory-card > .back .image-container img {
  width: 40px;
  max-height: 30px;
  margin-right: 5px;
  margin-bottom: 5px;
}

/* Folder Tab */
.flip.directory-card > .front::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 20px;
  background-color: #b0c4de;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}