/* Structure */

html {
    background-color: #151515;
}

body {
    font-family: monospace;
    line-height: 2vw;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.container {
    display: flex;
    flex-grow: 1;
    width: 100%;
}

.sidebar {
    min-width: 250px;
    padding: 60px;
    overflow-y: auto;
}

.content {
    flex-grow: 1;
    padding: 60px;
    overflow-y: auto;
}

footer {
    padding: 60px;
    background-color: #000;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    cursor: pointer;
    margin: 5px 0;
}

/* Fonts */
h1, h2, h3, h4, h5, h6, p {color: #f4f4f4; font-weight: 100;}
h1 {line-height: 3vw;}
h2 {margin-top: 6vw;}
p {color: #aaaaaa; font-size: 1.2vw; line-height: 2.5vw; margin-bottom: 4vw;}
a {color:#009879;}

/* Images */
img {width: 100%;}

/* File Tree*/
#fileTree .folder::before {
    content: '♢'; /* Right arrow for collapsed folders */
    display: inline-block;
    margin-right: 5px;
    transition: transform 0.2s;
}

#fileTree .folder.expanded::before {
    content: '♦'; /* Down arrow for expanded folders */
    color: #009879;
}

#fileTree li {text-transform: uppercase; color: #444444;}
#fileTree li ul li {text-transform: lowercase; color: #f4f4f4; margin-left: 20px;}
#fileTree li ul li:hover {background-color: #009879;}

/* Blockquotes */
blockquote {background-color: #eee; padding: 20px; border-radius: 5px; margin:0px}

/* Horizontal Rule*/
hr {border: 1px solid #222;}

/* Code Block */
code {
    background-color: #222;
    padding: 0px 40px;
    display: block;
    border-radius: 5px;
}

/* awful hack to remove stray <br> */
br {display: none;} /*so gross!*/


/* Tables */
table {
    font-family: monospace!important;
    color: #f4f4f4;
    background-color: #222;
    border-radius: 5px;
    border-collapse: collapse;
    margin-bottom: 4vw;
    font-size: 0.9em;
    font-family: sans-serif;
    width: 100%;
}

table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

table th,
table td {
    font-size: 1vw;
    padding: 40px 40px
}

table tbody tr {
    /*border-bottom: 1px solid #151515;*/
}

table tbody tr:nth-of-type(even) {
    background-color: #333;
}

table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

td img {
    width: 30vw;
    border-radius: 5px;
    padding: 20px;
    background-color: #fff;
}