/******************************
    
              Essentials
    
    ******************************/

    body {
        font-family: ms gothic;
        color: black;
        font-size: 16px;
        background-image: url('https://nextcloud.savarin.red/s/78xoAdXTbefAcYA/preview');
    }

    a {
        text-decoration: none;
        color: #FF006A;
    }

    #grid-container-wide {
        width: 1400px;
        /* 350 + 700 + 350 */
        margin: 0 auto;

        display: grid;
        grid-template-columns: 350px 700px 350px;
        grid-template-areas:
            ". Top ."
            "Left Center Right"
            ". Bottom .";
        justify-content: stretch;
        justify-items: stretch;
        align-items: stretch;
        gap: 15px;

    }

    /* Header */
    #header {
        grid-area: Top;
        width: 690px;
        border: 5px white ridge;
        border-bottom: none;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        background: white;
        height: 280px;
    }

    #header_content {
        object-fit: fill;
        background-position: 90% 80%;
        background-size: 100%;
        box-shadow: 0 0 10px 10px white inset;
    }

    #header_white_gradient {
        background: white;
        background: linear-gradient(to top, white 15%, transparent);
        width: 100%;
        height: 310px;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }

    /* Generic box */
    #container {
        border: 5px white ridge;
        background: white;
        padding: 10px;
        box-sizing: border-box;
        overflow: scroll;
        padding-right: 0px;
        padding-left: 0px;
        scrollbar-gutter: stable both-edges;
    }

    /* Center */
    #center {
        grid-area: Center;
        width: 700px;
    }

    /* Left column */
    #left {
        grid-area: Left;

        display: flex;
        justify-content: flex-end;
        /* push sidebar next to center */
        align-items: flex-start;

    }

    #left #container {
        width: 250px;
    }

    /* Right column */
    #right {
        grid-area: Right;
        overflow: hidden;
    }

    #right #container {
        width: 350px;
        overflow: hidden;


    }

    /* Footer */
    #footer {
        grid-area: Bottom;
        width: 700px;
        text-align: center;
    }

    /* Blog elements*/
    #blog {
        border: none;
        width: 100%;
        height: 100%;

    }

    #blog_header {
        border: 5px;
        background: #eeeeee;
        padding: 5px;
        font-size: 26px;
    }

    #blog_date {
        text-align: right;
    }

    #article {
        padding: 5px;


    }

    #content {
        flex: 1;
        overflow-y: auto;
    }

    #tree {
        font-size: 20px;
    }

    .folder {
        display: flex;
        flex-direction: column;
    }

    .folder-title {
        cursor: pointer;
    }

    .folder-content {
        display: none;
    }

    .folder.open>.folder-content {
        display: block;
    }

    .post-link {
        cursor: pointer;
    }

    .post {
        padding-top: 5px;
        padding-bottom: 10px;
        margin-bottom: 5px;
        font-size: 18px;
    }



    /* Legacy WebKit — older Chrome/Edge/Safari, radius, borders & shadows */
    ::-webkit-scrollbar {
        width: 10px;
        height: 4px;
        padding: 0px;
    }

    ::-webkit-scrollbar-track {
        border-radius: 0px;
        border: none;
        margin-top: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #eeeeee;
        border-radius: 0px;
        min-height: 10px;

    }

    ::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }