:root {
  /*------------ Colors -------------*/
  --primary-color: #963cdd;     /* Purple */
  --secondary-color: #1668b8;   /* Blue */
  --third-color: #000000;       /* Black */
  --fourth-color: #ffffff;      /* White */
  --blue-color: #2540ce;        /* Button Blue */
  --yellow-color: #fcb900;      /* Button Yellow */
  --dark-blue-color: #0a114f;   /* Dark Blue */
  --light-blue-color: #87ceeb;  /* Light Blue */
  --dark-gray-color: #333333;   /* Dark Gray */
  --light-gray-color: #f7f7f7;  /* Light Gray */

  /*------------ Font Sizes -------------*/
  --heading-font-size: 2.2rem;
  --paragraph-font-size: 1rem;
  --small-font-size: 0.8rem;

  /*------------ Spacing -------------*/
  --spacing-small: 10px;
  --spacing-medium: 20px;
  --spacing-large: 30px;

  /*------------ Shadows -------------*/
  --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/*------------ Container Layout -------------*/
.container {
  display: flex;
  height: 100vh; /* Full viewport height */
  gap: var(--spacing-medium); /* Space between sidebar and content */
  padding: var(--spacing-medium);
  background-color: var(--light-gray-color); /* Light gray background */
}

/*------------ Sidebar -------------*/
.sidebar {
  width: 25%; /* Sidebar width */
  background-color: var(--secondary-color); /* Blue background */
  padding: var(--spacing-medium);
  border-radius: 5px;
  box-shadow: var(--box-shadow);
  color: var(--fourth-color); /* White text */
}
.sidebar ul {
  list-style:square; /* Remove default list styling */
  padding: 0;
}
.sidebar ul li a {
  color: var(--fourth-color); /* White color for links */
  font-size: var(--paragraph-font-size);
  font-weight: bold;
  text-decoration: none;
  padding-top: 20px;
  transition: color 0.3s ease; /* Smooth color transition on hover */
}
.sidebar ul li a:hover {
  color: var(--yellow-color); /* Yellow color on hover */
}

/*------------ Content Area -------------*/
.content {
  flex: 1; /* Take remaining space */
  padding: var(--spacing-medium);
  background-color: var(--fourth-color); /* White background */
  border-radius: 5px;
  box-shadow: var(--box-shadow);
  overflow-y: auto; /* Enable vertical scrolling */
}



/*------------ Video Container -------------*/
.video-container {
  margin-top: var(--spacing-medium);
}

.sidebar ul li a:hover {
  color: var(--yellow-color); /* Yellow color on hover */
}

/*------------ Responsive Adjustments -------------*/
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Stack sidebar and content on smaller screens */
    height: auto; /* Allow container to grow with content */
  }

  .sidebar {
    width: 100%; /* Full width for sidebar on smaller screens */
    margin-bottom: var(--spacing-medium); /* Add space below sidebar */
  }
}