:root {
        --bg-color: #0D0D0D;
        --accent-color-1: #F0F0F0;
        --accent-color-2: #87CEFA;
        --accent-color-3: #6A5ACD;
        --font-title: 'Montserrat', sans-serif;
        --font-body: 'Roboto', sans-serif;
    }

    body {
        margin: 0;
        padding: 0;
        background-color: var(--bg-color);
        color: var(--accent-color-1);
        font-family: var(--font-body);
        display: flex;
        flex-direction: row;
    }

    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 200px;
        height: 100vh;
        background: rgba(13, 13, 13, 0.9);
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
    }

    .navbar a {
        color: var(--accent-color-1);
        text-decoration: none;
        margin: 20px 0;
        font-family: var(--font-title);
        transition: color 0.3s, transform 0.3s;
    }

    .navbar a:hover {
        color: var(--accent-color-2);
        transform: scale(1.1);
    }

    .content {
        margin-left: 220px;
        padding: 20px;
        max-width: 1000px;
    }

    h2, h3, h4 {
        font-family: var(--font-title);
        color: var(--accent-color-2);
        text-shadow: 0 0 10px var(--accent-color-2);
    }

    p {
        line-height: 1.6;
        margin: 15px 0;
    }

    pre {
        background-color: #1E1E1E;
        padding: 15px;
        border-radius: 5px;
        overflow-x: auto;
    }

    code {
        color: var(--accent-color-3);
        font-family: 'Courier New', Courier, monospace;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }

    th, td {
        border: 1px solid var(--accent-color-3);
        padding: 10px;
        text-align: left;
    }

    th {
        background-color: #2E2E2E;
    }

    .image-gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 20px 0;
    }

    .image-gallery img {
        width: 100%;
        max-width: 320px;
        height: auto;
        border-radius: 5px;
    }

    .reference {
        font-style: italic;
        color: var(--accent-color-2);
        margin: 20px 0;
    }

    @media (max-width: 1440px) {
        .content {
            max-width: 900px;
        }
    }

    @media (max-width: 1200px) {
        .navbar {
            width: 150px;
        }

        .content {
            margin-left: 170px;
            padding: 15px;
        }
    }

    @media (max-width: 1024px) {
        .navbar {
            width: 120px;
        }

        .content {
            margin-left: 140px;
        }
    }

    @media (max-width: 768px) {
        body {
            flex-direction: column;
        }

        .navbar {
            position: relative;
            width: 100%;
            height: auto;
            flex-direction: row;
            justify-content: space-around;
            padding: 10px 0;
        }

        .content {
            margin-left: 0;
            padding: 10px;
        }

        .image-gallery {
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        .navbar a {
            margin: 10px;
            font-size: 14px;
        }

        h2 {
            font-size: 1.5em;
        }

        h3 {
            font-size: 1.2em;
        }
    }

    @media (max-width: 320px) {
        .navbar a {
            font-size: 12px;
        }

        h2 {
            font-size: 1.3em;
        }

        h3 {
            font-size: 1em;
        }
    }