/* Hacker Grayscale Theme with Orange Borders */
body {
  background: #111111 url('/CyberMerlin/assets/img/sci-fi-laboratory-tunnel-3d-model-obj-fbx-blend-abc.jpg') no-repeat center center fixed;
  background-size: 100% 100%; /* Stretch effect */
  color: #eee;
  font-family: 'Google Sans',Arial,sans-serif;
  margin: 0;
  padding: 0;
  padding-top: 80px; /* Space for fixed header */
  padding-bottom: 60px; /* Space for fixed footer */
  min-height: 100vh;
}

/* Fixed Header */
.page-header {
  height: 212px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(17, 17, 17, 0.9);
  border-bottom: 1px solid #aaa;
  padding: 1rem;
  z-index: 1000;
  margin-bottom: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}
.page-header input {
  width: 15%;
  right: 2rem;
  display: inline-block;
  position: absolute;
}
.page-header p {
  margin: 0;
  display: inline;
  margin-left: 3rem;
}
h1.project-name {
  margin-top: 0;
  display: inline;
}
h2.project-name {
  margin-left: 1rem;
}
.project-tagline {
  margin-left: 2rem;
}

/* Sidebar Container */
.sidebar {
  width: 250px;
  font-family: 'Courier New', monospace;
  border-right: 1px solid #aaa;
  padding: 1rem;
  height: calc(100vh - 325px); /* Adjust for header and footer */
  overflow-y: auto;
  background: rgba(34, 34, 34, 0.9); /* Semi-transparent for glass effect */
  position: fixed;
  top: 245px;
  left: 0;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.8); /* Shadow at right side */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}

/* Folder/Category Header */
.sidebar-folder {
  cursor: pointer;
  font-weight: 600;
  padding: 8px;
  display: block;
  border-radius: 6px;
  color: #ffffff;
  user-select: none;
  background-color: #333333; /* Medium gray */
  border: 1px solid #FFA500;
}

.sidebar-folder:hover {
  background-color: #444444; /* Lighter gray */
}

/* Arrow indicator */
.sidebar-folder::before {
  content: '▸';
  display: inline-block;
  width: 1.2em;
  transition: transform 0.2s;
  color: #ffffff;
}

.sidebar-folder.active::before {
  transform: rotate(90deg);
}

/* Sub-links (The Files) */
.sidebar-list {
  list-style: none;
  padding-left: 20px;
  display: none; /* Hidden by default */
  margin: 4px 0;
}

.sidebar-folder.active + .sidebar-list {
  display: block;
}

.sidebar-list li a {
  text-decoration: none;
  color: #cccccc; /* Light gray */
  font-size: 14px;
  display: block;
  padding: 4px 8px;
  border-radius: 4px;
}

.sidebar-list li a:hover {
  background-color: #444444;
  color: #ffffff;
}

/* Container for sidebar and main */
.container {
  display: flex;
  margin-left: 270px; /* Account for fixed sidebar */
  margin-top: 260px;
}

.main-content {
  flex: 1;
  padding: 1rem;
  background-color: #111111;
  background: rgba(17, 17, 17, 0.97);
  margin-left: 2rem;
  margin-right: 1rem;
  color: #eee;
  border: 1px solid #FFA500;
}

/* Fixed Footer */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 1rem;
  font-size: 14px;
  color: #cccccc;
  background: rgba(17, 17, 17, 0.9); /* Semi-transparent for glass effect */
  border-top: 1px solid #aaa;
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}

.site-footer a {
  color: #ffffff;
}

details {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(17, 17, 17, 0.8); /* Semi-transparent for glass effect */
  border: 2px solid #FFA500; /* Orange border */
  border-radius: 4px;
  color: #eee;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}

h1, h2, h3, h4, h5, h6 {
  color: #ccc;
}

a:hover {
  border-bottom: 2px solid #FFA500;
}
a, a:-webkit-any-link {
  color: #99c3ff; /* Light blue for links */
}

code {
  background-color: #004700;
  color: #ffffff;
  padding: 2px 4px;
  border-radius: 3px;
}

pre, input {
  background-color: #111111;
  color: #ffffff;
  padding: 1rem;
  border: 2px solid #FFA500; /* Orange border */
  border-radius: 4px;
  overflow-x: auto;
}
pre code {
  background: none;
}

li {
  margin-left: 1rem;
}

table {
  border-collapse: collapse;
  border: 1px solid #ccc;
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #333333;
  color: #ffffff;
}

.recent-updates {
  width: 45%;
  margin: 0 auto 0 auto;
  background: rgba(255, 165, 0, 0.3); /* Semi-transparent orange */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  padding: 1rem;
  border-radius: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid rgba(255, 165, 0, 0.5);
}
#recent-updates {
  width: 45%;
  margin: 3rem auto 0 auto;
  padding: 1rem;
  background: linear-gradient(to bottom, transparent, #FFA500);
}