html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: rgb(30, 30, 30);
    color: rgb(212, 212, 212);
}
/* WebKit-based browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px; /* Adjust width */
}

::-webkit-scrollbar-track {
    background: rgb(20, 20, 20); /* Dark track to match your sidebar */
    border-radius: 10px; /* Rounded edges */
}

::-webkit-scrollbar-thumb {
    background: rgb(100, 100, 100); /* Slightly lighter for contrast */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(120, 120, 120); /* Slightly lighter on hover */
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(100, 100, 100) rgb(20, 20, 20);
}

:root {
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
    --tran-06: all 0.6s ease;
    --sidebar-width: 150px; /* Sidebar width */
    --sidebar-padding: 20px; /* Sidebar left and right padding */
    --header-height: 75px;
}

body {
    padding: 0px 0 0 0px; /* Make room for the header and sidebar */
    z-index: 3;
    display: flex;
    flex-direction: column;
    height: 100vh; /* Ensure full height of the viewport */
    overflow: hidden; /* Prevent overflow */
}

.topnav {
    margin: 0;
    background-color: #5a5a5a8f;
    width: 45px;
    height: 45px;
    padding: 0;
    margin-left: 5px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.topnav:hover {
    cursor: pointer;
    background-color: #5A5A5A;
}

.topnav:active {
    background-color: #7a7a7a;
}

.toggle {
    padding-bottom: 2px;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.toggle svg {
    display: block;
    margin: 0 auto;
}

.header {
    user-select: none;
    display: flex;
    align-items: center;
    padding-left: 10px;
    position: fixed;
    background-color: rgb(15, 15, 15);
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    border-radius: 0 0 35px 35px;
    z-index: 2;
    width: 100%;
}

.sidebar {
    user-select: none;
    opacity: 1;
    transform: translateX(-100%); /* Initially off-screen */
    transition: var(--tran-06);
    padding-top: 50px;
    padding-left: var(--sidebar-padding); /* Sidebar left padding */
    margin-left: 0;
    position: fixed;
    background-color: rgb(20, 20, 20);
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width); /* Sidebar width */
    border-radius: 0 50px 50px 0;
    z-index: 1;
    font-size: 20px;
    display: flex;
    flex-direction: column; /* Align items vertically */
    align-items: flex-start; /* Align all items to the left */
    padding-left: var(--sidebar-padding); /* Add left padding to space out the content */
}

.sidebar img {
    margin-right: 10px;
    width: 30px;
    height: 30px;
    object-fit: contain;
    transition: var(--tran-06); /* Animate transition */
}

.sidebar .text::first-letter {
    text-transform: capitalize;
}

.sidebar .text {
    transition: var(--tran-06); /* Animate transition */
}

/* Remove default underline and color for links */
.sidebar a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Use the text color of the parent element */
    display: flex; /* Enable flexbox for aligning image and text */
    align-items: center; /* Vertically align image and text */
    padding: 5px 0; /* Add some padding for spacing */
    width: 100%; /* Ensure that a spans the full width of the sidebar */
}
.sidebar a:hover {
    color: inherit; /* Keep the same color when hovering */
}

.sidebar.close {
    transform: translateX(0); /* Move the sidebar into view */
}

.sidebar.close img {
    transform: translateX(0); /* Bring the image into view */
}

.sidebar.close .text {
    transform: translateX(0); /* Bring the text into view */
}

.sidebar ul {
    margin: 0;
    padding: 0;
    margin-top: 50px;
    list-style: none;
    width: 100%; /* Ensure ul spans the full width of the sidebar */
}

.sidebar li {
    height: 50px;
    list-style: none;
    display: flex;
    align-items: center; /* Aligns text and images vertically */
    justify-content: flex-start; /* Align the content to the left */
    width: 100%; /* Ensure li takes up the full width */
    padding-left: 10px; /* Add some padding for spacing */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

.sidebar li:hover {
    font-size: 25px;
    cursor: pointer;
}

.sidebar li:hover img {
    width: 1.5em;  /* Set the width based on the font size */
    height: 1.5em; /* Set the height based on the font size */
}

.nav-link {
    width: 100%; /* Make nav-link span the full width of the sidebar */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

.main-content {
    padding-top: var(--header-height);
    flex-grow: 1; /* Allow this div to take the remaining space */
    overflow-y: auto; /* Allow scrolling if content exceeds the screen height */
    transition: padding-left 0.6s ease; /* Animate padding when the sidebar is toggled */
    word-wrap: break-word; /* Break long words */
    overflow-wrap: break-word; /* Ensures long words break */
    white-space: normal; /* Allows wrapping */
    max-width: 100vw; /* Prevent content from exceeding viewport width */
    box-sizing: border-box; /* Include padding in width calculation */
    opacity: 0; /* Initially hidden */
    pointer-events: none; /* Disable interactions when invisible */
    padding-left: 0; /* Assuming the initial padding-left */
    transition: opacity 0.8s ease-out, padding-left 0.6s ease; /* Combined transitions */
}

.about-content img {
    width: 200px;
    float: left;
    margin: 0px 20px 0px 50px;
    border-radius: 50px;
}
.main-content.visible {
    opacity: 1; /* Fully visible */
    pointer-events: auto; /* Enable interactions once it's visible */
}
.main-content img {
    transition: width 0.5s ease; /* Smooth resizing */
}

h1 {
    padding-left: 50px;
    padding-right: 50px;
}
.sidebar.close + .main-content {
    padding-left: calc(var(--sidebar-width) + var(--sidebar-padding)); /* Dynamically adjust padding when sidebar is open */
}