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

html {
    /* variables */
    --theme-bg:   #000;
    --theme-bg-l: #333;
    --theme-fg: lime;
    --theme-hg: #fff; /*highlight*/
    --sidebar-width: 13em;
    
}

/* ====  body color ========= */

body {
    background-color: var(--theme-bg);
    color:            var(--theme-fg);
    font-size: 1em;
    font-family: monospace;
    letter-spacing: -.2px;
}



/* ============ two column layout======== */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: calc(100% - var(--sidebar-width));
}
main {
    position: absolute;
    left: var(--sidebar-width);
    top: 0;
    right: 0;
    bottom: 0;
}

/* ============ menu list details ============ */

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--theme-fg);
} 
.menu > ul a {
    padding-left: 0.5em;
}
.menu > ul ul a {
    padding-left: 2em;
}

.menu a {
    display: block;
}

.menu a:link {
    text-decoration: none;
    color: inherit;
}
.menu a:hover {
    color: var(--theme-hg);
}

/*================ sidebar section ============ */

.sidebar-section {
    margin-bottom: 1em;
    text-align: center;
}

.menu {
    text-align: left;
}

.acces {
    color: red;
}

/* ==================== window ================ */
.window {
    border: 1px solid var(--theme-fg);
    border-collapse: collapse;
}
.window > header {
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 0.2em;
    background-color: var(--theme-fg);
    color: var(--theme-bg);
    
    margin-bottom: 0.3em;
}

.window > header:after {
    content: "-";
    color: var(--theme-bg);
    float: right;
    margin-right: 0.5em;
}

/* =================== main =========== */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
}
main * {
    max-width: 60em;
    margin: 0.5em;
    
}

/* ============== site description ============ */
.site-description header ~ * {
    text-align: center;
    padding: 0.5em;
}
.site-description img {max-width: 60%; margin: auto; display: block;}


/* ========= featured post ================= */

.featured-post header ~ * {
  padding: 0.5em;  
}

/*==== quick & dirty === */
body  {
    height: 500em;
    font-size: 1.2em;
}