/* =========================================
           BASIC PAGE
           ========================================= */

        body {

            padding: 0px;
            font-family: "Courier New", monospace;
            color: #2b2b2b;
        }

        .archive-window {
            max-width: 800px;
            border: 1px solid #666;
            box-shadow: 4px 4px 0 #000;
        }
        
        .year-label {
            color: #2b2b2b;
            font-weight: bold;
}

         .month-label {
            color: #2b2b2b;
}


        /* =========================================
           WINDOW TITLE BAR
           ========================================= */

        .window-title {
            display: flex;
            align-items: center;
            gap: 8px;

            padding: 6px 10px;

            background: #000;
            color: #000;

            border-bottom: 1px solid #666;

            font-weight: bold;
        }

        .window-icon {
            font-size: 14px;
        }


        /* =========================================
           ARCHIVE TREE AREA
           ========================================= */

        .tree {
            padding: 18px;
            overflow-x: auto;
        }

        .tree ul {
            list-style: none;
            margin: 0;
            padding-left: 22px;
        }

        .tree > ul {
            padding-left: 0;
        }

        .tree li {
            position: relative;
            margin: 0;
            padding: 0;
        }


        /* =========================================
           TREE LINES
           ========================================= */

        .tree li::before {
            content: "";
            position: absolute;

            left: -12px;
            top: 0;
            bottom: 0;

            border-left: 1px solid #555;
        }

        .tree li:last-child::before {
            bottom: 50%;
        }

        .tree li::after {
            content: "";

            position: absolute;

            left: -12px;
            top: 14px;

            width: 12px;

            border-top: 1px solid #555;
        }

        .tree > ul > li::before,
        .tree > ul > li::after {
            display: none;
        }


        /* =========================================
           TREE NODES
           ========================================= */

        .node {
            display: flex;
            align-items: center;

            min-height: 28px;

            white-space: nowrap;
        }

        .toggle {
            border: 0;
            background: transparent;

            padding: 3px 5px;

            color: #ddd;

            font-family: inherit;
            font-size: 14px;

            cursor: pointer;
            text-align: left;
        }

        .toggle:hover {
            background: #deb8c9;
            color: #2b2b2b;
        }


        /* =========================================
           ARROWS
           ========================================= */

        .arrow {
            display: inline-block;

            width: 16px;

            color: #aaa;

            transition: transform 0.1s ease;
        }

        .toggle.open .arrow {
            transform: rotate(90deg);
        }


        /* =========================================
           FOLDERS
           ========================================= */

        .folder-icon {
            margin-right: 7px;
        }

        .year-label {
            color: #2b2b2b;
            font-weight: bold;
        }

        .month-label {
            color: #2b2b2b;
        }


        /* =========================================
           COLLAPSIBLE CONTENT
           ========================================= */

        .children {
            display: none;
        }

        .children.open {
            display: block;
        }


        /* =========================================
           POST LINKS
           ========================================= */

        .post-link {
            display: inline-block;

            padding: 4px 7px;

            color: #2b2b2b;
            text-decoration: none;
            text-align: left;

            font-size: 13px;
        }

        .post-link:hover {
            background: #deb8c9;
            color: #2b2b2b;
        }

        .file-icon {
            margin-right: 7px;
            color: #888;
        }

        .post-day {
            color: #777;
        }


        /* =========================================
           STATUS / ERROR
           ========================================= */

        .status {
            padding: 20px;
            color: #888;
        }

        .error {
            color: #d88;
        }