/* General Styles */
body {
  font-family: 'Arial', sans-serif;
  background-color: #000;
  color: #fff;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

h1, h2, h3 {
  color: #fff; /* White text */
  text-align: center; /* Center-align titles */
  text-shadow: 2px 2px 4px rgba(128, 128, 128, 0.5); /* Subtle grey shadow */
}

a {
  color: #fff; /* White icons */
  text-decoration: none;
}

a:hover {
  color: #00ffff; /* Neon blue on hover */
}

/* Header */
header {
  text-align: center;
  padding: 20px 0;
  background-color: rgba(17, 17, 17, 0.8); /* Semi-transparent black */
  backdrop-filter: blur(10px); /* Frosted glass effect */
  box-shadow: 0 0 10px rgba(128, 128, 128, 0.5); /* Subtle grey shadow */
  position: sticky;
  top: 0;
  z-index: 100; /* Lower z-index than settings icon */
}

/* Settings Icon */
#settings-icon {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 1.5rem;
  color: #00ffff; /* Neon blue */
  cursor: pointer;
  z-index: 1000; /* Higher z-index than header */
}

#settings-icon:hover {
  color: #fff; /* White on hover */
}

/* Settings Sidebar */
#settings-sidebar {
  position: fixed;
  top: 0;
  left: -300px; /* Hidden by default */
  width: 250px;
  height: 100%;
  background-color: #111;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
  transition: left 0.3s ease;
  z-index: 999;
  padding: 20px;
}

#settings-sidebar h3 {
  color: #00ffff; /* Neon blue */
  margin-bottom: 20px;
}

#settings-sidebar ul {
  list-style: none;
  padding: 0;
}

#settings-sidebar ul li {
  margin-bottom: 15px;
}

#settings-sidebar label {
  display: block;
  margin-bottom: 5px;
  color: #fff;
}

#settings-sidebar select, #settings-sidebar button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #222;
  color: #fff;
  cursor: pointer;
}

#settings-sidebar button:hover {
  background-color: #00ffff; /* Neon blue on hover */
  color: #000;
}

/* Show sidebar when active */
#settings-sidebar.active {
  left: 0;
}

/* Light Mode */
body.light-mode {
  background-color: #fff; /* White background */
  color: #000; /* Black text */
}

body.light-mode header,
body.light-mode section,
body.light-mode footer,
body.light-mode .role,
body.light-mode .skills-list li,
body.light-mode #settings-sidebar {
  background-color: #f4f4f4; /* Light grey background for boxes */
  color: #000; /* Black text */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Light Mode - Header */
body.light-mode header {
  background-color: rgba(244, 244, 244, 0.8); /* Semi-transparent light grey */
  backdrop-filter: blur(10px); /* Frosted glass effect */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3 {
  color: #000; /* Black titles */
}

body.light-mode a {
  color: #000; /* Black icons */
}

body.light-mode a:hover {
  color: #00ffff; /* Neon blue on hover */
}

body.light-mode .progress-bar {
  background-color: #ddd; /* Light grey background for progress bars */
}

body.light-mode .progress {
  background-color: #000; /* Black progress bars */
}

body.light-mode .role i,
body.light-mode .skills-list i {
  color: #000; /* Black icons */
}

body.light-mode #settings-icon {
  color: #000; /* Black settings icon */
}

body.light-mode #settings-icon:hover {
  color: #00ffff; /* Neon blue on hover */
}

/* Light Mode - Social Icons */
body.light-mode .icons i.fa-github,
body.light-mode .icons i.fa-tiktok {
  color: #000; /* Black icons */
}

body.light-mode .icons i.fa-github:hover,
body.light-mode .icons i.fa-tiktok:hover {
  color: #00ffff; /* Neon blue on hover */
}

body.light-mode #settings-sidebar {
  background-color: #f4f4f4; /* Light grey background for sidebar */
}

body.light-mode #settings-sidebar h3 {
  color: #000; /* Black sidebar title */
}

body.light-mode #settings-sidebar ul li {
  color: #000; /* Black sidebar text */
}

body.light-mode #settings-sidebar select,
body.light-mode #settings-sidebar button {
  background-color: #ddd; /* Light grey background for buttons */
  color: #000; /* Black text */
}

body.light-mode #settings-sidebar button:hover {
  background-color: #00ffff; /* Neon blue on hover */
  color: #000; /* Black text */
}

/* Sections */
section {
  padding: 20px;
  margin: 20px auto;
  max-width: 800px;
  background-color: rgba(34, 34, 34, 0.8); /* Semi-transparent dark grey */
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(128, 128, 128, 0.5); /* Subtle grey shadow */
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

section:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); /* Neon glow on hover */
}

/* Programming Languages Section */
.skills-list {
  list-style: none;
  padding: 0;
}

.skills-list li {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  margin: 15px 0;
}

.skills-list i {
  font-size: 1.5rem;
  margin-right: 10px;
  color: #00ffff; /* Neon blue for icons */
}

.skills-list span {
  margin-bottom: 10px; /* Space between text and progress bar */
}

.progress-bar {
  width: 100%; /* Full width of the container */
  background-color: #222; /* Dark background for progress bar */
  border-radius: 5px;
  height: 10px;
  overflow: hidden;
}

.progress {
  background-color: #fff; /* White progress bar */
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease;
}

/* Roles Section */
.roles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.role {
  flex: 1 1 calc(33.333% - 40px);
  background-color: rgba(51, 51, 51, 0.8); /* Slightly lighter dark grey */
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 5px rgba(128, 128, 128, 0.5); /* Subtle grey shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.role:hover {
  transform: scale(1.05); /* Slightly enlarge on hover */
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); /* Neon glow on hover */
}

.role i {
  font-size: 2.5rem; /* Icon size */
  color: #00ffff; /* Neon blue for icons */
  margin-bottom: 10px; /* Space between icon and title */
}

.role h3 {
  margin: 10px 0; /* Space between title and description */
}

.role p {
  font-size: 0.9rem; /* Smaller text for description */
}

/* Social Icons */
.icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.icons i {
  font-size: 2.5rem;
  color: #fff; /* White icons */
  transition: color 0.3s, transform 0.3s;
}

.icons i:hover {
  color: #00ffff; /* Neon blue on hover */
  transform: scale(1.2); /* Slightly enlarge on hover */
}

/* Footer */
footer {
  text-align: center;
  padding: 10px;
  background-color: rgba(17, 17, 17, 0.8); /* Semi-transparent black */
  backdrop-filter: blur(10px); /* Frosted glass effect */
  margin-top: 20px;
  box-shadow: 0 0 10px rgba(128, 128, 128, 0.5); /* Subtle grey shadow */
}

/* Responsive Design */
@media (max-width: 768px) {
  .roles-container {
    flex-direction: column;
  }

  .role {
    flex: 1 1 100%;
  }
}