body {
  margin: 0;
  font-family: Georgia, serif;
  color: #ff4d6d;

  background: url("https://i.pinimg.com/736x/21/59/6c/21596c0ed6247a422385e2f067376d55.jpg");
  background-size: cover;
  background-attachment: fixed;
}

/* DARK OVERLAY */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: -1;
}

/* LAYOUT */
.layout {
  display: flex;
}

/* SIDEBAR */
.sidebar {
  width: 220px;
  padding: 25px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  height: 100vh;
  border-right: 1px solid rgba(255,77,109,0.3);
}

.sidebar a {
  display: block;
  margin: 12px 0;
  color: #ff4d6d;
  text-decoration: none;
  transition: 0.3s;
}

.sidebar a:hover {
  color: white;
  text-shadow: 0 0 8px #ff4d6d;
}

/* MAIN */
.main {
  flex: 1;
  padding: 60px;
  text-align: center;
}

/* TITLE */
h1 {
  font-size: 48px;
  text-shadow: 0 0 15px #ff2e63;
}

/* QUOTE */
.quote {
  font-style: italic;
  opacity: 0.8;
  margin-bottom: 30px;
}

/* CARDS */
.grid {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}

.card {
  padding: 30px;
  width: 200px;
  border-radius: 15px;

  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);

  border: 1px solid rgba(255,77,109,0.3);

  text-decoration: none;
  color: #ff4d6d;

  transition: 0.4s;
}

.card:hover {
  transform: translateY(-8px) scale(1.05);
  background: rgba(255,77,109,0.2);
  box-shadow: 0 0 20px #ff2e63;
  color: white;
}

/* LOCKED */
.locked {
  opacity: 0.4;
}

/* FOLDER STYLE */
.folder, .subfolder {
  margin: 15px auto;
  width: 60%;
  text-align: left;
}

summary {
  cursor: pointer;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,77,109,0.3);
  transition: 0.3s;
}

summary:hover {
  background: rgba(255,77,109,0.2);
  box-shadow: 0 0 10px #ff2e63;
}

.content {
  padding: 15px;
  margin-top: 8px;
  background: rgba(0,0,0,0.4);
  border-left: 2px solid #ff2e63;
  border-radius: 5px;
}