/* General reset for consistent styling */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: #121212; /* Dark background for the whole page */
    color: #e0e0e0; /* Light text color */
    box-sizing: border-box; /* Ensure padding is included in width/height calculations */
}

/* Container for the left panel and main content */
.container {
    display: flex; /* Aligns left panel and main content side by side */
}

/* Styling for the expand button */
.expand-button {
    font-size: 18px; /* Adjust font size */
    position: absolute;
    top: 25%; /* Position vertically */
    right: -30px; /* Place outside the left panel */
    transform: translateY(-50%) rotate(0deg); /* Default arrow facing left */
    background-color: #1e1e1e; /* Dark background for the button */
    border-top: 2px solid #333; /* Top border */
    border-right: 2px solid #333; /* Right border */
    border-left: 2px solid #1e1e1e; /* Left border */
    border-bottom: 2px solid #333; /* Bottom border */
    color: #ffe599; /* Button text color */
    padding: 15px 20px; /* Button padding */
    cursor: pointer; /* Pointer cursor on hover */
    transition: right 0.3s ease, transform 0.3s ease; /* Smooth transition for position and rotation */
    z-index: 1000; /* Place on top of other elements */
}

/* Styling for the left panel */
.left-panel {
    background-color: #1e1e1e; /* Dark background for the left panel */
    width: 250px; /* Initial width of the panel */
    flex-shrink: 0; /* Prevent shrinking */
    padding: 20px; /* Padding inside the panel */
    box-sizing: border-box; /* Include padding in width calculation */
    border-right: 2px solid #333; /* Darker border between left panel and main content */
    height: 100vh; /* Full height of the viewport */
    position: relative; /* Relative positioning for the expand button */
    transition: width 0.3s ease; /* Smooth transition when width changes */
}

/* Styling for the collapsed left panel */
.left-panel.collapsed {
    width: 0px; /* Set width to 0 when collapsed */
    padding: 0px; /* Remove padding when collapsed */
}

/* Hide links when the panel is collapsed */
.left-panel.collapsed a {
    display: none; /* Hide links when the panel is collapsed */
}

/* Rotate the expand button when the panel is collapsed */
.left-panel.collapsed ~ .expand-button {
    right: 0; /* Move the button to the edge of the collapsed panel */
    transform: translateY(-50%) rotate(180deg); /* Rotate the arrow to face right */
}

/* Styling for links inside the left panel */
.left-panel a {
    display: block; /* Make the anchor take up the full width */
    color: #6fa8dc; /* Light blue text color for links */
    text-decoration: none; /* Remove underline from links */
    padding: 10px 0; /* Vertical padding for links */
    border-bottom: 1px solid #333; /* Dark separator line between links */
}

/* Style for the active link */
.left-panel a:active,
.left-panel a:focus {
    color: #ffe599; /* Change text color when active or focused */
    font-weight: bold; /* Make text bold */
    text-decoration: underline; /* Underline the text */
}

/* Remove the underline from the last link */
.left-panel a:last-child {
    border-bottom: none; /* Remove bottom border from the last link */
}

/* Styling for the main content area */
.main-content {
    flex: 1; /* Ensure main content takes up remaining space */
    background: linear-gradient(-75deg, #515151, #232323, #1f1f1f); /* Gradient background */
    background-size: 400% 400%; /* Large background size for animation */
    padding: 30px 10px 30px 30px; /* Padding for content */
    animation: gradient 15s ease infinite; /* Animate the gradient background */
    position: relative; /* Position relative to allow for expand-button placement */
    transition: margin-left 0.3s ease; /* Smooth transition when margin changes */
    overflow-y: auto; /* Allow vertical scrolling */
}

/* General style for common links */
.common-link {
    color: #72afff; /* Light blue color for common links */
    text-decoration: underline; /* Underline links */
}

/* Style for active and focused common links */
.common-link:active,
.common-link:focus {
    color: #ffe599; /* Change color on click or focus */
    text-decoration: underline; /* Keep underlined */
}

.main-content a {
    color: #72afff;         /* Make links light blue */
    text-decoration: none;    /* Optional: Remove underline */
}

.main-content a:hover {
    color: #ffe599;          /* Change color on hover */
}


.section {
    flex: 1; /* Allow sections to grow and fill available space */
    border: 2px solid #8f8f8f; /* Border around each section */
    padding: 20px; /* Padding inside the border */
}


.expand-button:hover {
    background-color: #303c41; /* Darken on hover */
}

/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column; /* Stack content vertically */
        padding: 30px; /* Adjust padding */
        padding-bottom: 600px; /* Increase bottom padding */
        animation: gradient 7s ease infinite; /* Faster gradient animation */
    }

    .left-panel {
        height: auto; /* Auto height based on content */
        width: 120px; /* Reduced width for smaller screens */
        padding: 10px; /* Adjust padding */
        padding-bottom: 20px; /* Extra bottom padding */
        border-right: none; /* Remove right border */
        border-bottom: 2px solid #333; /* Add bottom border */
        height: 100vh; /* Full viewport height */
    }

    /* Adjust the expand button for smaller screens */
    .expand-button {
        right: -20px; /* Adjust position */
        padding: 12px; /* Smaller padding */
    }


    @keyframes gradient-mobile {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
}

/* Media query for screens wider than 1024px */
@media (min-width: 1024px) {
    .main-content {
        font-size: 20px; /* Increase font size for larger screens */
    }
}

/* Styling for the footer */
footer {
    display: flex;
    flex-direction: row;
    justify-content: space-around; /* Space out items evenly */
    align-items: center; /* Center items vertically */
    background-color: #859fb5; /* Light blue background for the footer */
    padding: 15px; /* Footer padding */
    width: 100%; /* Full width of the footer */
    box-sizing: border-box; /* Include padding in width */
    position: sticky; /* Sticky positioning at the bottom of the viewport */
    bottom: 0; /* Align to the bottom */
}

/* Styling for Font Awesome icons in the footer */
footer .fa {
    font-size: 25px; /* Larger icons */
    color: #0b5394; /* Blue color for icons */
    text-decoration: none; /* Remove underline from icons */
    transition: color 0.3s; /* Smooth color transition on hover */
}

footer .fa:hover {
    color: #073258; /* Darker blue color on hover */
}

/* Keyframe animation for background gradient */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}