/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #9366b0;
  color: #000000;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: 10px;
  text-align: left;
  outline: 2px;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #c291da;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 18px 18px;
  display: none;
  overflow: hidden;
  background-color: #eeeeee;
}

/* Main page css */
body {
  background-color: #232323;
}

main {
  margin: 25px;
}

/* header size 1 css */
h1 {
  background-color: #80539d;
  padding: 25px;
  margin: -8px;
  padding-left: 100px;
}

/* header size 2 css */
h2 {
  background-color: #80539d;
  padding: 20px;
  margin-bottom: 0px;
}

/* Paragraph css */
p {
  background-color: #eeeeee;
  padding: 20px;
  margin-top: 0px;
  text-indent: 0px;
}
.indented {
    display: block;
    text-indent: 20px;
}

/* Sidebar container */
.sidebar {
    width: 250px; /* Sidebar width */
    height: 100vh; /* Full height */
    background-color: #333; /* Dark background */
    color: white; /* White text */
    position: fixed; /* Fixed position */
    top: 0;
    left: 0;
    overflow-y: auto; /* Enable scrolling if content overflows */
    display: none; /* Hidden by default */
    padding-top: 20px; /* Padding at the top */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5); /* Shadow effect */
}

/* Close button */
.close-btn {
    background-color: #444; /* Slightly lighter than sidebar background */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    width: 100%; /* Full-width button */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Close button hover effect */
.close-btn:hover {
    background-color: #575757; /* Slightly lighter on hover */
}

/* Sidebar links */
.sidebar .button {
    display: block; /* Block-level links */
    padding: 10px 15px; /* Add padding */
    color: white; /* White text */
    text-decoration: none; /* Remove underline */
    background-color: #333; /* Match sidebar background */
    border: none; /* Remove button borders */
    cursor: pointer; /* Pointer cursor for buttons */
    text-align: left; /* Align text to the left */
    font-size: 16px; /* Set font size */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for sidebar links */
.sidebar .button:hover {
    background-color: #575757; /* Slightly lighter on hover */
}

/* Open sidebar button */
.open-btn {
    background-color: #333; /* Dark background */
    color: white; /* White text */
    border: none; /* Remove border */
    padding: 10px 15px; /* Add padding */
    cursor: pointer; /* Pointer cursor */
    font-size: 35px; /* Larger font size for the hamburger icon */
    border-radius: 5px; /* Rounded corners */
    position: fixed; /* Fixed position for visibility */
    top: 17px; /* Position near the top */
    left: 30px; /* Position near the left edge */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
    padding-top: 4px
}

/* Hover effect for open button */
.open-btn:hover {
    background-color: #575757; /* Slightly lighter on hover */
}