@font-face {
  font-family: Anton;
  src: url("fonts/Anton-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --kol-pink: #f2d5e6;
  --kol-paper: #f8ecf3;
  --kol-red: #b3251e;
  --kol-red-dark: #8b1c17;
  --kol-text: #1a1a1a;
  --kol-muted: #4a3e44;
  --kol-border: #d6afc5;
  --bs-body-font-family: Arial, Helvetica, sans-serif;
  --bs-body-color: var(--kol-text);
  --bs-body-bg: var(--kol-pink);
  --bs-link-color: var(--kol-red);
  --bs-link-hover-color: var(--kol-red-dark);
  --bs-border-color: var(--kol-border);
  --bs-primary-rgb: 179, 37, 30;
}

body { line-height: 1.6; }
.narrow { max-width: 46rem; }
main { padding-bottom: 3rem; }
h1, h2, h3, .navbar-brand {
  font-family: Impact, Anton, "Arial Narrow", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--kol-red);
}
h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 1.5rem; }
h2, h2.h4 { font-size: 1.7rem; }
h3, h3.h5 { font-size: 1.35rem; }
.navbar-brand.fw-bold { font-weight: 400 !important; font-size: 1.5rem; }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.site-header { border-bottom: 1px solid var(--kol-muted); }
.site-header a { color: var(--kol-red); }
.card {
  --bs-card-bg: var(--kol-paper);
  --bs-card-border-color: var(--kol-border);
  --bs-card-border-radius: .35rem;
}
.card-body { padding: 1.5rem; }
.form-control, .form-select, .btn { min-height: 44px; }
.form-control, .form-select { background-color: #fff; border-color: var(--kol-border); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--kol-red);
  box-shadow: 0 0 0 .25rem rgb(179 37 30 / 20%);
}
.form-check-input { width: 1.25em; height: 1.25em; background-color: #fff; border-color: var(--kol-muted); }
.form-check-input:checked { background-color: var(--kol-red); border-color: var(--kol-red); }
.form-check-label { padding-left: .4rem; }
.btn-primary {
  --bs-btn-bg: var(--kol-red);
  --bs-btn-border-color: var(--kol-red);
  --bs-btn-hover-bg: var(--kol-red-dark);
  --bs-btn-hover-border-color: var(--kol-red-dark);
  --bs-btn-active-bg: var(--kol-red-dark);
  --bs-btn-active-border-color: var(--kol-red-dark);
  --bs-btn-disabled-bg: var(--kol-red);
  --bs-btn-disabled-border-color: var(--kol-red);
  --bs-btn-focus-shadow-rgb: 179, 37, 30;
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger {
  --bs-btn-color: var(--kol-red);
  --bs-btn-border-color: var(--kol-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--kol-red);
  --bs-btn-hover-border-color: var(--kol-red);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--kol-red-dark);
  --bs-btn-active-border-color: var(--kol-red-dark);
  --bs-btn-focus-shadow-rgb: 179, 37, 30;
}
.alert-info, .alert-success {
  --bs-alert-bg: var(--kol-paper);
  --bs-alert-color: var(--kol-muted);
  --bs-alert-border-color: var(--kol-border);
}
.alert-danger {
  --bs-alert-bg: #fff;
  --bs-alert-color: var(--kol-red-dark);
  --bs-alert-border-color: var(--kol-red);
}
dt, dd, a, p { overflow-wrap: anywhere; }
dl dt { margin-top: .5rem; }
textarea[readonly] { font-family: monospace; background-color: var(--kol-paper); }
.survey-table { --bs-table-bg: var(--kol-paper); }
.survey-table td { overflow-wrap: anywhere; }
.chart-scroll { overflow-x: auto; }
.trend { width: 100%; min-width: 36rem; }
.trend text { fill: var(--kol-text); font-size: 13px; }
.chart-axis { stroke: var(--kol-muted); stroke-width: 1; }
.chart-grid { stroke: var(--kol-border); stroke-width: 1; stroke-dasharray: 2 4; }
.trend polyline { fill: none; stroke: var(--kol-red); stroke-width: 2; }
.trend circle { fill: var(--kol-red); }
.trend polyline.mean-series { stroke: var(--kol-muted); stroke-dasharray: 6 4; }
.trend circle.mean-series { fill: var(--kol-muted); }
.sleep-key { color: var(--kol-red); font-weight: 700; }
.mean-key { color: var(--kol-muted); font-weight: 700; }