* {
    box-sizing: border-box;
}

body {
    margin:0;
    font-family: system-ui, -apple-system, sans-serif;
    background:#1e1e1e;
    color:#ddd;
}

.app {
    display:flex;
    height:100vh;
}

/* APP BAR */

.appbar {

    width:48px;
    background:#181818;
    border-right:1px solid #333;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding-top:10px;
}

.appbar nav a {

    display:block;
    padding:10px;
    text-decoration:none;
    color:#aaa;
}

.appbar nav a:hover {
    background:#333;
}

/* TREE */

.tree {

    width:260px;
    background:#202020;
    border-right:1px solid #333;

    overflow:auto;
}

.tree-header {

    padding:10px;
}

.tree-header input {

    width:100%;
    padding:6px;

    background:#2a2a2a;
    border:none;
    color:white;
}

/* TREE LIST */

.tree-list {
    list-style:none;
    padding:0 10px;
}

.tree-list li {
    padding:5px;
    cursor:pointer;
}

.tree-list li:hover {
    background:#333;
}

/* CONTENT */

.content {

    flex:1;

    display:flex;
    justify-content:center;

    overflow:auto;
}

.document {

    max-width:900px;
    padding:40px;
}

.document h1 {
    margin-top:0;
}

/* MOBILE */

@media (max-width: 900px) {

.tree {
    position:fixed;
    left:-260px;
    top:0;
    height:100%;
    transition:0.2s;
}

.tree.open {
    left:48px;
}

}