@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Roboto:wght@100;300;400&display=swap');

:root {
    --bg0: #202327;
    --bg1: #282d33;
    --bg2: #31373f;
    --bg3: #3e4248;

    --fg0: #bbc0ca;
    --fg1: #434c56;

    --acc: #bbc0ca;
}

:root {
    color: var(--fg0);
    font-family: "Noto Sans Mono", "Roboto", sans-serif;
}

html, body {
    margin:  0;
    padding: 0;

    width:  100vw;

    overflow: auto;

    background-color: var(--bg0);
}

.container {
    margin: 1rem auto;
    max-width: 768px;

    border-radius: 8px;
    border: 1px solid var(--fg1);

    background-color: var(--bg1);
    overflow: hidden;
}

.container-titlebar {
    width: 100%;

    background-color: var(--bg2);
}

.container .pad {
    padding: .5rem 1rem;
}

.container-titlebar h4 {
    padding: 0;
    margin: 0;
}


/* Table */

table {
    width: 100%;
    border-collapse: collapse;
}

table thead tr {
    border-bottom: 1px solid var(--bg2);
}

.graph-image {
    max-width: 100%;
}

.disk-graph-entry {
    background-color: var(--bg3);

    border-radius: 8px;

    padding: .3rem .5rem;
}