:root {
  --bg:          darkslategrey;
  --bg2:         #111f16;
  --bg3:         #162b1d;
  --bg4:         #1c3424;
  --surface:     #1e3828;
  --surface2:    #243f2f;
  --border:      rgba(120,200,130,0.12);
  --border2:     rgba(120,200,130,0.22);
  --green:       #3ecf6e;
  --green-dim:   #2a9f52;
  --green-pale:  rgba(62,207,110,0.10);
  --amber:       #e8a23a;
  --amber-pale:  rgba(232,162,58,0.12);
  --red:         #e05252;
  --red-pale:    rgba(224,82,82,0.12);
  --blue:        #5baee8;
  --blue-pale:   rgba(91,174,232,0.10);
  --text:        #d4e8d8;
  --text2:       #7aad86;
  --text3:       #4a7557;
  --mono:        'DM Mono', monospace;
  --sans:        'DM Sans', sans-serif;
  --serif:       'Fraunces', Georgia, serif;
  --r:           6px;
  --r2:          10px;
}
body {
    background: var(--bg2);
    color: var(--text);
}
.wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.topbar {
  display: flex;
  height: 52px;
  align-items: center;
  padding: 8px;
}
.topbar .item::before {
    content: '•';
}
.topbar .brand {
    padding: 0 20px;
    font-size: larger;
    margin: auto;  /* center in top bar */
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1em;
    color: var(--text);
}
.topbar .logo {
    height: 48px;
}
.logo.right {
    padding: 2px;
}

/* details pages */
.section {
    flex: 1;
    display: inline-block;
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 16px;
}

.section-header {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}

.property {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}

.key {
    color: var(--text2);
}
.value {
    color: var(--text);
    font-family: var(--mono);
    text-align: right;
}

/* sensitivity colors */
.low {
  color: #2b83ba !important;
}
.low-medium {
  color: #abdda4 !important;
}
.medium {
  color: #ffffbf !important;
}
.medium-high {
  color: #fdae61 !important;
}
.high {
  color: #bd191c !important;
}