.SectionLeft {
    background-color: var(--bg-color);
    width: 300px;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    border-right: 2px solid white;
}

.DivIcon {
    background-color: transparent;
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    height: auto;
    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.DivIconTop {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    background-color: var(--box-bg);
    padding: 15px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}


.DivIconImage {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}


.ProfileImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}


.DivIconText {
    color: var(--text-main);
    font-weight: bold;
    font-size: 1.2rem;
    /*font-family: Oswald;*/
}

.DesktopSettings {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--box-bg);
    color: var(--text-muted);
    padding: 10px 15px;
    border-radius: 8px;

    text-decoration: none;
    font-size: 1.3rem;
    transition: color 0.2s, background-color 0.2s;
}

.DesktopSettings:hover {
    color: var(--text-main);
    background-color: var(--panel-bg);

}


.DivGuide {
    position: absolute;
    top: 170px;
    left: 20px;
    right: 20px;
    height: auto;
    z-index: 5;
    display: inline-grid;
}

.AGuide
{
    font-size: 1.3rem;
    color: var(--text-muted);
    text-decoration:none;
}

.AGuide:hover
{
    color: var(--text-main);
}


.DivContact {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    height: auto;
    z-index: 10;
    display: inline-grid;

}

.ALink
{
    font-size: 0.95rem;

    color: var(--text-muted);
    text-decoration:none;
}
.ALink:hover
{
    color: var(--text-main);

}

.AGuide.active-page{
    color: var(--text-main);
    font-weight: bold;
}

.LineDivider {
    border: none; /* Removes the default 3D browser border */
    height: 1px; /* The thickness of the line */
    background-color: var(--box-bg); /* Matches your dark borders */
    width: 100%;
    margin: 5px 0; /* Creates 30px of empty breathing room above and below the line */
}

/* --- SUB-NAVIGATION (FILE TREE) --- */
.SubGuide {
    position: relative;
    padding-left: 24px; /* Creates the indentation */
    font-size: 1.15rem;
    /* Removed the negative margin so it no longer hits Portfolio! */
}

/* Draws the |- shape */
/*.SubGuide::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    left: 8px;*/
/*    top: -8px; !* Reaches up just enough to look connected *!*/
/*    height: 22px; !* Fixed height so it strictly stops at the middle of the text *!*/
/*    width: 10px;*/

/*    border-left: 2px solid var(--text-muted);*/
/*    border-bottom: 2px solid var(--text-muted);*/
/*    border-bottom-left-radius: 4px;*/
/*}*/

/*!* Make the branch turn white when active *!*/
/*.SubGuide.active-page::before {*/
/*    border-color: var(--text-main);*/
/*}*/

.SubGuide::before {
    content: '•';
    position: absolute;
    left: 10px;
    color: var(--text-muted);
}
.SubGuide.active-page::before {
    color: var(--text-main);
}

/*.SubGuide::before {*/
/*    content: '\f005';*/
/*    font-family: 'Font Awesome 6 Free';*/
/*    font-weight: 900; !* Required for FontAwesome solid icons *!*/
/*    position: absolute;*/
/*    left: 8px;*/
/*    font-size: 0.7rem; !* Make it a bit smaller than the text *!*/
/*    color: var(--text-muted);*/

/*    !* Vertically center the icon *!*/
/*    top: 50%;*/
/*    transform: translateY(-50%);*/
/*}*/
/*.SubGuide.active-page::before {*/
/*    color: var(--text-main);*/
/*}*/

/* --- CHAOTIC PERSONAL LINK --- */

.PersonalLink:hover {
    /* Plays the 2.5 second animation exactly once per hover */
    animation: glitch-chaos 2.5s 1 forwards;
}

@keyframes glitch-chaos {
    /* Swapped out Comic Sans, Impact, and Fantasy for fonts with stable baselines */
    0%  { font-family: monospace; color: #ff3366; font-style: italic; letter-spacing: 1px; }
    10% { font-family: serif; color: #33ccff; font-weight: 900; letter-spacing: -1px; }
    20% { font-family: Arial, sans-serif; color: #ffcc00; font-style: normal; }
    30% { font-family: 'Arial Black', sans-serif; color: #cc33ff; text-transform: uppercase; }
    40% { font-family: system-ui; color: #33ff33; font-weight: 100; letter-spacing: 2px; }
    50% { font-family: Georgia, serif; color: #ff6633; font-style: italic; }
    60% { font-family: 'Courier New', monospace; color: #00ffff; font-weight: bold; }
    70% { font-family: Tahoma, sans-serif; color: #ff00ff; text-transform: lowercase; }
    80% { font-family: 'Trebuchet MS', sans-serif; color: #ffff00; font-style: oblique; }
    90% { font-family: 'Times New Roman', serif; color: #ff0055; font-weight: 900; }

    100% {
        font-family: inherit;
        color: var(--text-main);
        font-style: normal;
        font-weight: normal;
        letter-spacing: normal;
        text-transform: none;
    }
}

@media (max-width: 800px)
{
    .SectionLeft {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 10;
    }

    .SectionLeft.active {
        display: block;
    }

    .DivIcon {
        height: auto;
        padding: 0;
    }

    .DesktopSettings {
        display: none;
    }

    .DivGuide {
        top: 120px;
    }

    .DivContact
    {
        bottom: 90px;
    }
}