/* Base */
* { margin:0; padding:0; box-sizing:border-box; font-family:Arial,sans-serif; }
body { background:#050510; color:white; overflow-x:hidden; scroll-behavior:smooth; }

header { display:flex; justify-content:space-between; align-items:center; padding:20px 40px; position:fixed; width:100%; top:0; background:rgba(0,0,0,0.4); backdrop-filter:blur(6px); z-index:10; }

.logo { font-size:2.8rem; color:white; text-shadow:0 0 10px white,0 0 20px #8a7cff,0 0 30px #6b5cff; animation:sparkle 3s infinite alternate; }

nav a { margin:0 15px; text-decoration:none; color:white; font-size:1.1rem; }
nav a:hover { color:#8a7cff; }

.top-controls { display:flex; align-items:center; position:relative; }
#darkToggle, #settingsBtn { background:none; border:none; color:white; font-size:20px; cursor:pointer; margin-left:10px; }

.settings-menu {
  position:absolute; top:35px; right:0; width:250px; background:rgba(0,0,0,0.9); backdrop-filter:blur(6px); border-radius:10px; padding:15px; display:none; flex-direction:column; z-index:20;
}
.settings-menu h3 { margin-bottom:10px; font-size:1.2rem; text-align:center; }
.settings-menu input, .settings-menu select, .settings-menu button { width:100%; margin-bottom:10px; padding:6px; border-radius:6px; border:none; }
.settings-menu label { font-size:0.9rem; margin-bottom:4px; display:block; color:#ddd; }
.settings-menu button { background:#8a7cff; color:white; cursor:pointer; }

section { padding:120px 40px; min-height:100vh; }
.hero { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.hero h2 { font-size:3rem; margin-bottom:10px; }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:25px; margin-top:30px; }

.card { background:rgba(255,255,255,0.05); padding:25px; border-radius:10px; backdrop-filter:blur(6px); transition:0.3s; position:relative; cursor:pointer; }
.card:hover { transform:translateY(-5px); background:rgba(255,255,255,0.1); }

a.card { text-decoration:none; color:inherit; display:block; }
a.card:hover { transform:translateY(-5px); background:rgba(255,255,255,0.1); }

footer { text-align:center; padding:40px; opacity:0.7; }

/* Light mode */
.light { background:white; color:black; }

/* Stars */
#stars { position:fixed; top:0; left:0; width:100%; height:100%; background:transparent; z-index:-1; }
@keyframes sparkle { 0%{text-shadow:0 0 10px white;} 100%{text-shadow:0 0 30px #9b8cff;} }
.star { position:absolute; background:white; border-radius:50%; opacity:0.8; animation:twinkleStar 3s infinite alternate; }
@keyframes twinkleStar { 0%{opacity:0.2;transform:scale(0.5);}50%{opacity:1;transform:scale(1.2);}100%{opacity:0.2;transform:scale(0.5);} }

/* About section */
.about-content {
  max-width: 900px;
  margin: 100px auto 60px;
  padding: 30px 20px;
  background: rgba(255,255,255,0.05);
  border-radius: 15px;
  backdrop-filter: blur(6px);
  line-height: 1.7;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  animation: fadeIn 1.5s ease-out;
}

.about-content h1 {
  font-size: 2.2em;
  margin-bottom: 0.6em;
  color: #8a7cff;
  text-shadow: 0 0 10px #8a7cff, 0 0 20px #6b5cff;
}

.about-content p {
  font-size: 1.1em;
  margin-bottom: 1em;
}

.about-list {
  list-style: none;
  padding-left: 0;
}

.about-list li {
  margin-bottom: 1em;
  font-size: 1.1em;
}

.about-list li strong {
  color: #ff79c6;
}

@keyframes fadeIn {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}
/* Dropdown styling */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  padding: 0.5rem;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--bg-color, #111); /* adapt to your theme */
  min-width: 180px;
  z-index: 100;
  flex-direction: column;
}

.dropdown-content a {
  display: block;
  padding: 0.5rem 1rem;
  color: white;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: var(--accent-color, #333);
}

.dropdown:hover .dropdown-content {
  display: flex;
  flex-direction: column;
}
/* Main dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font: inherit;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #111;
  min-width: 150px;
  z-index: 1000;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Nested dropdown */
.nested-dropdown {
  position: relative;
}

.nested-dropbtn {
  background: none;
  border: none;
  color: white;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  padding: 5px 10px;
}

.nested-dropdown-content {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: #222;
  min-width: 200px;
}

.nested-dropdown:hover .nested-dropdown-content {
  display: block;
}

/* Links inside dropdown */
.dropdown-content a,
.nested-dropdown-content a {
  color: white;
  padding: 8px 12px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover,
.nested-dropdown-content a:hover {
  background-color: #444;
}