/* General Reset */
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
    display: block; /* Use block layout for natural content flow */
    height: auto; /* Let content determine height */
}

/* Container */
.container {
    max-width: 1200px; /* Set a maximum width for the content */
    margin: 0 auto; /* Center the container horizontally */
    display: grid; /* Use grid for the layout */
    grid-template-columns: 3fr 1fr; /* Left column: 75%, Right column: 25% */
    gap: 20px; /* Add space between columns */
    padding: 20px; /* Add padding for breathing room */
    height: auto; /* Let height adjust based on content */
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Stack columns vertically */
        gap: 10px; /* Reduce spacing */
        padding: 10px; /* Reduce padding on smaller screens */
    }

    .sidebar {
        order: -1; /* Move sidebar above main content */
        text-align: left; /* Keep text left-aligned */
    }

    .main-content {
        overflow-y: visible; /* Avoid unnecessary scrolling */
    }
}

/* Left Column: Main Content */
.main-content {
    padding: 20px;
    overflow-y: auto; /* Enable scrolling for long content */
    background-color: #f4f4f4;
}

.main-content ul li {
    position: relative; /* Allows positioning of the custom arrow */
    padding-left: 20px; /* Add spacing for arrows */
    margin-bottom: 8px; /* Adjust spacing between list items */
}

.main-content ul li::before {
    content: ">"; /* Use > as the bullet point */
    position: absolute;
    left: 0; /* Position it on the left */
    color: black; /* Set color for the arrow */
    font-weight: normal; /* Match text weight */
    font-size: 1rem; /* Adjust size to match text */
}

/* Right Column: Sidebar */
.sidebar {
    background-color: #E0F7FA; /* Pale blue background */
    color: black; /* Black text for good contrast */
    text-align: left; /* Ensure text is left-aligned */
}

.sidebar ul {
    list-style: none; /* Ensure no bullets in sidebar lists */
    padding: 0;
}

.sidebar ul li {
    margin-bottom: 10px;
    position: relative; /* Allows positioning of the custom arrow */
    padding-left: 20px; /* Add spacing for arrows */
}

.sidebar ul li:not(:has(i))::before {
    content: ">"; /* Add the > arrow */
    position: absolute; /* Position it to the left of the text */
    left: 0; /* Align it with the start of the list item */
    color: black; /* Set the color for the arrow */
    font-weight: normal; /* Match sidebar text weight */
    font-size: 1rem; /* Adjust size to match text */
}

/* Sidebar links */
.sidebar ul li a {
    color: black; /* Keep links readable */
    text-decoration: none; /* Remove underline for cleaner look */
}

.sidebar ul li a:hover {
    color: #007BFF; /* Blue hover effect */
    text-decoration: underline; /* Add underline on hover for emphasis */
}

.sidebar h2 {
    margin-bottom: 10px;
}

/* General reset for unordered lists */
ul {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
}

/* Profile picture styling */
.profile-picture {
    width: 50%; /* Adjust to fit smaller screens */
    max-width: 100%; /* Prevent overflow */
    height: auto; /* Maintain aspect ratio */
    display: block;
    border-radius: 50%; /* Make it circular */
    margin: 0 auto 20px; /* Add space below the picture */
}

h2 {
    font-family: 'Courier New', monospace; /* Monospace font for the retro aesthetic */
    text-align: center; /* Center-align the headers */
    font-size: 1.5rem; /* Adjust font size */
    color: #2E2E2E; /* Dark gray for a clean look */
    margin: 20px 0; /* Add spacing around the header */
}

/* Responsive Design: Font and Image Scaling */
@media (max-width: 768px) {
    h1, h2 {
        font-size: 1.2rem; /* Adjust headers for smaller screens */
    }

    ul li {
        font-size: 0.9rem; /* Reduce list font size */
    }

    .profile-picture {
        width: 66%; /* Slightly larger profile picture */
    }
}