body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Sidebar & header */
.flask,
#flask {
    background-color: #FF6F00;
    color: white;
}

.django,
#django {
    background-color: #0C6B3F;
    color: white;
}

.react,
#react {
    background-color: #007ACC;
    color: white;
}

.laravel,
#laravel {
    background-color: #E3342F;
    color: white;
}

.dotnet,
#dotnet {
    background-color: #6A1B9A;
    color: white;
}

.dj-rn,
#dj-rn {
    background-color: #0A7397;
    color: white;
}


/* Code block styling */
pre.code-block {
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: Consolas, monospace;
}

/* Syntax highlighting for Python / SQLAlchemy */
.keyword {
    color: #569CD6;
    font-weight: bold;
}

/* def, return, class, primary_key, nullable */
.class-name {
    color: #4EC9B0;
    font-weight: bold;
}

/* Class names */
.func-name {
    color: #DCDCAA;
}

/* Function names */
.variable {
    color: #9CDCFE;
}

/* Variables */
.string {
    color: #CE9178;
}

/* Strings */
.number {
    color: #B5CEA8;
}

/* Numbers */
.comment {
    color: #6A9955;
    font-style: italic;
}

/* Comments */

/* Syntax highlighting for Python */
.decorator {
    color: #C586C0;
}

/* @decorators */
.keyword {
    color: #569CD6;
    font-weight: bold;
}

/* def, return, class, etc. */
.func-name {
    color: #DCDCAA;
}

/* function names */
.variable {
    color: #9CDCFE;
}

/* variable names */
.string {
    color: #CE9178;
}

/* strings */
.number {
    color: #B5CEA8;
}

/* numbers */
.comment {
    color: #6A9955;
    font-style: italic;
}


/* Javascript*/
/* Syntax highlighting */
.keyword {
    color: #569CD6;
    font-weight: bold;
}

/* async, function, return, await */
.func-name {
    color: #DCDCAA;
}

/* function names */
.param {
    color: #9CDCFE;
}

/* parameters */
.variable {
    color: #C586C0;
}

/* const, let, var, variable names */
.string {
    color: #CE9178;
}

/* strings */
.number {
    color: #B5CEA8;
}

/* numbers */
.prop {
    color: #4EC9B0;
}

/* object properties */
.comment {
    color: #6A9955;
    font-style: italic;
}

/* comments */

/* Syntax highlighting for HTML / Jinja */
.tag {
    color: #569CD6;
    font-weight: bold;
}

/* HTML tags */
.attr {
    color: #9CDCFE;
}

/* Attributes */
.string {
    color: #CE9178;
}

/* Attribute values / strings */
.variable {
    color: #DCDCAA;
}

/* Jinja variables */
.jinja {
    color: #C586C0;
    font-weight: bold;
}

/* Jinja statements */
.comment {
    color: #6A9955;
    font-style: italic;
}

/* Comments */

/* Desktop main content spacing */
.w3-main {
    margin-left: 300px;
    transition: margin-left 0.3s;
}

/* Sidebar toggle button for mobile */
.openbtn {
    font-size: 20px;
    cursor: pointer;
    color: white;
    padding: 10px 15px;
    border: none;
}

/* Overlay for mobile */
#myOverlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Mobile adjustments */
@media screen and (max-width:768px) {
    .w3-main {
        margin-left: 0;
    }

    #mySidebar {
        position: fixed;
        height: 100%;
        top: 0;
        left: 0;
        width: 250px;
        display: none;
        z-index: 1000;
        overflow-y: auto;
    }

    .openbtn {
        display: block;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1001;
    }
}