:root {
    --primary: #DE354C;
    --secondary: #932432;
    --purple: #3C1874;
    --grey: #283747;
    --cloud: #F3F3F3;
}

body {
    padding:1em;
    background:var(--cloud);
    color:var(--grey);
}

    h1, h2, h3 {
        color:var(--primary);
        text-transform: capitalize;
    }

    h2 {
        margin-top:1em;
    }

    canvas {
        width:100%;
        height:500px;
    }

    table {
        width:100%;
        text-align: center;
        font-size: 0.9rem;
    }

        table tr td:first-child {
            text-transform: uppercase;
            text-align: right;
        }

        table tr > *:first-child, table tr > *:nth-child(2) {
            border-right: 1px solid  var(--purple);
        }

        table tr > *:first-child {
            padding-right:1em;
        }

        table th,
        table tr:nth-child(2) td,
        table tr:nth-child(4) td {
            border-bottom:1px solid #3c18742e;
        }

        table th {
            text-transform: uppercase;
            font-weight: bold;
            font-size: 0.8em;
            color:var(--purple);
        }

    .metrics {
        display:flex;
        justify-content: space-between;
    }

        .metrics .metric {
            display:flex;
            flex-direction: column;
            background:var(--primary);
            padding:0.3em 0.8em;
            text-align: center;
        }

            .metrics .metric div:first-child{
                text-transform: uppercase;
            }

            .metrics .metric div:last-child{
                font-weight: bold;
            }


.row {
    display:flex;
}

    .row .column, 
    .row .column.column-1 {
        flex:1;
    }

    .row .column.column-3 {
        flex:3;
    }



[log='log'] {

}

    [log='log'] .log {
        
    }

        [log='log'] .log .account{
            background:var(--primary);
            color:var(--cloud);
            display: flex;
            justify-content: space-between;
            padding: 0 0.3em;
        }

        [log='log'] .log .msg{
            font-size:0.9em;
            padding: 0 0.3em;
        }