/* --- Global Settings --- */
body {
    background-color: #282828;
    margin: 0;
    padding: 0;
    font-family: sans-serif; /* Clean fallback font for long reading */
}

/* --- Layout Grid (Desktop) --- */
.container {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.sidebar {
    width: 30%;
    padding: 40px 30px;
    box-sizing: border-box; /* Absorbs padding into the 30% width */
}

.main {
    width: 79%;
    padding: 40px 50px;
    box-sizing: border-box; /* Absorbs padding into the 70% width */
}

/* --- Content Typography --- */
h1.welcome, h2.intro {
    color: #7ea172;
    margin-top: 40px;
}

p.videodescription, p.descriptionlong {
    color: #7ea172;
    max-width: 800px;
    line-height: 1.6;
}

p.sidebartext {
    color: #efcca2;
    margin-top: 50px;
    margin-left: 10px;
}

video.tempdrift {
    margin-top: 10px;
    max-width: 100%; /* Keeps the video from bleeding past your layout container */
    height: auto;
}

ul.mainpoints, ul.links {
    color: #7ea172;
}

ul.links {
    color: #efcca2;
}

a {
    margin-top: 5px;
    color: #efcca2;
    display: inline-block;
}

/* --- Code Formatting (Horizontally scrolls code strings) --- */
pre {
    background-color: #1d2021; 
    border: 1px solid #504945; 
    padding: 15px;
    overflow-x: auto;
}

code {
    color: #b16286;
    font-family: 'Courier New', Courier, monospace; 
    font-size: 14px;
}


.article {
    width: 100%;
    max-width: 800px;  /* Bumped slightly from 700px so your video and paragraphs have a bit more presence */
    margin: 0;         /* Pulls the text flush to the left, aligning perfectly with your headings */
    line-height: 1.6;
    padding-bottom: 20vh; /* Smooth scrolling cushion at the bottom */
}

/* --- Mobile Responsive Rules --- */
@media (max-width: 768px) {
    /* Stack the sidebar on top of the main window instead of next to it */
    .container {
        flex-direction: column; 
    }

    /* Pull the menu to take full width at the top of the mobile device */
    .sidebar {
        width: 100%;
        position: static; 
        padding: 15px;
        border-bottom: 1px solid #504945;
    }

    /* Wrap the menu list links horizontally so they act like a simple navbar */
    .links {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        padding-left: 10px;
    }

    /* Expand the reading window to full viewport grid width */
    .main {
        width: 100% !important; 
        padding: 20px 15px; /* Leaves a tiny text margin away from the screen glass */
    }

    .article {
        max-width: 100%;
        padding-bottom: 10vh;
    }
}