/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ==== Reset & Base Layout ==== */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Roboto, sans-serif;
  background: #0e0e10;
  color: #ffffff;
  min-height: 100vh;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* ==== Animated Gradient Background ==== */
.background-gradient {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top left, #00bfff30, #4b008230);
  z-index: -1;
  animation: gradientShift 15s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ==== Glassmorphism Container ==== */
.glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  padding: 1rem;

  /* Backdrop filter with vendor prefix */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* === Fallback if backdrop-filter is not supported === */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(30, 30, 30, 0.85);
  }
}

/* ==== Title Bar ==== */
.title-bar {
  margin: 2rem auto;
  width: fit-content;
  text-align: center;
  color: #e0e0ff;
  font-size: 1.5rem;
  border-left: 4px solid #7f00ff;
  border-right: 4px solid #00bfff;
}

.divider {
  color: #7f00ff;
}

/* ==== Container Layout ==== */
.container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 2rem;
  max-width: 700px;
  margin: auto;
}

/* ==== Folder Box Styling ==== */
.folder {
  transition: transform 0.2s ease;
}

.folder:hover {
  transform: translateY(-2px);
}

/* ==== Folder Toggle Button ==== */
.folder-toggle {
  background: none;
  border: none;
  color: #00bfff;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.5rem 0;
  width: 100%;
  text-align: left;
  font-weight: bold;
}

.folder-toggle:hover {
  color: #a084e8;
}

/* ==== Folder Content (Dropdown) ==== */
.folder-content {
  display: none;
  margin-top: 0.5rem;
  color: #ccc;
}

.folder-content.visible {
  display: block;
}

.folder-content p {
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  border-left: 2px solid #00bfff60;
}