.logo {
    width: auto;
    height: 40px;
}
.avatar {
    width: 40px;
    height: 40px;
}
.auth {
    max-width: 360px;
}
.tag { padding: 0.25rem .5rem; background-color: var(--primary-color);color:#fff;border-radius: 4px;display:inline-block}
h1 { font-family: serif; color: var(--text-main); margin: 1rem 0; }
a { color: var(--primary-color); }
hr { border: none; border-top: 1px solid lightgray; }
nav { background: var(--color-background); display: flex; align-items: center; padding: 0 0.5rem; }
nav h1 { flex: auto; margin: 0; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; color: var(--text-main) }
nav ul li a:hover { color: var(--primary-color)}
.content { padding: 1rem;min-height: calc(100vh - 40px); }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; text-align: center; color: var(--color-red); background-color: var(--primary-light); border: 1px solid var(--primary-color); }
input.danger { color: #cc2f2e; }
input[type=submit] { align-self: start; min-width: 10em; }
.grid {display: grid;min-height: 80vh;grid-template-columns: 1fr 1fr;grid-template-rows: min-content 1fr min-content;}
.chart {width: 100%;height:280px;}
.chart.span {grid-area: 3/1/4/3;}
.quote {margin: 0px; padding: 5px; border-style: solid; -webkit-border-image: url("/path/to/bk640.jpg") 30 75 50 fill; border-width: 20px 40px 25px; font-size: 14px; box-sizing: border-box;}